文档章节

jQuery_mobile 按钮学习

宇宙执政
 宇宙执政
发布于 2014/05/22 17:42
字数 1093
阅读 171
收藏 5

jQueryMobile1.4之前button的写法:

a标签用的是data-role的属性,并且他们默认是圆角的;(这样写就可以正常显示一个圆角的button了)

<a href="#" data-role="button">Anchor</a>
<button>Button</button>


1.4之前的时候,添加一些属性都会用到data-...   data-...  比如:data-inline=“true”,data-icon="back"等等,到1.4的时候全用一个class属性搞定,用 什么就往class里面添加,例如:class=“ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-left”,之前button的写法在1.4中也支持

1.4中button的写法,代码:(默认不是圆角的)

<a href="#" class="ui-btn">Anchor</a>
<button class="ui-btn">Button</button>


圆角的按钮:

<a href="#" class="ui-btn ui-corner-all">Anchor</a>
<button class="ui-btn ui-corner-all">Button</button>

1.4按钮总结代码:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>jquery-mobile-study</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="Css/CssMobile/jquery.mobile-1.4.2.css" rel="stylesheet">
        <link href="Css/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" type="text/css" />
        <script src="Js/JsMobile/jquery-1.11.0.js">
        </script>
        <script src="Js/JsMobile/jquery.mobile-1.4.2.js">
        </script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>页面学习</h1>
            </div>
             <div role="main" class="ui-content" style="background: red;">
                <p>Basic markup</p>
				<!--Basic markup-->
				<a href="#" class="ui-btn">Anchor</a>
				<button class="ui-btn">Button</button>
				<p>Corners</p>
				<!--Corners-->
				<a href="#" class="ui-btn ui-corner-all">Anchor</a>
				<button class="ui-btn ui-corner-all">Button</button>
				
				
				<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all" >No text</a>
				<div id="custom-border-radius">
    				<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a>
				</div>
				
				<p>shadow</p>
				<!--shadow-->
				<a href="#" class="ui-btn ui-shadow">Anchor</a>
				<button class="ui-btn ui-shadow">Button</button>
				
				<p>inline</p>
				<!--inline-->
				<a href="#" class="ui-btn ui-btn-inline ui-corner-all">Anchor</a>
				<button class="ui-btn ui-btn-inline ">Button</button>
				
				<p>Theme</p>
				<!--Theme-->
				<a href="#" class="ui-btn">Anchor - Inherit</a>
				<a href="#" class="ui-btn ui-btn-a">Anchor - Theme swatch A</a>
				<a href="#" class="ui-btn ui-btn-b">Anchor - Theme swatch B</a>
				<button class="ui-btn">Button - Inherit</button>
				<button class="ui-btn ui-btn-a">Button - Theme swatch A</button>
				<button class="ui-btn ui-btn-b">Button - Theme swatch B</button>
				
				<p>Mini</p>
				<!--Mini-->
				<a href="#" class="ui-btn ui-mini">Anchor</a>
				<button class="ui-btn ui-mini">Button</button>
				
				<p>Icons</p>
				<!--Icons-->
				<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Anchor</a>
				<button class="ui-btn ui-icon-delete ui-btn-icon-left">Button</button>
				
				
				<p>Icon position</p>
				<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Left</a>
				<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">Right</a>
				<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-top">Top</a>
				<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-bottom">Bottom</a>
				<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext">Icon only</a>
				
				<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-left">Left</a>
				<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-right">Right</a>
				<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-top">Top</a>
				<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-bottom">Bottom</a>
				<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-notext">Icon only</a>
				
				<p>Icon shadow</p>
				<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left ui-shadow-icon">Anchor</a>
				<p>Theme B:</p>
				<button class="ui-btn ui-icon-delete ui-btn-icon-left ui-shadow-icon ui-btn-b">Button</button>
				
				<p>Disabled</p>
				<a href="#" class="ui-btn ui-state-disabled">Disabled anchor via class</a>
				<button disabled="">Button with disabled attribute</button>
				
				<p>Native button</p>
				<button data-role="none">Button</button>
            </div>
            <div data-role="footer">
                <h3>页脚</h3>
            </div>
        </div>
    </body>
</html>

input标签定义的按钮总结代码:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>jquery-mobile-study</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="Css/CssMobile/jquery.mobile-1.4.2.css" rel="stylesheet">
        <link href="Css/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" type="text/css" />
        <script src="Js/JsMobile/jquery-1.11.0.js">
        </script>
        <script src="Js/JsMobile/jquery.mobile-1.4.2.js">
        </script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>jQuery-mobile  button学习</h1>
            </div>
            <div role="main" class="ui-content">
            	<p>Input buttons</p>
				<form>
				    <input type="button" value="Button">
				    <input type="submit" value="Submit">
				    <input type="reset" value="Reset">
				</form>
				
				<p>强大的扩展</p>
				<form>
				    <div class="ui-input-btn ui-btn ui-corner-all ui-btn-inline  ui-shadow">
				        <input type="button" data-enhanced="true" value="Input value"> Input value
				    </div>
				</form>
				
				<p>Corners</p>
				<form>
				    <input type="button" value="Has corners by default">
				    <input type="button" data-corners="false" value="Unset corners">
   					 <div class="ui-input-btn ui-btn ui-corner-all">
       					 Enhanced
       					 <input type="button" data-enhanced="true" value="Enhanced">
   					 </div>
				</form>
				
				<p>delete icon button</p>
				<form>
				    <input type="button" data-icon="delete" data-iconpos="notext" value="Icon only">
				    <div id="custom-border-radius">
				        <div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">
				            Enhanced - Icon only
				            <input type="button" data-enhanced="true" value="Enhanced - Icon only">
				        </div>
				    </div>
				</form>
            </div>
			
				<p>	Shadow</p>
				<form>
				    <input type="button" value="Has shadow by default">
				    <input type="button" data-shadow="false" value="Unset shadow">
				    <div class="ui-input-btn ui-btn ui-shadow">
				        Enhanced
				        <input type="button" data-enhanced="true" value="Enhanced">
				    </div>
				</form>
				
				<p>Inline</p>
				<form>
				    <input type="button" data-inline="true" value="Input">
				    <div class="ui-input-btn ui-btn ui-btn-inline">
				        Enhanced
				        <input type="button" data-enhanced="true" value="Enhanced">
				    </div>
				</form>
				
				
				<p>Theme</p>
				<form>
				    <input type="button" value="Input - Inherit">
				    <input type="button" data-theme="a" value="Input - Theme swatch A">
				    <input type="button" data-theme="b" value="Input - Theme swatch B">
				    <div class="ui-input-btn ui-btn">
				        Enhanced - Inherit
				        <input type="button" data-enhanced="true" value="Enhanced - Inherit">
				    </div>
				    <div class="ui-input-btn ui-btn ui-btn-a">
				        Enhanced - Theme swatch A
				        <input type="button" data-enhanced="true" value="Enhanced - Theme swatch A">
				    </div>
				    <div class="ui-input-btn ui-btn ui-btn-b">
				        Enhanced - Theme swatch B
				        <input type="button" data-enhanced="true" value="Enhanced - Theme swatch B">
				    </div>
				</form>
				
				<p>Mini</p>
				<form>
				    <input type="button" data-mini="true" value="Input">
				    <div class="ui-input-btn ui-btn ui-mini">
				        Enhanced
				        <input type="button" data-enhanced="true" value="Enhanced">
				    </div>
				</form>
				
				<p>Icon shadow</p>
				<input type="button" data-theme="b" data-icon="delete" data-iconshadow="true" value="Input">
				<div class="ui-input-btn ui-btn ui-btn-b ui-icon-delete ui-btn-icon-left ui-shadow-icon">
				    Enhanced
				    <input type="button" data-enhanced="true" value="Enhanced">
				</div>
				
				<p>Disabled</p>
				<form>
				    <input type="button" disabled="" value="Input button with disabled attribute">
				    <div class="ui-input-btn ui-btn ui-state-disabled">
				        Enhanced
				        <input type="button" disabled="" data-enhanced="true" value="Enhanced">
				    </div>
				</form>
				
				<p>Native inputs</p>
				<form>
				    <input type="button" data-role="none" value="Button">
				    <input type="submit" data-role="none" value="Submit">
				    <input type="reset" data-role="none" value="Reset">
				</form>
            <div data-role="footer">
                <h3>页脚</h3>
            </div>
        </div>
    </body>
</html>


© 著作权归作者所有

宇宙执政
粉丝 34
博文 116
码字总数 65640
作品 0
高级程序员
私信 提问
8 个优秀的 jQuery Mobile 教程

jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。虽然jQuery Mobile相对较新,但开发...

小编辑
2011/07/05
2.8K
6
jQueryMobile快速入门

what   jQuery Mobile是jQuery 在手机上和平板设备上的版本。它不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。![mobile-wh...

笔阁
2015/11/16
1K
2
jQuery Mobile 自定义按钮图标

jQuery Mobile 自带很多按钮小图标,如下图所示: 有时候这些图标无法满足你的要求的时候,jQuery Mobile 允许你进行自定义图标。 一般我们在 jQuery Mobile 中定义个按钮的方法如下: data...

小编辑
2011/10/11
32.3K
14
第一天 认识jQuery mobile 框架,资源,书籍

前言 这里就不对jquery mobile做过多的历史介绍,直接进行jQuery mobile的学习 jQuery mobile 框架纵览 1.jQuery mobile 的显示结构 如图1.1 从上面的图示我们可以知道,一个完整的页面是由 he...

打杂程序猿
2011/12/22
608
2
创建定制的jQuery Mobile主题

jQuery Mobile 框架是一套JavaScript库,用来帮助你快速创建适合移动设备访问的网站。它可以把目前的页面转换成适合触摸操作的页面。jQuery Mobile可以让用户通过浏览器直接访问到触摸友好的...

虫虫
2011/12/07
9.1K
1

没有更多内容

加载失败,请刷新页面

加载更多

RxJava进行单元测试的方式

@Test public void completeTask_retrievedTaskIsComplete() { // Given a new task in the persistent repository final Task newTask = new Task(TITLE, ""); ......

SuShine
34分钟前
5
0
正则表达式大全

检验手机号码 # 要求:手机号码必须为11位数字,以1开头,第二位为1或5或8。import redef verify_mobile(): mob = input("请输入手机号码:") ret = re.match(r"1[358]\d{9}", m......

彩色泡泡糖
37分钟前
5
0
QT之border-image属性

一、border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限,仅Firefox3.5,chrome浏览器,Safari3+支持...

shzwork
38分钟前
6
0
Kubernetes Operator简易教程

1. 安装operator-sdk //安装 operator-sdk$ apt-get install operator-sdk.....$ operator-sdk versionoperator-sdk version: v0.7.0$ go versiongo version go1.11.4 darwin/amd64 2......

Robotcl_Blog
38分钟前
5
0
再谈DAG任务分解和Shuffle RDD

1、DagScheduler分析 DagScheduler功能主要是负责RDD的各个stage的分解和任务提交。Stage分解是从触发任务调度过程的finalStage开始倒推寻找父stage,如果父stage没有提交任务则循环提交缺失...

守望者之父
44分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部