HTML5 & jQuery Mobile 快速開發Cross App 網站 : jQuery Mobile 跨平台網站 -header, footer, navbar,button

jQuery Mobile是一個能讓你快速開發出跨手機平台的網站好工具

示範如何利用jQuery Mobile官網上的工具快速撰寫出html 進而套用在專案上

使用說明

下列範例使用到項目如下
Page Header, Native bar , Page Footer , Button , HyperLink

幾個重點提示

需先宣告網頁為HTML5格式<!DOCTYPE html> <html>
引用jQueryMobile 官方的 js css
每頁body中開始及結尾需使用jquery mobile規定語法 <div data-role="page" id="page1"></div>
每個item 有相對應的data-role
若要變更theme jquery mobile 提供了六種預設的樣式分別為"","a","b","c","d","e"

Page Header

<div data-theme="b" data-role="header">

<h3>

Header

</h3>

</div>

Page Footer

<div data-theme="a" data-role="footer">
<h3>
Header
</h3>
</div>

Navbar
指定data-iconpos變更button icon的位置
指定data-icon設定button的小圖示標準圖示可參考Button Icon

<div data-role="navbar" data-iconpos="right">
<ul>
<li>
<a href="#page1" data-theme="" data-icon="arrow-r">
Button
</a>
</li>
<li>
<a href="#page1" data-theme="" data-icon="plus">
Button
</a>
</li>
</ul>
</div>

Button

指定data-iconpos變更button icon的位置
指定data-icon設定button的小圖示標準圖示可參考Button Icon指定data- transition 變更button換頁效果
各種效果請參考transition

<div data-role="content" style="padding: 15px">
<a data-role="button" data-inline="true" data-transition="slideup" data-theme="a"
href="#page2" data-icon="check" data-iconpos="right">
Button
</a>
</div>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
        </title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <style>
            /* App custom styles */
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.js">
        </script>
    </head>
    <body>
        <!-- Home -->
        <div data-role="page" id="page1">
            <div data-theme="a" data-role="header">
                <h3>
                    Header
                </h3>
            </div>
            <div data-role="content" style="padding: 15px">
                <div data-role="navbar" data-iconpos="top">
                    <ul>
                        <li>
                            <a href="#page1" data-theme="" data-icon="">
                                Item1
                            </a>
                        </li>
                        <li>
                            <a href="#page1" data-theme="" data-icon="arrow-l">
                                Item2
                            </a>
                        </li>
                    </ul>
                </div>
                
                <a data-role="button" data-transition="fade" href="#page1">
                    按鈕
                </a>
                <div>
                    <a href="http://jquerymobile.com" data-transition="fade">
                        jQuery Mobile
                    </a>
                </div>
            </div>
            <div data-theme="a" data-role="footer" data-position="fixed">
                <h3>
                    Footer
                </h3>
            </div>
        </div>
        <script>
            //App custom javascript
        </script>
    </body>
</html>

HTML5 & jQuery Mobile 快速開發Cross App 網站

2012年9月14日星期五

jQuery Mobile 跨平台網站 -header, footer, navbar,button

沒有留言:

張貼留言

2012年9月14日 星期五

jQuery Mobile 跨平台網站 -header, footer, navbar,button

沒有留言:

張貼留言

2012年9月14日星期五