listview缺少嵌套列表页面的后退按钮

时间:2013-04-30 16:06:15

标签: jquery jquery-mobile jquery-mobile-listview jquery-mobile-button

我有这种标记(基本上是一个主要的ul,几乎没有嵌套的ul)

<ul id="listaRecetas" data-role="listview" data-add-back-btn="true">
  <li title ="people">
    <a href="index.php?task=browse_posts&catid=47">
      people
    </a>
    <ul class="sn">
    </ul>
  </li>
  <li title ="Art">
    <a href="index.php?task=browse_posts&catid=14">
      Art
    </a>
    <ul class="sn">
      <li >
        <img  src="/files/uploads/1_art_alan_hydes.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=56" >
          Alan Hyde 
          <span>
          </span>
        </a>
      </li>
      <li >
        <div style="float:left;width:39px; height:37px">
        </div>
        <a href="mobilePage.php?task=view_post&blogid=48" >
          Arturo Rhodes 
          <span>
          </span>
        </a>
      </li>
      <li >
        <div style="float:left;width:39px; height:37px">
        </div>
        <a href="mobilePage.php?task=view_post&blogid=66" >
          Bob Bradbury 
          <span>
          </span>
        </a>
      </li>
      <li >
        <div style="float:left;width:39px; height:37px">
        </div>
        <a href="mobilePage.php?task=view_post&blogid=65" >
          Cecily Sheridan 
          <span>
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/davidgoodehill.png" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=25" >
          David Goode Hill 
          <span>
          </span>
        </a>
      </li>
      <li >
        <div style="float:left;width:39px; height:37px">
        </div>
        <a href="mobilePage.php?task=view_post&blogid=67" >
          George Sheridan 
          <span>
          </span>
        </a>
      </li>
      <li >
        <div style="float:left;width:39px; height:37px">
        </div>
        <a href="mobilePage.php?task=view_post&blogid=62" >
          Josh Burbank 
          <span>
          </span>
        </a>
      </li>
      <li >
        <div style="float:left;width:39px; height:37px">
        </div>
        <a href="mobilePage.php?task=view_post&blogid=57" >
          Leila Ward 
          <span>
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/3-600x600.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=58" >
          Letitia Bermejo 
          <span>
          </span>
        </a>
      </li>
      <li >
        <div style="float:left;width:39px; height:37px">
        </div>
        <a href="mobilePage.php?task=view_post&blogid=59" >
          Miquel Oliver 
          <span>
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/portraits-robert-graves.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=19" >
          Robert Graves 
          <span>
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_artist_stephanie_moog.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=60" >
          Stephanie Moog 
          <span>
          </span>
        </a>
      </li>
      <li >
        <div style="float:left;width:39px; height:37px">
        </div>
        <a href="mobilePage.php?task=view_post&blogid=61" >
          Sunna Wathen 
          <span>
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_art_david_templeton.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=148" >
          David Templeton  
          <span>
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/camouflage-1985-1987.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=13" >
          Mati klarwein 
          <span>
          </span>
        </a>
      </li>
    </ul>
  </li>
  <li title ="sleep">
    <a href="index.php?task=browse_posts&catid=7">
      sleep
    </a>
    <ul class="sn">
      <li >
        <img  src="/files/uploads/villaverde-deia_big.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=16" >
          Hostal Villaverde 
          <span>
            **
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_sleep_costa_dor.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=53" >
          Hotel Costa D'or 
          <span>
            *****
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_sleep_des_puig.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=38" >
          Hotel des Puig 
          <span>
            ***
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_sleep_es_moli.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=14" >
          Hotel es Molí 
          <span>
            ****
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/La-Residencia-Hotel-Mallorca.jpeg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=15" >
          Hotel La Residencia 
          <span>
            *****
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_sleep_pension_miramar.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=64" >
          Pensiónl Miramar 
          <span>
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_sleep_sa_pedrissa.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=37" >
          Sa Pedrissa  
          <span>
            ****
          </span>
        </a>
      </li>
    </ul>
  </li>
  <li title ="party">
    <a href="index.php?task=browse_posts&catid=46">
      party
    </a>
    <ul class="sn">
    </ul>
  </li>
  <li title ="EAT & DRINK">
    <a href="index.php?task=browse_posts&catid=8">
      EAT & DRINK
    </a>
    <ul class="sn">
      <li >
        <img  src="/files/uploads/1_eatdrink_sa_font_fresca.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=35" >
          Cafè sa Font Fresca 
          <span>
            €
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_eatdrink_chiringuito_sonmarroig.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=28" >
          Chiringuito de Sa Foradada 
          <span>
            €€
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_eatdrink_sonmarroig.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=97" >
          Chiringuito Son Marroig 
          <span>
            €€
          </span>
        </a>
      </li>
      <li >
        <div style="float:left;width:39px; height:37px">
        </div>
        <a href="mobilePage.php?task=view_post&blogid=146" >
          Deia Restaurante 
          <span>
            €€
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_eatdrink_el_olivo.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=81" >
          El Olivo 
          <span>
            €€€€€
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_es raco 1.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=49" >
          Es Raco des Teix 
          <span>
            €€€€€
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_eatdrink_sa_Cacera.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=141" >
          Sa Cacera 
          <span>
            €
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_eatdrink_sa_fonda.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=27" >
          Sa Fonda 
          <span>
            €
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_eatdrink_sa_vinya_1.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=36" >
          Sa Vinya 
          <span>
            €€€
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_eatdrink_son_moragues.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=82" >
          Son Moragues Terrace & Bar 
          <span>
            €€€€
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_eatdrink_village_Cafe.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=63" >
          The Village Cafe 
          <span>
            €€€
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_eatdrink_xelini.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=91" >
          Xelini 
          <span>
            €€€
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_eatdrink_can_lluc.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=42" >
          Ca'n Lluch 
          <span>
            €€
          </span>
        </a>
      </li>
      <li >
        <div style="float:left;width:39px; height:37px">
        </div>
        <a href="mobilePage.php?task=view_post&blogid=40" >
          Ca'n Quet 
          <span>
            €€€€
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_eatdrink_cas_patro.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=41" >
          Ca's Patró March 
          <span>
            €€€
          </span>
        </a>
      </li>
      <li >
        <div style="float:left;width:39px; height:37px">
        </div>
        <a href="mobilePage.php?task=view_post&blogid=30" >
          Deià Restaurante 
          <span>
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_eatdrink_espunt.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=142" >
          Es Punt 
          <span>
            €€€
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_eatdrink_las_palmeras.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=32" >
          Las Palmeras 
          <span>
            €€
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/Restaurante Sa Cova.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=17" >
          Sa Cova 
          <span>
            €
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/restaurant1.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=18" >
          Sebastian's 
          <span>
            €€€€
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_eatdrink_son_marroig.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=85" >
          Son Marroig 
          <span>
            €€€
          </span>
        </a>
      </li>
      <li >
        <img  src="/files/uploads/1_eatdrink_trattoria_1.jpg" style="float:left;height:39px;width:39px;" />
        <a href="mobilePage.php?task=view_post&blogid=33" >
          Trattoria Italiana 
          <span>
            €€€
          </span>
        </a>
      </li>
    </ul>
  </li>
  <li title ="To Do">
    <a href="index.php?task=browse_posts&catid=13">
      To Do
    </a>
    <ul class="sn">
      <li title ="beach">
        <a href="index.php?task=browse_posts&catid=21">
          beach
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="kids">
        <a href="index.php?task=browse_posts&catid=22">
          kids
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="tenis">
        <a href="index.php?task=browse_posts&catid=23">
          tenis
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="Spa">
        <a href="index.php?task=browse_posts&catid=24">
          Spa
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="yoga">
        <a href="index.php?task=browse_posts&catid=25">
          yoga
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="gym">
        <a href="index.php?task=browse_posts&catid=26">
          gym
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="walks">
        <a href="index.php?task=browse_posts&catid=28">
          walks
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="Art classes">
        <a href="index.php?task=browse_posts&catid=29">
          Art classes
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="cooking">
        <a href="index.php?task=browse_posts&catid=30">
          cooking
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="boats">
        <a href="index.php?task=browse_posts&catid=31">
          boats
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="kayak">
        <a href="index.php?task=browse_posts&catid=32">
          kayak
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="fishing">
        <a href="index.php?task=browse_posts&catid=33">
          fishing
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="museums">
        <a href="index.php?task=browse_posts&catid=34">
          museums
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="Shopping">
        <a href="index.php?task=browse_posts&catid=51">
          Shopping
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="Art Galleries">
        <a href="index.php?task=browse_posts&catid=52">
          Art Galleries
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="Art Galleries">
        <a href="index.php?task=browse_posts&catid=53">
          Art Galleries
        </a>
        <ul class="sn">
        </ul>
      </li>
    </ul>
  </li>
  <li title ="properties">
    <a href="index.php?task=browse_posts&catid=19">
      properties
    </a>
    <ul class="sn">
      <li title ="For sale">
        <a href="index.php?task=browse_posts&catid=35">
          For sale
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="For rent">
        <a href="index.php?task=browse_posts&catid=36">
          For rent
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="Market reports">
        <a href="index.php?task=browse_posts&catid=48">
          Market reports
        </a>
        <ul class="sn">
        </ul>
      </li>
    </ul>
  </li>
  <li title ="Gallery">
    <a href="index.php?task=browse_posts&catid=15">
      Gallery
    </a>
    <ul class="sn">
      <li title ="photos">
        <a href="/category/gallery/15/?media=photo">
          photos
        </a>

      </li>
      <li title ="videos">
        <a href="/category/gallery/15/?media=video">
          videos
        </a>

      </li>
    </ul>
  </li>
  <li title ="classifieds">
    <a href="index.php?task=browse_posts&catid=11">
      classifieds
    </a>
    <ul class="sn">
    </ul>
  </li>
  <li title ="Calendar">
    <a href="index.php?task=browse_posts&catid=10">
      Calendar
    </a>
    <ul class="sn">
      <li>
        <a href="/category/calendar/10/?start_date=1">
          enero
        </a>
      </li>
      <li>
        <a  href="calendar.php?start_date=2">
          febrero
        </a>
      </li>
      <li>
        <a href="calendar.php?start_date=3">
          marzo
        </a>
      </li>
      <li>
        <a href="calendar.php?start_date=4">
          abril
        </a>
      </li>
      <li>
        <a href="calendar.php?start_date=5">
          mayo
        </a>
      </li>
      <li>
        <a href="calendar.php?start_date=6">
          June
        </a>
      </li>
      <li>
        <a href="calendar.php?start_date=7">
          July
        </a>
      </li>
      <li>
        <a href="calendar.php?start_date=8">
          agosto
        </a>
      </li>
      <li>
        <a href="calendar.php?start_date=9">
          setiembre
        </a>
      </li>
      <li>
        <a href="calendar.php?start_date=10">
          octubre
        </a>
      </li>
      <li>
        <a href="calendar.php?start_date=11">
          noviembre
        </a>
      </li>
      <li>
        <a href="calendar.php?start_date=12">
          diciembre
        </a>
      </li>
    </ul>
  </li>
  <li title ="News">
    <a href="index.php?task=browse_posts&catid=9">
      News
    </a>
    <ul class="sn">
    </ul>
  </li>
  <li title ="about">
    <a href="index.php?task=browse_posts&catid=6">
      about
    </a>
    <ul class="sn">
      <li title ="where">
        <a href="/category/about/6/#where">
          where
        </a>

      </li>
      <li title ="weather">
        <a href="/category/about/6/#weather">
          weather
        </a>

      </li>
      <li title ="history">
        <a href="/category/about/6/#history">
          history
        </a>

      </li>
      <li title ="Art culture">
        <a href="/category/about/6/#art_culture">
          Art culture
        </a>

      </li>
      <li title ="Calendar">
        <a href="/category/calendar/10/">
          Calendar
        </a>

      </li>
      <li title ="Numbers of interest">
        <a href="index.php?task=browse_posts&catid=45">
          Numbers of interest
        </a>
        <ul class="sn">
        </ul>
      </li>
    </ul>
  </li>
  <li title ="Home">
    <a href="index.php?task=browse_posts&catid=5">
      Home
    </a>
    <ul class="sn">
    </ul>
  </li>

</ul>

我尝试了这个解决方案:

jQuery Mobile Missing Back Button in Listviews

并将data-add-back-button="true"添加到每个<ul>

但是回去按钮已经消失......

只需点击ListView中的任何项目即可看到没有后退按钮。

我错过了什么?

1 个答案:

答案 0 :(得分:3)

工作示例:http://jsfiddle.net/Gajotres/VjPGm/

只需要添加:

<script type="text/javascript">
    $(document).bind("mobileinit", function() {
        $.mobile.page.prototype.options.addBackBtn = true;
    });    
</script>  

请记住,必须在jQuery Mobile初始化之前触发mobilinit事件。就像在我的例子中一样。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script type="text/javascript">
            $(document).bind("mobileinit", function() {
            $.mobile.page.prototype.options.addBackBtn = true;
            });    
        </script>              
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">
                <ul data-role="listview">
                    <li>
                        <h3>Animals</h3>
                        <p>All your favorites from aarkvarks to zebras.</p>

                        <ul>
                            <li><div>Pets</div>
                                <span class="ui-li-count">6</span>
                                <ul>
                                    <li><a href="index.html">Canary</a></li>
                                    <li><a href="index.html">Cat</a></li>
                                    <li><a href="index.html">Dog</a></li>
                                    <li><a href="index.html">Gerbil</a></li>
                                    <li><a href="index.html">Iguana</a></li>
                                    <li><a href="index.html">Mouse</a></li>
                                </ul>
                            </li>
                            <li><div>Farm animals</div>
                                <p class="ui-li-count">6</p>
                                <ul>
                                    <li><a href="index.html">Chicken</a></li>
                                    <li><a href="index.html">Cow</a></li>
                                    <li><a href="index.html">Duck</a></li>
                                    <li><a href="index.html">Horse</a></li>
                                    <li><a href="index.html">Pig</a></li>
                                    <li><a href="index.html">Sheep</a></li>
                                </ul>
                            </li>
                            <li><div>Wild animals</div>
                                <p class="ui-li-count">18</p>
                                <ul>
                                    <li><a href="index.html">Aardvark</a></li>
                                    <li><a href="index.html">Alligator</a></li>
                                    <li><a href="index.html">Ant</a></li>
                                    <li><a href="index.html">Bear</a></li>
                                    <li><a href="index.html">Beaver</a></li>
                                    <li><a href="index.html">Cougar</a></li>
                                    <li><a href="index.html">Dingo</a></li>
                                    <li><a href="index.html">Eagle</a></li>
                                    <li><a href="index.html">Elephant</a></li>
                                    <li><a href="index.html">Ferret</a></li>
                                    <li><a href="index.html">Frog</a></li>
                                    <li><a href="index.html">Giraffe</a></li>
                                    <li><a href="index.html">Lion</a></li>
                                    <li><a href="index.html">Monkey</a></li>
                                    <li><a href="index.html">Panda bear</a></li>
                                    <li><a href="index.html">Polar bear</a></li>
                                    <li><a href="index.html">Tiger</a></li>
                                    <li><a href="index.html">Zebra</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>

                        <h3>Colors</h3>
                        <p>Fresh colors from the magic rainbow.</p>

                        <ul>
                            <li><a href="index.html">Blue</a></li>
                            <li><a href="index.html">Green</a></li>
                            <li><a href="index.html">Orange</a></li>
                            <li><a href="index.html">Purple</a></li>
                            <li><a href="index.html">Red</a></li>
                            <li><a href="index.html">Yellow</a></li>
                            <li><a href="index.html">Violet</a></li>
                        </ul>
                    </li>
                    <li>
                        <h3>Vehicles</h3>
                        <p>Everything from cars to planes.</p>

                        <ul>
                            <li><div>Cars</div>
                                <span class="ui-li-count">22</span>
                                <ul>
                                    <li><a href="index.html">Acura</a></li>
                                    <li><a href="index.html">Audi</a></li>
                                    <li><a href="index.html">BMW</a></li>
                                    <li><a href="index.html">Cadillac</a></li>
                                    <li><a href="index.html">Chrysler</a></li>
                                    <li><a href="index.html">Dodge</a></li>
                                    <li><a href="index.html">Ferrari</a></li>
                                    <li><a href="index.html">Ford</a></li>
                                    <li><a href="index.html">GMC</a></li>
                                    <li><a href="index.html">Honda</a></li>
                                    <li><a href="index.html">Hyundai</a></li>
                                    <li><a href="index.html">Infiniti</a></li>
                                    <li><a href="index.html">Jeep</a></li>
                                    <li><a href="index.html">Kia</a></li>
                                    <li><a href="index.html">Lexus</a></li>
                                    <li><a href="index.html">Mini</a></li>
                                    <li><a href="index.html">Nissan</a></li>
                                    <li><a href="index.html">Porsche</a></li>
                                    <li><a href="index.html">Subaru</a></li>
                                    <li><a href="index.html">Toyota</a></li>
                                    <li><a href="index.html">Volkswagon</a></li>
                                    <li><a href="index.html">Volvo</a></li>
                                </ul>
                            </li>
                            <li><div>Planes</div>
                                <span class="ui-li-count">7</span>
                                <ul>
                                    <li><a href="index.html">Boeing</a></li>
                                    <li><a href="index.html">Cessna</a></li>
                                    <li><a href="index.html">Derringer</a></li>
                                    <li><a href="index.html">Embraer</a></li>
                                    <li><a href="index.html">Gulfstream</a></li>
                                    <li><a href="index.html">Piper Aircraft</a></li>
                                    <li><a href="index.html">Raytheon</a></li>
                                </ul>
                            </li>
                            <li><div>Construction</div>
                                <span class="ui-li-count">3</span>
                                <ul>
                                    <li><a href="index.html">Caterpillar</a></li>
                                    <li><a href="index.html">Ford</a></li>
                                    <li><a href="index.html">John Deere</a></li>

                                </ul>
                            </li>               
                        </ul>
                    </li>
                </ul>
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">

            </div>
        </div> 
    </body>
</html>