jQuery mobile 之二

      我们知道，当用户进入了我们的站点，我们要做的第一件事情是将最多的最全面最重要的信息，以最简洁的形式呈现给用户，那么我们需要的是一个一个的菜单来帮助我们完成这些事情，接下来的事情就是来对jQuery mobile中的这些菜单做一个系统的总结和分析

   我们来看一个列表形式的菜单（虽然有点浪费资源）

     

<h3 style="padding: 1em 0;">菜单</h3>
    <ul data-role="listview" data-inset="true">
      <li>香辣来福鱼</li>
      <li>孜然牛肉</li>
      <li>红烧鲫鱼</li>
      <li>小炒猪肝</li>
    </ul>

嘿嘿相当简单吧；只要在ul中添加一点点的代码 data-role="listview"  data-inset="true"

看看效果吧：

 

如果我们在上面的代码上做一点点小小的变化，就是在每一个li元素里面的元素包裹上一个a标签，效果会使怎么样子的呢？

代码：

 <h3 style="padding: 1em 0;">菜单</h3>
    <ul data-role="listview" data-inset="true">
      <li><a href="#">香辣来福鱼</a></li>
      <li><a href="#">孜然牛肉</a></li>
      <li><a href="#">红烧鲫鱼</a></li>
      <li><a href="#">小炒猪肝</a></li>
    </ul>

效果：

   

呵呵 ，是不是多了一个箭头呢。很酷吧

 

看看级联的效果是怎样子的

代码：

<h2 style="padding: 1em 0;">学科</h2>
    <ul data-role="listview" data-inset="true">
      <li>语文
        <ul>
          <li><a href="#">小学语文</a></li>
          <li><a href="#">初中语文</a></li>
          <li><a href="#">高中语文</a></li>
        </ul>
      </li>
      <li>数学
        <ul>
          <li><a href="#">小学数学</a></li>
          <li><a href="#">初中数学</a></li>
          <li><a href="#">高中数学</a></li>
        </ul>
      </li>
      <li>英语
        <ul>
          <li><a href="#">小学英语</a></li>
          <li><a href="#">初中英语</a></li>
          <li><a href="#">高中英语</a></li>
        </ul>
      </li>
    </ul>

效果：

呵呵  效果怎么样呢？我想说的是这还没有经过美工处理的

 

下面是一个强大的组件，不想说什么，贴代码，贴效果

代码：

 <!--这是一个过滤的效果-->
    <h2 style="padding: 1em 0;">查找你要的书籍</h2>

    <ul data-role="listview" data-inset="true" data-filter="true">
      <li>
        <a href="#">鸟哥的linux私房菜</a>
        <a href="#">我买了</a>
      </li>
      <li>
        <a href="#">linux从入门到精通</a>
        <a href="#">我买了</a>
      </li>
      <li>
        <a href="#">linux内核完全剖析</a>
        <a href="#">我买了</a>
      </li>      
    </ul>
    <!--这是一个过滤的效果-->

效果：          

不管你懂没懂味，反正我是懂了

 

下面是一个带数量的列表

代码

  <h2 style="padding: 1em 0;">价格表</h2>
    <ul data-role="listview" data-inset="true">
      <li><a href="#">鸟哥的linux私房菜</a> <span class="ui-li-count">65元</span></li>
      <li><a href="#">linux从入门到精通</a> <span class="ui-li-count">52元</span></li>
      <li><a href="#">linux内核完全剖析</a> <span class="ui-li-count">98元</span></li>      
    </ul>

效果：

结束咯