jQuery_mobile 按钮学习

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_33813128

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量74

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/936286/blog/267811

本文详细介绍了jQuery Mobile 1.4版本中按钮的使用方法，包括基本标记、圆角设置、阴影效果、内联样式、主题设定、迷你按钮、图标应用等特性，并提供了丰富的示例代码。

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

2019独角兽企业重金招聘Python工程师标准>>>

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>

转载于:https://my.oschina.net/u/936286/blog/267811