練習環境
練習 jQuery Mobile 建議使用 jsfiddle ，關於jsfiddle 介紹請點我。
進入 jsfiddle 後，先設定 framework ，選擇 jQuery 和勾選 jQuery Mobile ，如下圖：
接下來，新增資源，設定jQuery Mobile 所需的 CSS，
將 http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css 貼至欄位中，按下 + 號，如下圖：
範例：Hello World
點選 JSFIDDLE 的 HTML，<body> 標籤內介紹基本的撰寫架構。
- 網頁內容用 <div data-role="page"> ... </div> 包覆。
- 基本網頁內容包含：
- 標頭 <div data-role="header"> ... </div>
- 內容 <div data-role="content"> ... </div>
- 頁尾 <div data-role="footer"> ... <div>
重點摘錄
- Each link or form from here will pull a new page in via Ajax to support the animated page transitions.
- The page, header, content, and footer data-role elements are mostly helpful for providing some basic formatting and structure.
沒有留言:
張貼留言