小强的HTML5移动开发之路（44）——JqueryMobile中的按钮
Feb 15, 2017 pm 01:21 PM一、链接按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<p data-role="page" id="page1" data-fullscreen="true">
<p data-role="content">
<a href="#" data-role="button">链接按钮</a>
</p>
</p>
</body>
</html>Salin selepas log masuk
二、表单按钮
<p data-role="page" id="page1" data-fullscreen="true">
<p data-role="content">
<a href="#" data-role="button">链接按钮</a>
<form>
<input type="button" value="表单按钮"/>
<button type="submit">提交按钮</button>
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置按钮"/>
</form>
</p>
</p>Salin selepas log masuk
三、图形按钮
图像按钮1:
<input type="image" src="jquery-mobile/images/icon.png" data-role="none"/>
图像按钮2：
<a href="#"><img src="jquery-mobile/images/icon.png"></a>Salin selepas log masuk
四、带图标的按钮
<input type="button" value="带图标的按钮" data-icon="delete"/>
<input type="button" data-icon="delete" data-iconpos="notext"/>
<input type="button" data-icon="alert" data-iconpos="notext"/>
<input type="button" data-icon="arrow-d" data-iconpos="notext"/>
<input type="button" data-icon="arrow-l" data-iconpos="notext"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext"/>
<input type="button" data-icon="arrow-u" data-iconpos="notext"/>
<input type="button" data-icon="back" data-iconpos="notext"/>
<input type="button" data-icon="check" data-iconpos="notext"/>
<input type="button" data-icon="custom" data-iconpos="notext"/>
<input type="button" data-icon="forward" data-iconpos="notext"/>
<input type="button" data-icon="gear" data-iconpos="notext"/>
<input type="button" data-icon="grid" data-iconpos="notext"/>
<input type="button" data-icon="home" data-iconpos="notext"/>
<input type="button" data-icon="info" data-iconpos="notext"/>
<input type="button" data-icon="minus" data-iconpos="notext"/>
<input type="button" data-icon="plus" data-iconpos="notext"/>
<input type="button" data-icon="refresh" data-iconpos="notext"/>
<input type="button" data-icon="search" data-iconpos="notext"/>
<input type="button" data-icon="star" data-iconpos="notext"/>Salin selepas log masuk
五、按钮定位
<a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top">top</a>
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">left</a>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">bottom</a>Salin selepas log masuk
六、自定义图标按钮
<a href="#" data-role="button" data-icon="custom_icon">自定义图标</a>
Salin selepas log masuk
.ui-icon-custom_icon{
background:url(jquery-mobile/images/icon.png) 50% 50% no-repeat;
background-size:14px 14px;
}Salin selepas log masuk
注意：属性命名规则“.ui-icon-<data-icon-value>,如上面的.ui-icon-custom_icon
七、分组按钮
<p data-role="controlgroup" data-type="horizontal" align="center" class="segment-control">
<a href="#" data-role="button" class="ui-control-active">菜单一</a>
<a href="#" data-role="button" class="ui-control-inactive">菜单二</a>
<a href="#" data-role="button" class="ui-control-inactive">菜单三</a>
</p>Salin selepas log masuk
八、主题按钮
<a href="#" data-role="button" data-theme="a">A</a>
<a href="#" data-role="button" data-theme="b">B</a>
<a href="#" data-role="button" data-theme="c">C</a>
<a href="#" data-role="button" data-theme="d">D</a>
<a href="#" data-role="button" data-theme="e">E</a>
<a href="#" data-role="button" data-theme="f">F</a>Salin selepas log masuk
九、动态按钮
<script type="text/javascript"> $('<a href="#" data-role="button" data-icon="star" id="b1">动态按钮</a>').appendTo("#content").button(); $('<a href="#" data-role="button" data-icon="delete" id="b2">动态按钮</a>').insertAfter("#b1").button(); </script>
Salin selepas log masuk
还有一种json方式的
$('<a href="#">动态按钮</a>').insertAfter("#a1").button({
'icon':'home',
'inline':true,
'shadow':true,
'theme':'b'
});Salin selepas log masuk
上面两种方式都用到了button()插件，button插件具有如下选项：
corners boolean
icon string
iconpos string
iconshadow boolean
initSelector css selector string
inline boolean
shadow boolean
button插件有如下两个方法：
$("#button1").button("enable");
$("#button2").button("disable");
全部代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<style type="text/css">
.ui-icon-custom_icon{
background:url(jquery-mobile/images/icon.png) 50% 50% no-repeat;
background-size:14px 14px;
}
</style>
</head>
<body>
<p data-role="page" id="page1" data-fullscreen="true">
<p data-role="content" class="content" id="content">
<a href="#" data-role="button">链接按钮</a>
<form>
<input type="button" value="表单按钮"/>
<button type="submit">提交按钮</button>
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置按钮"/>
图像按钮1:
<input type="image" src="jquery-mobile/images/icon.png" data-role="none"/>
图像按钮2：
<a href="#"><img src="jquery-mobile/images/icon.png"></a>
<input type="button" value="带图标的按钮" data-icon="delete"/>
<input type="button" data-icon="delete" data-iconpos="notext"/>
<input type="button" data-icon="alert" data-iconpos="notext"/>
<input type="button" data-icon="arrow-d" data-iconpos="notext"/>
<input type="button" data-icon="arrow-l" data-iconpos="notext"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext"/>
<input type="button" data-icon="arrow-u" data-iconpos="notext"/>
<input type="button" data-icon="back" data-iconpos="notext"/>
<input type="button" data-icon="check" data-iconpos="notext"/>
<input type="button" data-icon="custom" data-iconpos="notext"/>
<input type="button" data-icon="forward" data-iconpos="notext"/>
<input type="button" data-icon="gear" data-iconpos="notext"/>
<input type="button" data-icon="grid" data-iconpos="notext"/>
<input type="button" data-icon="home" data-iconpos="notext"/>
<input type="button" data-icon="info" data-iconpos="notext"/>
<input type="button" data-icon="minus" data-iconpos="notext"/>
<input type="button" data-icon="plus" data-iconpos="notext"/>
<input type="button" data-icon="refresh" data-iconpos="notext"/>
<input type="button" data-icon="search" data-iconpos="notext"/>
<input type="button" data-icon="star" data-iconpos="notext"/>
<a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top">top</a>
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">left</a>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">bottom</a>
<a href="#" data-role="button" data-icon="custom_icon">自定义图标</a>
<a href="#" data-role="button" data-theme="a">A</a>
<a href="#" data-role="button" data-theme="b">B</a>
<a href="#" data-role="button" data-theme="c">C</a>
<a href="#" data-role="button" data-theme="d">D</a>
<a href="#" data-role="button" data-theme="e" id="a1">E</a>
<a href="#" data-role="button" data-theme="f" id="b1">F</a>
</form>
</p>
</p>
</body>
<script type="text/javascript">
$('<a href="#" data-role="button" data-icon="star" id="b1">动态按钮</a>').appendTo("#content").button();
$('<a href="#" data-role="button" data-icon="delete" id="b2">动态按钮</a>').insertAfter("#b1").button();
$('<a href="#">动态按钮</a>').insertAfter("#a1").button({
'icon':'home',
'inline':true,
'shadow':true,
'theme':'b'
});
</script>
</html>Salin selepas log masuk
以上就是小强的HTML5移动开发之路（44）——JqueryMobile中的按钮的内容，更多相关内容请关注PHP中文网（www.php.cn）！
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel Panas
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu
By DDD
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?
3 minggu yang lalu
By 王林
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Alat panas Tag
Artikel Panas
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu
By DDD
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?
3 minggu yang lalu
By 王林
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Tag artikel panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
