jquery - JQuery 移动应用程序页眉中的样式按钮

标签 jquery css jquery-mobile markup jquery-mobile-button

我有一个 JQuery Mobile 应用程序。我想设计“标题”中使用的按钮的样式。目前,我有以下内容:

.my-btn-hdr { text-transform:uppercase; background-color:blue; color:white; min-height:33px; width:93px; }
...

<div id="myPage" data-role="page" data-dom-cache="false">
  <div data-role="header" data-position="fixed">
    <a href="#" data-icon="arrow-l" data-iconpos="notext" data-direction="reverse" class="ui-btn-left jqm-back">Back</a>
    <h1>MyApp</h1>
    <a id="saveButton" href="#" class="ui-btn-right my-btn-hdr">Save</a>
  </div>

  <div data-role="content">        
    ...
  </div>
</div>

我注意到当页面呈现时,ui-btn、ui-btn-up-a、ui-shadow 和 ui-button-corner-all css 类被添加。我还注意到添加了 data-corners="true"、data-shadow="true"和 data-iconshadow="true"属性。

如何自定义 jquery 移动应用标题中按钮的样式?

最佳答案

你需要知道的一切都可以在官方文档中找到:http://api.jquerymobile.com/button/

例如,如果你想改变按钮主题,你可以使用这个函数:

$( "a" ).buttonMarkup({ theme: "c" });

这是一个活生生的例子:http://jsfiddle.net/Gajotres/eqLVV/

如果文档中没有提到某些内容,那么您将需要通过 css 对其进行更改,这是 jQM 渲染后的按钮结构:

<a href="#" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Anchor</span>
    </span>
</a>

最后一件事,如果您需要手动更改 css,请始终在 css 行末尾添加 !important 以防出现问题。

例如,这可用于更改按钮文本颜色:

#btn1 .ui-btn-inner .ui-btn-text {
    color: red;
}

这是一个例子:http://jsfiddle.net/Gajotres/k5jty/

关于jquery - JQuery 移动应用程序页眉中的样式按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15618807/

相关文章:

jquery - 单击 div 隐藏然后显示页面上的下一个 div?

javascript - 如何仅检测 native Android 浏览器

javascript - AngularJs jQuery : Add HTML dynamically

javascript - 如何将表类应用到 AJAX 响应表

php - jTable 中的 jQuery AJAX 调用

javascript - jQuery 加载动态内容并使其可通过 url 进行访问

javascript - 使用包含 .js 和 .css 文件的嵌入式 URL 加载 webview

javascript - 如何使用 Javascript 使图像在屏幕右侧移动并返回

php - jQuery Mobile - IE 缓存问题

jQuery Mobile 选项卡禁用() : Uncaught Error: jQuery UI Tabs: Mismatching fragment identifier