10个你必须知道的jQueryMobile代码片段

本文介绍jQueryMobile中实用的技巧,包括禁用文本截断、随机背景显示、按钮禁用及自定义主题等,帮助开发者更好地掌握该框架。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css?3.1.64"> <link rel="stylesheet" href="css/style.css?3.1.64"> </head> <body>[removed][removed] <div id="toolbar"><span id="theme">关灯</span><span class="toggleCreateLevel"> 难度</span> </div> <div class="level1" data-code="1231243" data-set="e1.b.c2.c3.c1.s2.c4.e2" data-text="Rotation Game <br><span>Click a block to complete the pipe.</span>"></div> <div class="level2" data-code="2323114311231414" data-set="c1.c2.c4.c1.s2.c3.c1.e1.s1.e2.c1.c3.c4.c1.c2.c3"></div> <div class="level3" data-code="42232324114122322243" data-set="e2.s1.s2.c2.c2.c1.c1.c1.s2.c2.c2.b.c2.s2.s2.c1.c1.s1.s1.c1.e2.b.b.b"></div> <div class="level4" data-code="2222423124111111414" data-set="b.c1.s1.e1.c1.c1.c1.c2.s2.c2.c2.s2.s2.s1.e2.s1.c2.c1.c2.c2"></div> <div class="level5" data-code="222314311113443" data-set="c2.s1.s2.c1.s2.e1.c1.s1.s1.b.s2.s2.e1.e1.c1.e1" data-text="Multiple pipes."></div> <div class="level6" data-code="112413123111111414" data-set="b.e1.e2.b.c2.c1.c1.c1.s1.c1.c1.s2.s1.s2.s2.s1.c2.c1.c1.c2"></div> <div class="level7" data-code="2323141423231414" data-set="c4.c1.c3.c1.c2.c3.c4.c1.c2.c1.c3.c2.c1.c1.c2.c1" data-text="Circles."></div> <div class="level8" data-code="222312242211314311143" data-set="c4.s1.s1.c1.c2.s2.s2.c1.b.c2.e3.e4.b.c2.c1.s2.e3.c2.s2.s1.b.c1.c2.e1"></div> <div class="level9" data-code="222244312241123132414" data-set="b.c1.s1.e2.c2.c2.e1.c2.s1.c2.s2.c1.s1.c1.s1.c2.c1.c2.c2.c2.b.c2.c1.b"></div> <div class="level10" data-code="122311241413422423311231223" data-set="e1.c2.s1.c4.s1.s2.c1.c3.c1.c3.c2.c4.e2.e4.c3.c2.c4.c2.e4.b.s1.c3.s2.c4.c1.s1.e2.e3"></div> <div class="level11" data-code="432224131431121122331222" data-set="e1.c2.c1.e1.c1.c1.c1.c1.s1.e1.c2.s1.c1.e2.s2.s2.c1.e1.e1.e1.c2.s1.s2.e1"></div> <div class="level12" data-code="42232224122311113441222" data-set="e2.s1.s2.c1.c2.s2.s1.c2.s2.c1.s2.c2.s1.s2.b.s2.s2.e2.e2.c1.c1.s2.s2.e1"></div> <div class="level13" data-code="2221223144422231241424" data-set="c1.s1.e1.b.s2.c1.s2.c1.c1.c1.e2.c2.c1.e2.c1.c2.c2.s2.c2.s2.b.e1.s2.c1"></div> <div class="level14" data-code="1231141442314314442333" data-set="e1.c2.c1.e2.c1.c2.c2.c2.e1.s2.c2.e1.e1.c1.c2.c1.e1.c2.c2.c2.b.b.e1.e2"></div> <div class="level15" data-code="1223113112434323111111411224" data-set="e1.c2.s1.c2.s2.c1.c1.s2.c2.s2.c1.e1.e1.c1.c2.c1.e1.s1.s2.s2.s1.c1.c1.s2.c1.s2.s2.c1"></div> <div class="level16" data-code="422122243123241112414224" data-set="e2.s1.e2.e1.c1.s1.s1.c2.e2.e2.c2.c1.c1.c2.s1.s2.c1.s1.c1.s2.e1.s1.s2.c1"></div> <div id="win">   <div class="text">Level <span>1</span> Complete</div> </div> jQuery益智类管道拼接网页小游戏代码,过关的管道拼接小游戏,通过旋转管件来拼接游戏(不兼容IE6,7,8)。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值