小技巧之jQueryMobile

时间:2023-03-09 08:20:53
小技巧之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("因为我是红领巾")
});

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