Button markup按钮标记

来源：互联网发布：一组数据的标准偏差编辑：程序博客网时间：2024/05/25 16:40
<!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>
0 0