《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.20 技巧:向jQuery Mobile中的DOM结点添加数据...

    xiaoxiao2024-01-27  163

    本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章,第9.20节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看

    9.20 技巧:向jQuery Mobile中的DOM结点添加数据

    jQuery Mobile提供了该函数的一个变体,即jqmData()。代码清单9-24演示了如何能像使用data()函数一样来使用它。主要的区别是它考虑了命名空间(namespace)。命名空间在jQuery Mobile中很重要,当jQuery Mobile连同其他插件或者外部库一起使用时,它有助于保护该框架不受到影响。当使用jQuery Mobile时,jQuery Mobile团队推荐使用jqmData()方法而不是jQuery Core中的data()方法。

    代码清单9-24 添加、获取和移除jQuery Mobile中与DOM结点关联的数据

    00 <!DOCTYPE html> 01 <html> 02 <head> 03  <title>jQuery Mobile Data Function</title> 04  <meta name="viewport" 05    content="width=device-width, initial-scale=1"> 06  <link rel="stylesheet" href= 07    "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> 08  <script type="text/javascript" 09    src="http://code.jquery.com/jquery-1.7.1.min.js"> 10  </script> 11  <script type="text/javascript" src= 12    "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 13  </script> 14  <script> 15  $(document).ready(function() { 16    17    $('#setdata').on('click', function(event) { 18     $('#mydata').jqmData('mykey', 'myvalue'); 19    }); 20    $('#getdata').on('click', function(event) { 21     alert($('#mydata').jqmData('mykey')); 22    }); 23    $('#removedata').on('click', function(event) { 24     $('#mydata').jqmRemoveData('mykey'); 25    }); 26    $('#select').on('click', function(event) { 27     alert('Number of buttons = ' + 28      $('a:jqmData(role="button")').length); 29    }); 30   31  }); 32  </script> 33 </head> 34 <body> 35 36 <div data-role="page"> 37 38  <div data-role="header"> 39   <h1>jQuery Mobile Data Function</h1> 40  </div> 41 42  <div data-role="content">  43   <p id="mydata">This paragraph serves as the data container.</p> 44   <a href="#" id="setdata" data-role="button">Set Data</a> 45   <a href="#" id="getdata" data-role="button">Get Data</a> 46   <a href="#" id="removedata" data-role="button">Remove Data</a> 47   <a href="#" id="select" data-role="button">Select</a> 48  </div> 49 50 </body> 51 </html>

    第18、21和24行演示了如何使用jqmData()函数来保存数据、获取数据和移除数据。如果将这个示例与第1章的示例进行比较,你会发现更多的是相同而不是不同。

    与data()函数类似,jqmData函数也是从HTML中读取data-属性。这对于从DOM树中选取某个元素来说尤其有用。第28行显示了如何在CSS选择器中使用jqmData()函数。这比`$('a:data-role="button")多了些许代码。作为回报,这里的代码确保考虑了命名空间。

    你可以使用$.mobile.ns配置选项来更改命名空间。如果把命名空间设置为myns,需要设置按钮角色的属性名称为data-myns-role。

    相关资源:枫树浏览器下载 枫树浏览器 v2.0.9.20
    最新回复(0)