jQueryMobileAPI培训资料课件.ppt

触发事件 在构建动态页面时，触发jQuery Mobile页面事件会比较有用。例如需要为页面添加多个新的组件，可以调用create事件，以同时增强所有的新的微件 1.trigger(“create”):可以触发该事件，以自动增强页面上的所有新元素，该事件在页面控制器上被触发。 例： $(‘button id=“b2”Button2/button’).insertAfter(“#b1”); $(‘button id=“b3”Button3/button’).insertAfter(“#b2”); $.mobile.pageContainer.trigger(“create”); 第三十页，共四十四页。 触摸事件 1.tap(轻击)：用户完成一次快速完整的轻击页面屏幕时触发。 2.taphold(轻击不放)：用户完成一次轻击页面屏幕且保持不放（大约1秒）时触发。 3.swipe(划动)：用户在1秒内水平拖拽屏幕距离大于30px或垂直拖拽屏幕距离小于20px时触发。注意以下属性： scrollSupressionThreshold:该属性默认值为10px，水平拖拽大于该值则停止 durationThreshold:该属性默认值为1000ms，划动时超过该值则停止 horizontalDistanceThreshold:该属性默认值为30px，水平拖拽超出该值时才能滑动。 verticalDistanceThreshold:该属性默认值为75px，垂直拖拽小于该值时才能滑动 4.swipeleft(向左边划动)：用户向左边划动屏幕时触发 5.swiperight(向右边划动)：用户向右边划动屏幕时触发 第三十一页，共四十四页。 jQuery Mobile API （第十二讲 ) 第一页，共四十四页。 知识回顾 内置常用主题？ 自定义主题？ ThemeRoller？ 第二页，共四十四页。 教学内容 配置jQuery Mobile 方法 事件 属性 数据属性 第三页，共四十四页。 重点、难点 重点 方法 事件 属性 数据属性 难点 事件 属性 数据属性 第四页，共四十四页。 配置jQuery Mobile 在jQuery Mobile初始化时，会在document对象上触发一个mobileinit事件。可以绑定到mobileinit事件，然后应用对jQuery Mobile的($.mobile)默认配置设置的覆盖 1.可以通过jQuery的extend方法覆盖属性 $(document).bind(mobileinit, function() { //$.mobile.loadingMessage = 努力加载中...; //$.mobile.pageLoadErrorMessage = 找不到对应页面！; $.extend($.mobile, { loadingMessage: 努力加载中..., pageLoadErrorMessage: 找不到对应页面！ }); }); 第五页，共四十四页。 自定义脚本 自定义脚本位置 由于在执行jQuery Mobile时，会立即触发mobileinit，因此需要将自定义脚本放在jQuery Mobile JavaScript文件之前。 script src=Js/jquery-1.6.4.js type=text/javascript/script script src=“custerm.js type=text/javascript/script script src=Js/jquery.mobile-1.0.1.js type=text/javascript/script 第六页，共四十四页。 可配置的jQuery Mobile选项 选项名 描述 值类型 默认值 autoInitializePage 如果该选项的值为true，那么当页面加载完成后，jQuery Mobile框将自动调用$.mobile.initializePage()方法，初始化页面的数据；否则，不初始化数据，设置为false，禁用所有页面组件的自动初始化 boolean true subPageUrlKey 该选项可以自定义子页引用时URL格式，对比如下:修改前为：index.htmlui=value 修改后为：index.htmlmy=value 用来引用由微件生成的值页面的URL参数。子页面URL的一个例子是”nested-list.htmlui=Movies-3”.嵌套的列表视图是一个特殊的微件，将每个列表分割为独立的子页面。例如，刚才显示的URL具有一个”Movise”子列表。而且jQuery Mobi