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

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

这个代码中,将使用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

责任编辑:闫佳明 来源: gbtags
相关推荐

2014-12-17 10:29:59

混合应用Hybrid App开发实战

2014-12-17 11:09:39

Hybrid AppWebView装载页面

2013-03-19 09:08:42

Hybrid App

2013-12-16 15:07:59

NativeHybrid开发移动

2011-07-19 13:26:50

iPhone PhoneGap 框架

2012-03-16 13:43:29

2010-10-09 15:01:27

PhoneGapiPhoneAndroid

2013-10-09 09:10:28

移动应用开发NativeHybrid

2012-05-14 21:08:47

Android页面布局

2015-03-28 19:18:47

线下公开课51CTO沙龙MDSA

2020-09-04 15:29:54

APP开发框架

2011-07-06 14:01:33

Monkey

2012-08-22 13:57:24

HybridHybrid开发

2014-03-28 15:36:43

移动WebJavaScript开发框架

2011-03-15 09:47:11

Java移动开发框架Oracle

2011-07-06 11:16:32

Unity3DCocos2dSparrow Fra

2014-07-08 09:37:28

跨平台Webhtml5

2022-03-28 07:52:31

H5小游戏开发教程页面基础布局

2014-09-18 09:27:32

AndroidTransition框

2014-07-28 09:15:02

开发框架
点赞
收藏

51CTO技术栈公众号