使用jqMobi开发app基础：通过panel添加内容详解手机开发

  完成了基本的页面布局，就可以使用panel添加内容了，添加的内容在标签<div id=“content”> 内部。

    每一个panel其实就是一个div，但类属性是panel，每一个panel在智能设备上都显示为一个页面，有点像webform中的page，或者是winform中的form。都会展示为一个页面。也就是说如果在<div id=“content”>的内部有很多panel，每次只能显示一个panel，关闭后才能显示另外一个panel。

    一个最基本的panel   

<div id="home" class="panel"> 
  <h3>home</h3> 
  <p>Home panel</p> 
</div>

   panel的属性介绍：

    selected=”true” 可以是这个panel变成默认的panel，在app启动时，用户首先看到的便是这个panel，有些类似webform中的起始页，winform中的启动项。

    modal=”true”   有点类似于模式弹出窗口，但弹出后，会占居整个屏幕，登录页面就应该使用。

例如：

<div class="panel" id="login" modal="true"> </div> <!-- Modal window -->

data-header=”id”
  自定义header

data-footer=”id”  自定义footer

data-nav=”id”     左侧的导航条

data-defer=”filename.html”  官方文档是可以根据设置的地址给panel加载内容。官方说可以使用远程地址，但我测试，似乎不行，但本地是可以的。远程就要涉及一个跨域访问的问题。目前还不知道如何加载远程的内容。

data-tab=”anchor_id”   在此panel显示时，将选中footer中id为anchor_id的选项。

data-load=”func_name”  在panel加载后，执行的方法。有点类似为winform中的formload函数，初步试验，这个方法在panel每次是当前内容时，也就是在当前页面时都会执行。

data-unload=”func_name”  在panelunload后执行的方法

title=”home”    官方文档没有，可以设定header的显示的内容。

官方教程

官方panel属性介绍