app-framework学习--pannel介绍

每一个panel在智能设备上都显示为一个页面：

<div id="content">内如果有多个panel，每次只能显示一个panel，关闭后才能显示另外一个panel。

panel的属性:

官方文档：

css property - overflow:hidden - When set, this will disable auto-wiring of the scroller. Usefull for panels that need to auto expand, like carousels or google maps
selected="true" - When set, this will make the panel the default panel that gets loaded.
modal="true" - When set, this turns the panel into a modal window that takes up 100% of the screen (can be changed via CSS).
data-header="id" - when set, it will load the custom <header> tag with that ID for that panel
data-footer="id" - when set, it will load the custom <footer> tag with that ID for that panel
data-nav="id" - when set, it will load the custom <nav> tag with that ID for that panel
data-defer="filename.html" - This will load content into the panel from a remote page/url. This is useful for separating out content into different files. af.ui.ready is not available until all files are loaded asynchronously.
data-tab="anchor_id" - This will set the selected tab in the bottom navbar to the id. Useful for when you update your panel via JS and not clicking a bottom tab.
data-load="func_name" - This is the string name of a function to run when the panel is loaded. The div is passed in as a parameter so you can use a single function and act upon other attributes.
data-unload="func_name" - This is the string name of a function to run when the panel is unloaded

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加载后，执行的方法。这个方法在panel每次正好在当前页面时都会执行。

data-unload="func_name" 在panelunload后执行的方法，也就是离开本panel时执行

title="home" 可以设定header的显示的内容。

selected="true" 可以是这个panel变成默认的panel

<divclass="panel"id="about"style="overflow:hidden"> </div>

<divclass="panel"id="login"selected="true"> </div>

<divclass="panel"id="login"modal="true"> </div>

<divclass="panel"id="about"data-header="default"> </div>

<divclass="panel"id="login"data-footer="none"> </div>

<divclass="panel"id="login"data-nav="settings"> </div>

<divclass="panel"id="login"data-tab="settings"> </div>

<divclass="panel"id="login"data-defer="app/login"> </div>

<divclass="panel"id="login"data-load="showCount"data-counter='5'> </div>

<script> function showCount(div){alert($(div).data('counter'));} </script>

<divclass="panel"id="loggin"data-unload="showCount"data-counter='3'> </div>

欢迎加入学习交流群：333492644

app-framework学习--pannel介绍相关推荐

ionic+angularJS+iOS混合开发app的学习资料介绍和基本步骤（干货）
ionic+angularJS+iOS 先安装nodejs.npm.angularJS和ionic 其中nodeJS和npm安装可以到官网下载nodeJS,然后双击安装就好很简单(网址: http:/ ...
jqMobi（App Framework）入门学习（一）
jqMobi(App Framework)入门学习(一) 1. 什么是jqMobi? jqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架.是个极其高速的查询选择 ...
Framework学习（五）应用程序启动过程
注释1处设置Flag为Intent.FLAG_ACTIVITY_NEW_TASK,这样根Activity会在新的任务栈中启动. 注释2处调用了Activity的startActivity函数. fra ...
Framework学习之路（一）—— UI绘制深入源码分析
Framework学习之路(一)-- UI绘制深入源码分析本篇为笔者对Android SDK 33版本的UI绘制入口进行追踪的过程,主要作笔记作用.由于笔者经验尚浅,水平也有限,所以会存在很多不足的 ...
Entity Framework 学习
Entity Framework 学习初级篇1--EF基本概况... 2 Entity Framework 学习初级篇2--ObjectContext.ObjectQuery.ObjectStateE ...
Entity Framework学习中级篇
1-EF支持复杂类型的实现本节,将介绍如何手动构造复杂类型(ComplexType)以及复杂类型的简单操作. 通常,复杂类型是指那些由几个简单的类型组合而成的类型.比如:一张Customer表,其中 ...
dommel mysql_.Net Core AA.FrameWork应用框架介绍
开发多年,一直在从社区获取开源的便利,也深感社区力量的重要性,今天开源一个应用基础框架AA.FrameWork,也算是回馈社区,做出一点点贡献,希望能够帮助类似当年入行的我. AA.FrameWork ...
Android FrameWork学习（二）Android系统源码调试
点击打开链接通过上一篇 Android FrameWork学习(一)Android 7.0系统源码下载\编译我们了解了如何进行系统源码的下载和编译工作. 为了更进一步地学习跟研究 Android ...
修改android framework学习
2019独角兽企业重金招聘Python工程师标准>>> 1:android平台编译自己编写的framework级service server实录 http://blog.sina.c ...

app-framework学习--pannel介绍

app-framework学习--pannel介绍相关推荐

最新文章

热门文章