码迷,mamicode.com
首页 > Web开发 > 详细

小技巧之jQueryMobile

时间:2014-06-20 20:33:25      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   java   ext   

使用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("因为我是红领巾")
});

 

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

 

 

 

 

 

小技巧之jQueryMobile,布布扣,bubuko.com

小技巧之jQueryMobile

标签:style   class   blog   code   java   ext   

原文地址:http://www.cnblogs.com/BlogtoSpring/p/3796093.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!