> JQuery UI中文在线手册 > 主题分割按钮
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="Http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.CSS">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="content">
    <h2>划分按钮实例</h2>
    <ul data-role="listview" data-inset="true" data-split-theme="e">
      <li data-role="divider" data-theme="a">浏览器</li>
      <li>
        <a href="#">
        <img src="/upload/love/chrome.gif">
        <h2>Google Chrome</h2>
        <p>Google Chrome 是一款免费的开源浏览器。发布于 2008 年。</p>
        </a>
        <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a>
      </li>
      <li>
        <a href="#">
        <img src="/upload/love/firefox.gif">
        <h2>Mozilla Firefox</h2>
        <p>Firefox 是一款来自 Mozilla。发布于 2004 年。</p>
        </a>
        <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a>
      </li>
    </ul>
  </div>
</div> 

<div data-role="page" id="download" data-overlay-theme="e">
  <div data-role="content">
  <h3>划分按钮实例</h3>
    <p>下面的按钮仅供演示。</p>
    <a href="#" data-role="button" data-rel="back" data-theme="b" data-icon="check" data-inline="true" data-mini="true">下载</a>
    <a href="#" data-role="button" data-rel="back" data-inline="true" data-mini="true">取消</a>
  </div>
</div> 

</body>
</html>
			
上一篇:
下一篇: