现在的位置: 首页 > 综合 > 正文

HTML5 经量级框架 jQuery Mobile 内容格式布局,折叠块内容 – 7.6

2018年09月08日 ⁄ 综合 ⁄ 共 2884字 ⁄ 字号 评论关闭

内容格式布局  <div class="ui-grid-b">  三列   <div class="ui-block-a">

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>
    <header data-role="header">
      <a href="#" data-role="button" data-icon="back">后退</a>
      <h1>9宫格</h1>
      <a href="#" data-role="button" data-icon="forward">前进</a>
    </header>
    <div class="ui-grid-b">
      <div class="ui-block-a"><a href="#" data-theme="a" data-role="button" data-icon="home" data-icopos="top">首页</a></div>
      <div class="ui-block-b"><a href="#" data-theme="b" data-role="button" data-icon="home" data-icopos="top">列表</a></div>
      <div class="ui-block-c"><a href="#" data-theme="c" data-role="button" data-icon="home" data-icopos="top">嘉兴</a></div>

      <div class="ui-block-a"><a href="#" data-theme="a" data-role="button" data-icon="home" data-icopos="top">信息</a></div>
      <div class="ui-block-b"><a href="#" data-theme="b" data-role="button" data-icon="home" data-icopos="top">搜索</a></div>
      <div class="ui-block-c"><a href="#" data-theme="c" data-role="button" data-icon="home" data-icopos="top">设置</a></div>

      <div class="ui-block-a"><a href="#" data-theme="a" data-role="button" data-icon="home" data-icopos="top">已选</a></div>
      <div class="ui-block-b"><a href="#" data-theme="b" data-role="button" data-icon="home" data-icopos="top">提示</a></div>
      <div class="ui-block-c"><a href="#" data-theme="c" data-role="button" data-icon="home" data-icopos="top">添加</a></div>
    </div>
  </body>
</html>

折叠块内容data-role="collapsible"

    <div data-role="collapsible-set">
      <section data-role="collapsible">
        <h3>可折叠的区标题</h3>
        <p>这是一个可折叠内容,默认开启,点击关闭</p>
      </section>
    </div>

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>
    <div data-role="collapsible-set">
      <section data-role="collapsible">
        <h3>可折叠的区标题</h3>
        <p>这是一个可折叠内容,默认开启,点击关闭</p>
      </section>
            <section data-role="collapsible">
        <h3>可折叠的区标题</h3>
        <p>这是一个可折叠内容,默认开启,点击关闭</p>
      </section>
      <section data-role="collapsible">
        <h3>可折叠的区标题</h3>
        <p>这是一个可折叠内容,默认开启,点击关闭</p>
      </section>
      <section data-role="collapsible">
        <h3>可折叠的区标题</h3>
        <p>这是一个可折叠内容,默认开启,点击关闭</p>
      </section>
    </div>
  </body>
</html>

抱歉!评论已关闭.