小技巧之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("因为我是红领巾")

});

 

今天的分享就到这，很期待下次与大伙的分享，不要问我是谁，请叫我红领巾。