jQuery Mobile 按钮

最新推荐文章于 2025-10-19 07:00:00 发布

原创最新推荐文章于 2025-10-19 07:00:00 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

jquery mobile 专栏收录该内容

28 篇文章

订阅专栏

本文探讨了如何使用HTML、CSS和JavaScript创建交互式按钮，并通过UI框架实现按钮组的水平和垂直排列，同时展示了如何利用`data-role`属性来使按钮具有活动状态，提供了一个关于网页设计中按钮操作与页面布局实践的实例。

<a>标签使用data-role="button"变为按钮ui-btn-active表示是活动的

<div data-role="page">
  <div data-role="header"><h1>头部栏</h1></div>
　　<div class="ui-grid-a">
　　  <div class="ui-block-a">
　　    <a href="#" data-role="button" class="ui-btn-active">确定</a>
　　  </div>
　　  <div class="ui-block-b">
　　    <input type="submit" value="取消" />
　　  </div>
　　</div>
　　<div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>
　</div>

使用按钮组controlgroup进行水平和垂直的排列

 <div data-role="page">
    <div data-role="header"><h1>头部栏</h1></div>
    <div data-role="controlgroup">
      <a href="#" data-role="button" data-icon="check" class="ui-btn-active">确定</a>
      <a href="#" data-role="button" data-icon="delete">取消</a>
    </div>
    <div data-role="controlgroup" data-type="horizontal">
      <a href="#" data-role="button" data-icon="check" class="ui-btn-active">确定</a>
      <a href="#" data-role="button" data-icon="delete">取消</a>
    </div>
    <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>
　</div>