AppFramework学习笔记（二）

尝试着写了第一个jqMobi程序，大概的了解了这个框架的基本用法

 

面板的基本属性

<div class="panel" id="about" style="overflow:hidden"> </div> <!-- no scrolling --> 
<div class="panel" id="login" selected="true"> </div> <!-- Default loaded panel --> 
<div class="panel" id="login" modal="true"> </div> <!-- Modal window --> 
<div class="panel" id="about" data-header="default"> </div> <!-- Change the header -->
 <div class="panel" id="login" data-footer="none"> </div> <!-- This removes the footer!--> 
<div class="panel" id="login" data-nav="settings"> </div> <!-- Change the side nav menu --> 
<div class="panel" id="login" data-tab="settings"> </div> <!-- Change the selected tab to settings -->
<div class="panel" id="login" data-defer="app/login"> </div> <!-- Load the login content from the HTTP request of app/login -->
 <div class="panel" id="login" data-load="showCount" data-counter='5'> </div> <!-- execute showCount when the panel is loaded --> 
<script> 
function showCount(div)
{alert($(div).data('counter'));}
 </script> 
<div class="panel" id="loggin" data-unload="showCount" data-counter='3'> </div> <!-- execute showCount when the panel is unloaded -->

selected="true" 默认选中的panel
data-header="default" 指定header的id
data-footer="none" 指定footer的id

data-nav="settings" 指定side menu的id

data-defer="app/login" 引入本地文件(远程会不起效)

data-load="showCount" 加载页面的回调函数

data-unload="showCount" 加载页面失败的回调函数

页面的跳转 a链接的使用

<a href="#home" data-transition="fade">Home </a> <!-- fade transition --> panel跳转
<a href="products/list" data-persist-ajax="true">Products </a> <!-- Create/keep the div in the DOM for history/navigation flow. Does not make subsequent ajax requests --> ajax请求页面 
<a href="products/list" data-refresh-ajax="true">Products </a> <!-- Always make the ajax request to load content --> ajax请求页面 并且请求的页面里面还可以请求其他的数据 
<a href="index.html?bb" data-ignore="True">Load BB10 Theme </a> <!-- Do not use the internal click handler, let the browser handle the anchor --> 原生的页面跳转