zoukankan      html  css  js  c++  java
  • 10个你必须知道的jQueryMobile代码片段

     1、在列表项和按钮上禁用文本截断
         如果你的列表项或者按钮上是一个很长的文本,它将会被jQuery Mobile自动截断,要禁用这个截断设置,需要在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  { background: transparent url(../images/bg.jpg) 0 0 no-repeat; }
         .my-page.bg1 { background: transparent url(../images/bg-1.jpg) 0 0 no-repeat; }
         .my-page.bg2 { background: transparent url(../images/bg-2.jpg) 0 0 no-repeat; }
         .my-page.bg3 { background: 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)从jQuery Mobile CSS文件中复制任何一个主题粘贴到你自己的CSS文件中。
         (2)给你的主题和CSS选择器合理命名。例如,你复制了主题C,而你想命名你的主题为主题Z,重命名.ui-btn-up-c为.ui-btn-up-z等等。
         (3)、修改自定义主题的颜色和样式
         (4)、应用你的自定义主题到任一元素上,仅需设置data-theme属性为z,例如:
    <div data-role="page" data-theme="z">
         6、应用自定义字体
         你当用jQuery Mobile构建一个web app时,想用一些特殊字体,你会发现用@font-face自定义字体是一个令人相当满意的方法。
         7、创建一个没有文本只有图片的按钮
         有时,你可能想用一个没有文本内容仍具有按钮特性的一个按钮。要在按钮上隐藏文本,设置data-iconpos="notext",例如:
    <a href="../index.html" data-icon="grid" claa="ui-btn-right" data-iconpos="notext">Home</a>
         8、打开一个无需使用Ajax页面过渡的超链接
         <a href="../index.html" data-icon="grid" class="ui-btn-right" rel="external">Home</a>
         9、移除项目列表中的箭头
         默认情况下,jQuery Mobile框架会为每一个列表项添加一个箭头,想要禁用箭头显示,需要在你想要移除列表项设置data-icon="false"。
         <li data-icon="false"><a href="contact.html">Contact Us</a></li>
         10、设置页面的背景颜色
    怎样在不修改jQuery Mobile样式下设置一个页面背景颜色的?听起来很简单,其实需要花几分钟时间才能解决。通常情况下,你需要在body元素中设置背景颜色,但是用jQuery Mobil框架,你需要设置在ui-page类中。
         .ui-page{
              background:#eee;
         }

    from : http://blog.csdn.net/lgd5979/article/details/7018256

  • 相关阅读:
    每日总结2021.9.14
    jar包下载mvn
    每日总结EL表达语言 JSTL标签
    每日学习总结之数据中台概述
    Server Tomcat v9.0 Server at localhost failed to start
    Server Tomcat v9.0 Server at localhost failed to start(2)
    链表 java
    MVC 中用JS跳转窗体Window.Location.href
    Oracle 关键字
    MVC 配置路由 反复走控制其中的action (int?)
  • 原文地址:https://www.cnblogs.com/NetPig/p/3934504.html
Copyright © 2011-2022 走看看