jquerymobile 实用技巧总结

1 、在列表项和按钮上禁用文本截断
        如果你的列表项或者按钮上是一个很长的文本,它将会被jQueryMobile自动截断,要禁用这个截断设置,需要在CSS选择器上添加属性"white-space:normal"。例如,在按钮禁止截断:
        .ui-btn-text{
            white-space:normal;
        }
        在列表项上禁止截断:
        .ui-li-desc{
            white-space:norma;
        }
        应用自动截断,在元素上面设置"white-space:normal:nowrap"。       
2 、在页面加载时随机显示背景
        jQuery Mobile拥有一系列在页面加载时触发的初始化事件,下面是每次页面加载完成后随机显示一个背景。
        CSS如下:
        .my-page    { transparent url(../images/bg.jpg)0 0 no-repeat; }
        .my-page.bg1 { transparenturl(.. /images/bg-1.jpg) 0 0 no-repeat; }
        .my-page.bg2 { transparenturl(.. /images/bg-2.jpg) 0 0 no-repeat; }
        .my-page.bg3 { transparent url(../images/bg-3.jpg)0 0 no-repeat; }
        JavaScript如下:
        $('.my-page').live("pagecreate", function(){
            var randombg =Math.floor(Math.random()*4); // 0 to 3
            $('.my-page').removeClass().addClass('bg' + randombg);
        });
        3 、禁用按钮
        $('#home-button').button("disable");
        设置按钮可用
        $('#home-button').button("enable");
        4 、禁止加载时弹出信息
        每次加载一个不同的页面时都会触发弹出消息,确实很烦人,要禁用这种情况的发生,添加如下代码
$.mobile.pageLoading(true);
默认情况下是可见的
$.mobile.pageLoading();
        5 、自定义主题
        jQuery Mobile框架有5款主题,主题A,主题B,主题C,主题D和主题E。但你也可以轻松为你的web app
        创建一个主题。步骤如下:
        (1)从jQueryMobile CSS文件中复制任何一个主题粘贴到你自己的CSS文件中。
        (2)给你的主题和CSS选择器合理命名。例如,你复制了主题C,而你想命名你的主题为主题Z,重命名.ui-btn-up-c为.ui-btn-up-z等等。
        (3)、修改自定义主题的颜色和样式
        (4)、应用你的自定义主题到任一元素上,仅需设置data-theme属性为z,例如:

        6 、应用自定义字体
        你当用jQuery Mobile构建一个web app时,想用一些特殊字体,你会发现用@font-face自定义字体是一个令人相当满意的方法。
        7 、创建一个没有文本只有图片的按钮
        有时,你可能想用一个没有文本内容仍具有按钮特性的一个按钮。要在按钮上隐藏文本,设置data-iconpos="notext",例如:
Home
        8 、打开一个无需使用 Ajax 页面过渡的超链接
        Home
        9 、移除项目列表中的箭头
        默认情况下,jQueryMobile框架会为每一个列表项添加一个箭头,想要禁用箭头显示,需要在你想要移除列表项设置data-icon="false"。
        ContactUs
        10 、设置页面的背景颜色
怎样在不修改jQuery Mobile样式下设置一个页面背景颜色的?听起来很简单,其实需要花几分钟时间才能解决。通常情况下,你需要在body元素中设置背景颜色,但是用jQuery Mobil框架,你需要设置在ui-page类中。
        .ui-page{
            background:#eee;
        }
1 1 �热萑萜鞯淖钚「叨�槠聊坏淖钚「叨�
.ui-content{ min-height:inherit;}
12 data-position="fixed" �㈨�脚定位到屏幕最底部--*/
13 **- 默�J情�r下,�υ�框的最大��度��500 像素,在某些小的�O�渖巷@示�r,�����M整��屏幕。在台式和大屏幕�@示500px. 可以在主�}中使用如下-*/
ui-dialog .ui-header, .ui-dialog.ui-content, .ui-dialog .ui-footer{max-width:100%;}
14取消chrome浏览器下input和textarea的默认样式  
Chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,有时候拖动textarea还会使页面布局错乱,所以有时有必要控制好这些样式。
取消chrome下input和textarea的聚焦边框:
input,button,select,textarea{outline:none}
取消chrome下textarea可拖动放大:
textarea{resize:none}
最后,写在一起,重置input和textarea的默认样式:
input,button,select,textarea{outline:none}
textarea{resize:none}
Safari下也是有这些默认样式的,加这个也能同样取消。
15 jquerymobile动态添加元素之后有些不能被正确渲染的解决方法:
listview:                    添加jq(".detail").listview("refresh");
div或其他:            添加.trigger("create" );

你可能感兴趣的:(jquerymobile技巧)