To be or not to be.That is a question!

---源于莎士比亚的《哈姆雷特》

导航

jquerymobile UI使用 

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

</head>
<body>
<div data-role="page" id="home">
    <div data-theme="a" data-role="header">
        <h3>
            Header
        </h3>
    </div>
    <div data-role="content">
        <div style="">
            <img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2011/04/26/lakers/Lakers01.jpg">
        </div>
        <div data-role="navbar" data-iconpos="top" data-position="fixed">
            <ul>
                <li>
                    <a href="#page1" data-transition="flow" data-theme="a" data-icon="grid">
                        About Us
                    </a>
                </li>
                <li>
                    <a href="#page2" data-transition="flow" data-theme="a" data-icon="star">
                        Contact
                    </a>
                </li>
                <li>
                    <a href="#page3" data-transition="flow" data-theme="a" data-icon="info">
                        History
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="page1">
    <div data-theme="a" data-role="header">
        <a data-role="button" data-transition="flow" href="#home" data-icon="home"
        data-iconpos="left" class="ui-btn-right">
            Home
        </a>
        <h3>
            Header
        </h3>
    </div>
    <div data-role="content">
        <div style="">
            <img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2011/04/26/lakers/Lakers02.jpg">
        </div>
        <ul data-role="listview" data-divider-theme="a" data-inset="true">
            <li data-role="list-divider" role="heading">
                Divider
            </li>
            <li data-theme="">
                <a href="#page1" data-transition="slide">
                    Button
                </a>
            </li>
            <li data-theme="">
                <a href="#page1" data-transition="slide">
                    Button
                </a>
            </li>
            <li data-theme="">
                <a href="#page1" data-transition="slide">
                    Button
                </a>
            </li>
            <li data-role="list-divider" role="heading">
                Divider
            </li>
        </ul>
        <div data-role="collapsible-set">
            <div data-role="collapsible">
                <h3>
                    Section Header
                </h3>
                <div style=" text-align:center">
                    <img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
                </div>
            </div>
        </div>
        <div data-role="collapsible-set">
            <div data-role="collapsible">
                <h3>
                    Section Header
                </h3>
                <div style=" text-align:center">
                    <img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
                </div>
            </div>
        </div>
        <div data-role="collapsible-set">
            <div data-role="collapsible">
                <h3>
                    Section Header
                </h3>
                <div style=" text-align:center">
                    <img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
                </div>
            </div>
        </div>
        <div data-role="navbar" data-iconpos="top" data-position="fixed">
            <ul>
                <li>
                    <a href="#page1" data-transition="flow" data-theme="a" data-icon="grid">
                        About Us
                    </a>
                </li>
                <li>
                    <a href="#page2" data-transition="flow" data-theme="a" data-icon="star">
                        Contact
                    </a>
                </li>
                <li>
                    <a href="#page3" data-transition="flow" data-theme="a" data-icon="info">
                        History
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-theme="a" data-role="header">
        <a data-role="button" data-transition="flow" href="#home" data-icon="home"
        data-iconpos="left" class="ui-btn-right">
            Home
        </a>
        <h3>
            Header
        </h3>
    </div>
    <div data-role="content">
        <div style="">
            <img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2011/04/26/lakers/Lakers03.jpg">
        </div>
        <ul data-role="listview" data-divider-theme="a" data-inset="true">
            <li data-role="list-divider" role="heading">
                Divider
            </li>
            <li data-theme="">
                <a href="#page1" data-transition="slide">
                    Button
                </a>
            </li>
            <li data-theme="">
                <a href="#page1" data-transition="slide">
                    Button
                </a>
            </li>
            <li data-theme="">
                <a href="#page1" data-transition="slide">
                    Button
                </a>
            </li>
            <li data-role="list-divider" role="heading">
                Divider
            </li>
        </ul>
        <div data-role="collapsible-set">
            <div data-role="collapsible">
                <h3>
                    Section Header
                </h3>
                <div style=" text-align:center">
                    <img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
                </div>
            </div>
        </div>
        <div data-role="collapsible-set">
            <div data-role="collapsible">
                <h3>
                    Section Header
                </h3>
                <div style=" text-align:center">
                    <img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
                </div>
            </div>
        </div>
        <div data-role="collapsible-set">
            <div data-role="collapsible">
                <h3>
                    Section Header
                </h3>
                <div style=" text-align:center">
                    <img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
                </div>
            </div>
        </div>
        <div data-role="navbar" data-iconpos="top" data-position="fixed">
            <ul>
                <li>
                    <a href="#page1" data-transition="flow" data-theme="a" data-icon="grid">
                        About Us
                    </a>
                </li>
                <li>
                    <a href="#page2" data-transition="flow" data-theme="a" data-icon="star">
                        Contact
                    </a>
                </li>
                <li>
                    <a href="#page3" data-transition="flow" data-theme="a" data-icon="info">
                        History
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="page3">
    <div data-theme="a" data-role="header">
        <a data-role="button" data-transition="flow" href="#home" data-icon="home"
        data-iconpos="left" class="ui-btn-right">
            Home
        </a>
        <h3>
            Header
        </h3>
    </div>
    <div data-role="content">
        <div style="">
            <img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2011/04/26/lakers/Lakers04.jpg">
        </div>
        <ul data-role="listview" data-divider-theme="a" data-inset="true">
            <li data-role="list-divider" role="heading">
                Divider
            </li>
            <li data-theme="">
                <a href="#page1" data-transition="slide">
                    Button
                </a>
            </li>
            <li data-theme="">
                <a href="#page1" data-transition="slide">
                    Button
                </a>
            </li>
            <li data-theme="">
                <a href="#page1" data-transition="slide">
                    Button
                </a>
            </li>
            <li data-role="list-divider" role="heading">
                Divider
            </li>
        </ul>
        <div data-role="collapsible-set">
            <div data-role="collapsible">
                <h3>
                    Section Header
                </h3>
                <div style=" text-align:center">
                    <img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
                </div>
            </div>
        </div>
        <div data-role="collapsible-set">
            <div data-role="collapsible">
                <h3>
                    Section Header
                </h3>
                <div style=" text-align:center">
                    <img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
                </div>
            </div>
        </div>
        <div data-role="collapsible-set">
            <div data-role="collapsible">
                <h3>
                    Section Header
                </h3>
                <div style=" text-align:center">
                    <img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
                </div>
            </div>
        </div>
        <div data-role="navbar" data-iconpos="top" data-position="fixed">
            <ul>
                <li>
                    <a href="#page1" data-transition="flow" data-theme="a" data-icon="grid">
                        About Us
                    </a>
                </li>
                <li>
                    <a href="#page2" data-transition="flow" data-theme="a" data-icon="star">
                        Contact
                    </a>
                </li>
                <li>
                    <a href="#page3" data-transition="flow" data-theme="a" data-icon="info">
                        History
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

 

posted on 2013-06-18 16:40  Ijavascript  阅读(371)  评论(0)  编辑  收藏  举报