zoukankan      html  css  js  c++  java
  • jquery mobile 方法收集.

    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;
         }

  • 相关阅读:
    取消a标签的页面跳转
    js 获取元素内部文本
    彻底取消Myeclipse对js文件的校验
    控制流程之if判断
    格式化的三种输出方式和基本运算符以及他们的优先级
    解压缩和python如何与用户交互
    数据类型基础和各种数据类型
    花式赋值和注释
    变量 及其命名和使用规范
    进入的python世界。了解执行python的交互方式和常用开发工具
  • 原文地址:https://www.cnblogs.com/fumj/p/3471873.html
Copyright © 2011-2022 走看看