1.jQuery mobile 不是新的語言也不是新的javascript library，他還是jquery，是類似jQuery ui東西。
2.他主要在針對移動終端（android、ios等等）作介面設計，可以很快速的發展手機版網頁或應用。 廢話不多說， 直接來一個簡單的範例
<!DOCTYPE html><html> <head> <title>jQuery Mobile Tutorial on Codeforest.net</title>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js "></script></head><body><div data-role="page"> <div data-role="header"> <h1>Title</h1> </div><!-- /header --> <div data-role="content"> <p>The content</p> </div><!-- /content --> <div data-role="footer"> <h4>The Footer</h4> </div><!-- /footer --></div><!-- /page --></body></html>jquery mobile 主要是以 data-role="" 的tag做設定，可以快速的做出手機版網頁的介面。
範例中的data-role有幾個
1. page ： 可以很快速的做出分頁
例如
<div data-role="page" id="page1"> <div data-role="content"> <a href="#page2">to page2</a> </div><!-- /content --></div>
<div data-role="page" id="page2"> <div data-role="content"> <a href="#page1">to page1</a> </div><!-- /content --></div>
這樣預設的狀況，會只顯示page1 ，按下連結to page2會直接切換到page2
切換之前也可以設定一些效果，這就不在這邊說明了
2. header
3.content
4.footer
2、3、4分別就是圖片中上中下的位置
沒有留言:
張貼留言