首页 > 代码库 > 小技巧之jQueryMobile
小技巧之jQueryMobile
使用JqueryMobile+MVC做一个手机网站，也有2个月了。有一些小小的经验，跟大伙们分享一下下
小技巧1：
禁用所有Ajax加载，它会很烦人的。
$.mobile.ajaxLinksEnabled = false;小技巧2：
使用jqm与jq，有时候会用到比Dom就绪还要早的事件
$(document).on("pagebeforecreate", function (event) { alert("骚年来一发？") });小技巧3：
跳转页面时，注意：如果使用 location.href 进行跳转，那么，页面上面如果出现 <a href="">这样的链接 你点了之后会出现页面js加载不出来的情况，所以 要么使用 location.href，要么就用< a href>，当然 后台的代码可以忽略不受影响
小技巧4：
无视链接，直接返回，无刷新
<a href=‘‘ data-rel=‘back‘ data-role=‘button‘ data-icon=‘back‘>返回</a>
小技巧5：
很绚丽的跳转 data-transition 属性 详细参见w3c的API文档
小技巧6：
select下拉列表框，在使用了 data-native-menu="false" 这个属性之后，会生成一个单独的页面。所以，要使用到页面过渡的事件
$(document).on("pagebeforehide", "#status-dialog", function () { alert("骚年，你想干什么")})小技巧7：
调整样式 需要大量使用到 padding margin UI是整个项目的脸面，即使项目很垃圾，UI做得好，老板、客户满意了，它就好。
小技巧8：
使用绚丽的弹窗
$.mobile.loading(‘show‘, { text: ‘加载中...‘, textVisible: true, theme: ‘a‘, textonly: false, html: ""});//一个简单的弹窗setTimeout("$.mobile.loading(‘hide‘)", 1000);//使用它 将弹窗在1000毫秒之后隐藏掉，注意，第一个参数是双引号
小技巧9：
显示隐藏页面上的元素 最好别根据编辑器里面的代码去显示隐藏，你可以使用谷歌的审查元素，看看jqm到底对你的页面做了什么
小技巧10：
listview 将它的图标按钮侧地搞掉，愉快地做成一个显示的小面板
<ul data-role="listview" data-inset="false" style="height: 100%; overflow: hidden;" id="list">//overflow: hidden;这个少了会出现一个滚动条 很难看，当时可是摸索了很久才解决的 <li style="height: 70px;"> <a> <h2 style="margin-top: -5px; font-size: 16px;"> </h2> <p style=""> </p> </a> </li></ul>
然后加上两句jq代码，不要问我为什么，已经说过了 jqm会对你的页面做些什么...
$("#list li div div a").css("padding-right", "0px");$("#list li div .ui-btn-text").next().remove();
小技巧11：
data-iconpos="right/left/down/top" 控制图标显示的位置 data-icon="back/gear/grid/home...."设置小图标 适合按钮用
小技巧12：
左右滑动效果
$(‘某一个需要滑动的元素，如div page‘).bind(‘swiperight‘, function () {//右滑动 alert("不要问我为什么")}).bind(‘swipeleft‘, function () {//左滑动 alert("因为我是红领巾")});
今天的分享就到这，很期待下次与大伙的分享，不要问我是谁，请叫我红领巾。