中国领先的IT技术网站
|
|

Hybrid开发:AppFrameworks移动开发框架定义页面布局

这个代码中,将使用appframeworks框架来构建一个超简单的图片预览应用,使用基础的页面定义,不需要你写任何独立的javascript代码,超快超酷,非常适合大家开发基于混合模式(Hybrid)开发的移动应用。

作者:佚名来源:gbtags|2014-12-17 10:12

【沙龙】51CTO诚邀您9月23号和多位技术大咖一起聊智能CDN的优化之路,抓紧时间哦!


这个代码中,将使用appframeworks框架来构建一个超简单的图片预览应用,使用基础的页面定义,不需要你写任何独立的javascript代码,超快超酷,非常适合大家开发基于混合模式(Hybrid)开发的移动应用。

  1. <div id="afui"> 
  2.  
  3.   <div id="header"> 
  4.     <!-- 
  5.       这里可以不定义,af会自动渲染成如下: 
  6.       <a id="backButton" href="javascript:;" class="button" style="visibility: hidden; ">Back</a> 
  7.       <h1 id="pageTitle">Page Title</h1> 
  8.     -->  
  9.   </div> 
  10.    
  11.   <div id="content"> 
  12.      
  13.     <!-- 定义首页 --> 
  14.     <div id="main" class="panel" data-title="首页" selected="true"> 
  15.        
  16.       <!-- 定义一个列表 --> 
  17.       <ul class="list"> 
  18.         <li><a href="#page1" class="icon picture">页面一</a></li> 
  19.         <li><a href="#page2" class="icon picture">页面二</a></li> 
  20.       </ul> 
  21.        
  22.     </div> 
  23.      
  24.     <!-- 定义页面一 --> 
  25.     <div id="page1" class="panel" data-title="页面一"> 
  26.        
  27.       <!-- 这里定义一个图片列表 --> 
  28.       <ul class="list"> 
  29.          
  30.         <!-- 添加一个滚动到底按钮 --> 
  31.         <li> 
  32.           <a href="#" class="icon down" onclick="$.ui.scrollToBottom('page1');">滚动到底</a> 
  33.         </li> 
  34.          
  35.         <li><img src="http://www.gbtags.com/gb/laitu/500x200&text=调色板/222222/ffffff"></li> 
  36.         <li><img src="http://www.gbtags.com/gb/laitu/500x200&text=调色板/444444/ffffff"></li> 
  37.         <li><img src="http://www.gbtags.com/gb/laitu/500x200&text=调色板/666666/ffffff"></li> 
  38.         <li><img src="http://www.gbtags.com/gb/laitu/500x200&text=调色板/888888/ffffff"></li> 
  39.         <li><img src="http://www.gbtags.com/gb/laitu/500x200&text=调色板/aaaaaa/ffffff"></li> 
  40.         <li><img src="http://www.gbtags.com/gb/laitu/500x200&text=调色板/cccccc/bbbbbb"></li> 
  41.         <li><img src="http://www.gbtags.com/gb/laitu/500x200&text=调色板/dddddd/aaaaaa"></li> 
  42.         <li><img src="http://www.gbtags.com/gb/laitu/500x200&text=调色板/eeeeee/999999"></li> 
  43.          
  44.         <!-- 添加一个滚动到顶按钮 --> 
  45.         <li> 
  46.           <a href="#" class="icon up" onclick="$.ui.scrollToTop('page1');">滚动到底</a> 
  47.         </li> 
  48.       </ul> 
  49.        
  50.     </div> 
  51.      
  52.     <!-- 定义页面二 --> 
  53.     <div id="page2" class="panel" data-title="页面二"> 
  54.       <!-- 图片内容 --> 
  55.       <img src="http://www.gbtags.com/gb/laitu/500x200/dd4814/ffffff"> 
  56.       <img src="http://www.gbtags.com/gb/laitu/500x200/dd4814/000000"> 
  57.        
  58.     </div> 
  59.      
  60.   </div> 
  61.    
  62.   <div id="navbar"> 
  63.     <!-- 定义导航条 --> 
  64.     <a href="#main" class="icon home">首页</a> 
  65.     <a href="#page1" class="icon picture">页面一</a> 
  66.     <a href="#page2" class="icon picture">页面二</a> 
  67.   </div> 
  68.    
  69. </div> 
  70.  
  71.  
  72. <!-- 选择器类库 --> 
  73. <script src="http://cdn.gbtags.com/appframework/2.1/appframework.min.js"></script> 
  74. <!-- 相关UI类库 --> 
  75. <script src="http://cdn.gbtags.com/appframework/2.1/appframework.ui.min.js"></script> 
  76. <!-- 为了在桌面浏览器更好的模拟移动设别的触发滚动,加入一个ap提供的插件 --> 
  77. <script src="http://cdn.gbtags.com/appframework/2.1/af.desktopBrowsers.js"></script> 

然后:

  1. /* 导入af相关的CSS */ 
  2.  
  3. @import url('http://cdn.gbtags.com/appframework/2.1/af.ui.css'); /* ui相关 */ 
  4. @import url('http://cdn.gbtags.com/appframework/2.1/icons.css'); /* 图标相关 */ 
  5.  
  6. /* 定义美化css */ 
  7. body{ 
  8.  font-family: 'microsoft yahei',Arial,sans-serif; 
  9.  margin:0; 
  10.  padding:0; 
  11.  
  12. #page1 img{ 
  13.   max-width: 100%; 

代码效果播放页面:http://www.gbtags.com/gb/rtreplayerpreview/167.htm

【编辑推荐】

  1. Native App Web App Hybrid App应用设计入门
  2. 移动应用开发指南:Native、Hybrid与HTML5
  3. Native和Hybrid哪种开发移动APP更好?
  4. Hybrid App五大误区:不要为了HTML5而Hybrid
  5. 通过Ionic构建一个简单的混合式(Hybrid)跨平台移动应用
【责任编辑:闫佳明 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

非常网管——网络应用

在网络应用越来越复杂的今天,传统的网络应用已经不能满足企业和用户的需要,这就对网络管理员、信息管理部门提出了更高的要求。本书介绍了...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× 学习达标赢Beats耳机