Hybrid development: AppFrameworks mobile development framework defines page layout

Hybrid development: AppFrameworks mobile development framework defines page layout

In this code, we will use the appframeworks framework to build a super simple image preview application, using basic page definitions. It does not require you to write any independent JavaScript code. It is super fast and cool, and is very suitable for everyone to develop mobile applications based on hybrid mode.

  1. < div   id = "afui" >  
  2.  
  3. < div   id = "header" >  
  4. <!--
  5. You don't need to define it here, af will automatically render it as follows:
  6. <   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. <!-- Define Home Page -->  
  14. < div   id = "main"   class = "panel"   data-title = "Home"   selected = "true" >  
  15.        
  16. <!-- Define a list -->  
  17. < ul   class = "list" >  
  18. < li > < a   href = "#page1"   class = "icon picture" > Page 1 </ a > </ li >  
  19. < li > < a   href = "#page2"   class = "icon picture" > Page 2 </ a > </ li >  
  20. </ ul >  
  21.        
  22. </ div >  
  23.      
  24. <!-- Definition page 1 -->  
  25. < div   id = "page1"   class = "panel"   data-title = "Page 1" >  
  26.        
  27. <!-- Define a picture list here -->  
  28. < ul   class = "list" >  
  29.          
  30. <!-- Add a scroll to bottom button -->  
  31. < li >  
  32. <   href = "#"   class = "icon down"   onclick = "$.ui.scrollToBottom('page1');" > Scroll to the bottom </ a >  
  33. </ li >  
  34.          
  35. < li > < img   src = "http://www.gbtags.com/gb/laitu/500x200&text=palette/222222/ffffff" > </ li >  
  36. < li > < img   src = "http://www.gbtags.com/gb/laitu/500x200&text=palette/444444/ffffff" > </ li >  
  37. < li > < img   src = "http://www.gbtags.com/gb/laitu/500x200&text=palette/666666/ffffff" > </ li >  
  38. < li > < img   src = "http://www.gbtags.com/gb/laitu/500x200&text=palette/888888/ffffff" > </ li >  
  39. < li > < img   src = "http://www.gbtags.com/gb/laitu/500x200&text=palette/aaaaaa/ffffff" > </ li >  
  40. < li > < img   src = "http://www.gbtags.com/gb/laitu/500x200&text=palette/cccccc/bbbbbb" > </ li >  
  41. < li > < img   src = "http://www.gbtags.com/gb/laitu/500x200&text=palette/dddddd/aaaaaa" > </ li >  
  42. < li > < img   src = "http://www.gbtags.com/gb/laitu/500x200&text=palette/eeeeee/999999" > </ li >  
  43.          
  44. <!-- Add a scroll to top button -->  
  45. < li >  
  46. <   href = "#"   class = "icon up"   onclick = "$.ui.scrollToTop('page1');" > Scroll to the bottom </ a >  
  47. </ li >  
  48. </ ul >  
  49.        
  50. </ div >  
  51.      
  52. <!-- Definition page 2 -->  
  53. < div   id = "page2"   class = "panel"   data-title = "Page 2" >  
  54. <!-- Image Content -->  
  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. <!-- Define the navigation bar -->  
  64. <   href = "#main"   class = "icon home" > Home </ a >  
  65. <   href = "#page1"   class = "icon picture" > Page 1 </ a >  
  66. <   href = "#page2"   class = "icon picture" > Page 2 </ a >  
  67. </ div >  
  68.    
  69. </ div >  
  70.  
  71.  
  72. <!-- Selector Class Library -->  
  73. < script   src = "http://cdn.gbtags.com/appframework/2.1/appframework.min.js" > </ script >  
  74. <!-- Related UI class library -->  
  75. < script   src = "http://cdn.gbtags.com/appframework/2.1/appframework.ui.min.js" > </ script >  
  76. <!-- In order to better simulate the trigger scrolling of mobile devices in desktop browsers, add a plug-in provided by ap -->  
  77. < script   src = "http://cdn.gbtags.com/appframework/2.1/af.desktopBrowsers.js" > </ script >  

Then:

  1. /* Import af related CSS */  
  2.  
  3. @ import url( 'http://cdn.gbtags.com/appframework/2.1/af.ui.css' ); /* ui related */  
  4. @ import url( 'http://cdn.gbtags.com/appframework/2.1/icons.css' ); /* Icon related */  
  5.  
  6. /*Define beautify css */  
  7. body{
  8. font-family: 'microsoft yahei' ,Arial,sans-serif;
  9. margin:0;
  10. padding:0;
  11. }
  12.  
  13. #page1 img{  
  14. max-width: 100%;
  15. }

Code effect playback page: http://www.gbtags.com/gb/rtreplayerpreview/167.htm

<<:  What can we learn from Apple's 2014?

>>:  The ill-fated fate of the movie "Steve Jobs" is enough to make another movie

Recommend

How to do a good competitive product analysis? What are the common methods?

There are many articles on the Internet about wri...

Ten tips to speed up Android app building

The build speed of the application will directly ...

These mobile phone functions and skills can solve holiday battery anxiety

Although there has not been a revolutionary impro...

Behind-the-scenes heroes: Today’s subtitle groups

If you are a fan of American dramas or Japanese a...

B2B Marketing White Paper, How to Plan the Content?

For 2B companies, the importance of content marke...

Brand loyalty drops to 16%; S8 failure puts Samsung in trouble in China

The Galaxy S8 was seen by DJ Koh, the head of Sam...

Zhihu operation full set of detailed operation guide

The full text is about 5,000 words, and it takes ...

Solid info! A brief discussion on 4 ideas for community user growth

Well, let’s start from the small circle again. Re...

YOGA Goddess Training Camp-Slimming Yoga Class

Course catalog: Lesson 01: If you don’t breathe co...

The rules of selling goods through short video live streaming!

In my experience of creating short videos to prom...

Sharing experience in designing high-conversion e-commerce detail pages!

This article will talk about conversion. Let’s ta...

Tik Tok promotion, tips on selling products in home page window!

For individuals who use Douyin accounts, the mone...