<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Button markup - jQuery Mobile Demos</title>
<meta name="author" content="darklordli 李宝君 coolli2@163.com">
<meta name="description" content="jQuery mobile的民间中文站点，集合众位开发译者力量，提供官方最新API与DEMOS的中文版本,并聚合众多jquerymobile开发资源。为国内移动开发者提供助力。">
<link rel="shortcut icon" href="http://demos.jquerymobile.com/1.4.2/favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.0.min.css">
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
<script src="http://demos.jquerymobile.com/1.4.2/js/jquery.js"></script>
<script src="http://demos.jquerymobile.com/1.4.2/_assets/js/index.js"></script>
<script src="http://demos.jquerymobile.com/1.4.2/js/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div role="main" class="ui-content jqm-content">
<h1>Button markup按钮标记</h1>
<p>新增一些类来对<code>a(链接)</code>和<code>button</code>元素进行样式化. <code>input</code>按钮可通过按钮控件来加强样式化. 可以看看<a href="../button/" data-ajax="false" class="ui-link">这个页面</a>的例子.</p>
<p>请注意，在1.4版本中<code>data-</code> 属性仍然可以使用. 不推荐使用的<code>buttonMarkup</code> 方法将会给带有<code>data-role="button"</code>属性的<code>a</code>元素和<code>button</code>元素添加合适的类. 此方法还将<code>role="button"</code>属性添加到anchor(锚)元素中去.</p>
<a href="#" data-ajax="false" class="jqm-deeplink jqm-open-quicklink-panel ui-icon-carat-l ui-alt-icon">Quick Links</a><h2 id="Basicmarkup">Basic markup基本标记</h2>
<div data-demo-html="true">
<a href="#" class="ui-btn">Anchor</a>
<button class="ui-btn">Button</button>
</div><div><a class="jqm-view-source-link ui-btn ui-corner-all ui-btn-inline ui-mini" href="#popupDemo" data-rel="popup" aria-haspopup="true" aria-owns="popupDemo" aria-expanded="false">View Source</a></div><!--/demo-html -->
<a href="#ui-page-top" class="jqm-deeplink ui-icon-carat-u ui-alt-icon">Top</a><h2 id="Corners">Corners边界</h2>
<div data-demo-html="true">
<a href="#" class="ui-btn ui-corner-all">Anchor</a>
<button class="ui-btn ui-corner-all">Button</button>
</div><div><a class="jqm-view-source-link ui-btn ui-corner-all ui-btn-inline ui-mini" href="#popupDemo" data-rel="popup" aria-haspopup="true" aria-owns="popupDemo" aria-expanded="false">View Source</a></div><!--/demo-html -->
<p>只有图标的按钮在默认情况下是圆形的. 在这里我们展示如何设置与其他按钮相同的边框半径.</p>
<div data-demo-html="true" data-demo-css="true">
<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>
</div><div><a class="jqm-view-source-link ui-btn ui-corner-all ui-btn-inline ui-mini" href="#popupDemo" data-rel="popup" aria-haspopup="true" aria-owns="popupDemo" aria-expanded="false">View Source</a></div><!--/demo-html -->
<a href="#ui-page-top" class="jqm-deeplink ui-icon-carat-u ui-alt-icon">Top</a><h2 id="Shadow">Shadow阴影</h2>
<div data-demo-html="true">
<a href="#" class="ui-btn ui-shadow">Anchor</a>
<button class="ui-btn ui-shadow">Button</button>
</div><div><a class="jqm-view-source-link ui-btn ui-corner-all ui-btn-inline ui-mini" href="#popupDemo" data-rel="popup" aria-haspopup="true" aria-owns="popupDemo" aria-expanded="false">View Source</a></div><!--/demo-html -->
<a href="#ui-page-top" class="jqm-deeplink ui-icon-carat-u ui-alt-icon">Top</a><h2 id="Inline">Inline内嵌</h2>
<div data-demo-html="true">
<a href="#" class="ui-btn ui-btn-inline">Anchor</a>
<button class="ui-btn ui-btn-inline">Button</button>
</div><div><a class="jqm-view-source-link ui-btn ui-corner-all ui-btn-inline ui-mini" href="#popupDemo" data-rel="popup" aria-haspopup="true" aria-owns="popupDemo" aria-expanded="false">View Source</a></div><!--/demo-html -->
<a href="#ui-page-top" class="jqm-deeplink ui-icon-carat-u ui-alt-icon">Top</a><h2 id="Theme">Theme主题</h2>
<div data-demo-html="true">
<a href="#" class="ui-btn">Anchor - Inherit</a>
<a href="#" class="ui-btn ui-btn-a">Anchor - Theme swatch A(主题样本A)</a>
<a href="#" class="ui-btn ui-btn-b">Anchor - Theme swatch B(主题样本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>
</div><div><a class="jqm-view-source-link ui-btn ui-corner-all ui-btn-inline ui-mini" href="#popupDemo" data-rel="popup" aria-haspopup="true" aria-owns="popupDemo" aria-expanded="false">View Source</a></div><!--/demo-html -->
<a href="#ui-page-top" class="jqm-deeplink ui-icon-carat-u ui-alt-icon">Top</a><h2 id="Mini">Mini微型</h2>
<div data-demo-html="true">
<a href="#" class="ui-btn ui-mini">Anchor</a>
<button class="ui-btn ui-mini">Button</button>
</div><div><a class="jqm-view-source-link ui-btn ui-corner-all ui-btn-inline ui-mini" href="#popupDemo" data-rel="popup" aria-haspopup="true" aria-owns="popupDemo" aria-expanded="false">View Source</a></div><!--/demo-html -->
<a href="#ui-page-top" class="jqm-deeplink ui-icon-carat-u ui-alt-icon">Top</a><h2 id="Icons">Icons图标</h2>
<div data-demo-html="true">
<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>
</div><div><a class="jqm-view-source-link ui-btn ui-corner-all ui-btn-inline ui-mini" href="#popupDemo" data-rel="popup" aria-haspopup="true" aria-owns="popupDemo" aria-expanded="false">View Source</a></div><!--/demo-html -->
<a href="#ui-page-top" class="jqm-deeplink ui-icon-carat-u ui-alt-icon">Top</a><h2 id="Iconposition">Icon position图标位置</h2>
<div data-demo-html="true">
<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>
</div><div><a class="jqm-view-source-link ui-btn ui-corner-all ui-btn-inline ui-mini" href="#popupDemo" data-rel="popup" aria-haspopup="true" aria-owns="popupDemo" aria-expanded="false">View Source</a></div><!--/demo-html -->
<p>Inline(内嵌):</p>
<div data-demo-html="true">
<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>
</div><div><a class="jqm-view-source-link ui-btn ui-corner-all ui-btn-inline ui-mini" href="#popupDemo" data-rel="popup" aria-haspopup="true" aria-owns="popupDemo" aria-expanded="false">View Source</a></div><!--/demo-html -->
<a href="#ui-page-top" class="jqm-deeplink ui-icon-carat-u ui-alt-icon">Top</a><h2 id="Iconshadow">Icon shadow图标阴影</h2>
<p>注意：这个样式化选项在jQuery Mobile 1.4.0中已经被废弃, 而且将在1.5.0中删除这个选项.因此, 我们jQuery Mobile渲染按钮的默认值改为false.</p>
<div data-demo-html="true">
<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-btn-b ui-icon-delete ui-btn-icon-left ui-shadow-icon">Button</button>
</div><div><a class="jqm-view-source-link ui-btn ui-corner-all ui-btn-inline ui-mini" href="#popupDemo" data-rel="popup" aria-haspopup="true" aria-owns="popupDemo" aria-expanded="false">View Source</a></div><!--/demo-html -->
<a href="#ui-page-top" class="jqm-deeplink ui-icon-carat-u ui-alt-icon">Top</a><h2 id="Disabled">Disabled不可用</h2>
<div data-demo-html="true">
<a href="#" class="ui-btn ui-state-disabled">Disabled anchor via class(通过class设置不可用的锚)</a>
<button disabled="" class=" ui-btn ui-shadow ui-corner-all">Button with disabled attribute(带有已禁用属性的按钮)</button>
</div><div><a class="jqm-view-source-link ui-btn ui-corner-all ui-btn-inline ui-mini" href="#popupDemo" data-rel="popup" aria-haspopup="true" aria-owns="popupDemo" aria-expanded="false">View Source</a></div><!--/demo-html -->
<a href="#ui-page-top" class="jqm-deeplink ui-icon-carat-u ui-alt-icon">Top</a><h2 id="Nativebutton">Native button原生按钮</h2>
<!-- TODO: Remove this demo in 1.5 -->
<p>在1.4版本中<code>button</code>仍会自动渲染. 此示例演示如何防止这种情况出现.</p>
<div data-demo-html="true">
<button data-role="none">Button</button>
</div><div><a class="jqm-view-source-link ui-btn ui-corner-all ui-btn-inline ui-mini" href="#popupDemo" data-rel="popup" aria-haspopup="true" aria-owns="popupDemo" aria-expanded="false">View Source</a></div><!--/demo-html -->
<!-- 多说评论框 start -->
<div class="ds-thread" data-title="jqmapi.com中文站" data-url="jqmapi.com" style="margin: 10px 0px 0px;" id="ds-thread"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"jqmapi"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.unstable.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- 多说公共JS代码 end -->
<iframe id="tmp_downloadhelper_iframe" style="display: none;"></iframe></div>
</body>
</html>
Button markup按钮标记
最新推荐文章于 2021-07-17 13:51:45 发布
扫一扫
754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
