jQuery Mobile 的按钮大全.docVIP

jQuery Mobile 的按钮大全 0人收藏此文章, 我要收藏发表于22天前(2012-08-08 10:22) , 已有12次阅读 共0个评论 在这篇文章中我们将详细介绍 jQuery Mobile 的按钮。在 jQuery Mobile 中所有按钮的样式一般都是文本居中，圆角，有阴影的效果，还包括一个可选的图标。 让我们来看看这些按钮是如何工作的。 Step 1: 首先创建一个 .html 页面来演示 jQuery Mobile 的按钮图标 Step 2: .html 的页面内容如下，这里我们使用了 Microsoft CDN 01 !DOCTYPE html 02 03 htmlxmlns=/1999/xhtml 04 head 05 metacharset=utf-8/ 06 metaname=viewportcontent=width=device-width, initial-scale=1/ 07 title/title 08 scriptsrc=/ajax/jQuery/jquery-1.7.2.min.jstype=text/javascript/script 09 scriptsrc=/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.jstype=text/javascript/script 10 linkhref=/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.cssrel=stylesheettype=text/css/ 11 linkhref=/ajax/jquery.mobile/1.1.0/jquery.mobile.structure-1.1.0.min.cssrel=stylesheettype=text/css/ 12 /head 13 body 14 /body 15 /html Step 3: 然后将下列代码放在 .html 页面的 body 块中 01 liButton Icons/li 02 03 ahref=javascript:void(0)data-role=buttondata-icon=deleteDelete/a 04 ahref=javascript:void(0)data-role=buttondata-icon=plusPlus/a 05 ahref=javascript:void(0)data-role=buttondata-icon=minusMinus/a 06 ahref=javascript:void(0)data-role=buttondata-icon=checkCheck/a 07 ahref=javascript:void(0)data-role=buttondata-icon=gridGrid/a 08 ahref=javascript:void(0)data-role=buttondata-icon=forwardFoward/a 09 ahref=javascript:void(0)data-role=buttondata-icon=refreshRefresh/a ahref=javascript:void(0)data-role=buttondata-icon=gearGear/a 10 ahref=javascript:void(0)data-role=buttondata-icon=arrow-lLeft Arrow/a 11 ahref=javascript:void(0)data-role=buttondata-icon=arrow-rRight Arrow/a 12 ahref=javascript:void(0)data-role=buttondata-icon=arrow-uUp Arrow/a ahref=javascript:void(0)data-role=buttondata-icon=arrow-dDown Arrow/a 13 ahref=javascript:void(0)data-role=buttondata-icon=homeHome/a 14 ahref=javascript:void(0)data-role=buttondata-icon=alertAlert/a 15 ahref=javascript:void(0)data-role=buttondata-icon=starStar/a 16 ahref=javascript:void(0)data-role=buttondata-icon=infoInfo/a 17 ahref=javasc