HTML5 经量级框架 jQuery Mobile (Button,Icon,分组功能button,具有内联样式的button) - 7.4

1.button data-role="button"


2.icon data-icon="arrow-l"


3.icon 图标位置 data-iconpos="right" left right top bottom


4.自定义ICON ui-icon-myicon-name


5具有内联样式的button data-inline="true"


6.分组功能button

  <div data-role="controlgroup">
    <a href="#" data-role="button" data-theme="a">返回</a>
    <a href="#" data-role="button" data-theme="b">首页</a>
    <a href="#" data-role="button" data-theme="c">前进</a>

  </div>


HTML5 经量级框架 jQuery Mobile (Button,Icon,分组功能button,具有内联样式的button) - 7.4_第1张图片



HTML5



<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap</title>

      
      <link rel="stylesheet" href="jquery.mobile-1.3.1.css">
      
      <script type="text/javascript" charset="utf-8" src="jquery-1.9.0.min.js"></script>
      <script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.1.js"></script>
  </head>
  <body>
    <section data-role="page" id="firstview" data-title="第一个视图" data-theme="a">
        <header data-role="header" data-theme="b"><h1>第一个视图</h1></header>

        <article data-role="content">

        <div data-role="controlgroup">
          <a href="#" data-role="button" data-theme="a">返回</a>
          <a href="#" data-role="button" data-theme="b">首页</a>
          <a href="#" data-role="button" data-theme="c">前进</a>
        </div>
        <a href="#secondview" data-rel="dialog" data-transition="pop" data-role="button">切换到第二个View</a>
        <input type="button" name="button 类型 input"/>
        <input type="submit" name="submit 类型 input"/>
        <input type="reset" name="reset 类型 input"/>
        <input type="image" name="image 类型 input"/>
        <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="right">左箭头 arrow-l</a>
        <a href="#" data-role="button" data-icon="arrow-r" data-inline="true">右箭头 arrow-r</a>
        <a href="#" data-role="button" data-icon="arrow-u">上箭头 arrow-u</a>
        <a href="#" data-role="button" data-icon="arrow-d">下箭头 arrow-d</a>
        <a href="#" data-role="button" data-icon="delete">icon arrow-l</a>
        <a href="#" data-role="button" data-icon="plus">icon plus</a>
        <a href="#" data-role="button" data-icon="minus">icon minus</a>
        <a href="#" data-role="button" data-icon="check">icon check</a>
        <a href="#" data-role="button" data-icon="gear">icon check</a>
        <a href="#" data-role="button" data-icon="refresh">icon refresh</a>
        <a href="#" data-role="button" data-icon="forward">icon forward</a>
        <a href="#" data-role="button" data-icon="back">icon back</a>
        <a href="#" data-role="button" data-icon="grid">icon grid</a>
        <a href="#" data-role="button" data-icon="star">icon star</a>
        <a href="#" data-role="button" data-icon="alert">icon alert</a>
        <a href="#" data-role="button" data-icon="info">icon info</a>
        <a href="#" data-role="button" data-icon="home">icon home</a>
        <a href="#" data-role="button" data-icon="search">icon search</a>
      </article>
        <footer data-role="footer" data-theme="c"><h1>页脚</h1></footer>
    </section>

    <section data-role="page" id="secondview" data-title="第二个视图">
      <header data-role="header">第二个视图</header>
      <article data-role="content"><a href="#firstview" data-transition="flip">切换到第一个View</a></article>
      <footer data-role="footer">页脚</footer>
    </section>
  </body>
</html>


你可能感兴趣的:(html5,button,data-icon,controlgroup,data-inline,data-iconpos)