jqMobi基础(2)--快速入门(基本框架构建)
来源:互联网 发布:python 调用js函数 编辑:程序博客网 时间:2024/06/06 12:26
我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下:
拷贝上面的/css目录、/plugins目录、/ui目录、/appframework.js文件,如下图所示。
如果需要也可以拷贝index.html,然后自己修改,比如上面我的index01.html和index02.html
接下来引入css与js文件
- <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
- <link href="css/icons.css" rel="stylesheet" type="text/css"/>
- <script src="appframework.js" type="text/javascript"></script>
- <script src="ui/appframework.ui.js" type="text/javascript"></script>
index01.html
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>jqMobi</title>
- <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
- <link href="css/icons.css" rel="stylesheet" type="text/css"/>
- <script src="appframework.js" type="text/javascript"></script>
- <script src="ui/appframework.ui.js" type="text/javascript"></script>
- </head>
- <body>
- <div id="afui">
- <div id="content">
- <div id="home" title="首页" class="panel" selected="true"
- data-footer="custom_footer">
- </div>
- <div id="about" title="关于我们" class="panel"
- data-footer="custom_footer">
- </div>
- <header id="custom_header">
- <h1>首页</h1>
- </header>
- <footer id="custom_footer">
- <a href='#home' class='icon home'>首页</a>
- <a href='#about' class='icon info'>关于我们</a>
- </footer>
- </div>
- </div>
- </body>
- </html>
1、UI container
- <div id="afui">
- 这里面是写的内容
- </div>
- <div id="afui">
- <div id="content">
- <!-- this is where your panels will go -->
- 这里写的是 panel
- </div>
- </div>
- <div id="afui">
- <div id="content">
- <div id="main" title="Welcome" class="panel" selected="true">
- 在这个里面写我们的对应内容
- </div>
- </div>
- </div>
(1)每个panel单独的header与footer
(2)公用的header和footer可以在多个panel中调用
- <div id="afui">
- <div id="content">
- <div id="main" title="Welcome" class="panel" selected="true">
- <header>
- <h1>Welcome</h1>
- <a class="button" style="float:right;" class="icon home"></a>
- </header>
- 对应页面的内容
- <footer>
- <a href='#about' class='icon info'>About</a>
- </footer>
- </div>
- </div>
- </div>
(3)另一种方法
- <div id="afui">
- <div id="content">
- <div id="main" title="Welcome" class="panel" selected="true" data-footer="custom_footer"
- data-header="custom_header">
- 对应页面的内容
- </div>
- <header id="custom_header">
- <h1>Welcome</h1>
- <a class="button" style="float:right;" class="icon home"></a>
- </header>
- <footer id="custom_footer">
- <a href='#about' class='icon info'>About</a>
- </footer>
- </div>
- </div>
- <div id="header">
- <!-- any additional HTML you want can go here -->
- <a onclick="$.ui.toggleSideMenu();" class="button">Toggle Side Menu</a>
- </div>
- <div id="content">
- <!-- this is where your panels will go -->
- <div id="main" title="Welcome" class="panel" selected="true">
- 内容
- </div>
- <div id="about" title="About" class="panel" data-nav="second_nav">
- <!-- by setting data-nav the "second_nav" will be shown on this panel -->
- </div>
- </div>
- //底部
- <div id="navbar">
- <a target="#welcome" class="icon home">Home</a>
- </div>
运行效果
0 0
- jqMobi基础(2)--快速入门(基本框架构建)
- jqMobi快速入门
- SpringBoot快速入门-基本项目构建
- jqMobi基础
- webapp开发——jqmobi框架的快速使用
- js基本操作(基础快速入门篇)
- jqMobi基础(1)
- 小强的HTML5移动开发之路(37)——jqMobi快速入门
- appframework3.0(JQmobi)入门
- 使用jqMobi开发app基础
- jqmobi
- C# MVC框架(2)---快速入门
- WebSocket 框架快速入门(2)
- jello框架快速入门
- Quartz_框架快速入门
- 快速入门Thinkphp框架
- express框架快速入门
- JWeb框架快速入门
- prepareForSegue方法传入对象的问题
- Android高效加载大图、多图解决方案,有效避免程序OOM
- System.Windows.Forms.Timer[C#]
- Unity获取游戏对象详解
- 贵州贵阳商会商务运作合法吗?好做吗?考察必知
- jqMobi基础(2)--快速入门(基本框架构建)
- C#设计一个窗体
- Python 数据结构 之 串 的顺序存储结构
- NYOJ 寻找最大数(三)
- intel的lock prefix
- typedef
- js去掉字符串前后空格的五种方法
- 第五话-依赖倒转原则
- linux中的正则表达式中特殊符号