jQuery Moblie 學習之page、button、theme、panel、listview、controlgroup、navbar等（一）

時間 2019-11-20

標籤 jquery moblie 學習 page button theme panel listview controlgroup navbar 欄目 JQuery 简体版

原文原文鏈接

1.jQTouch
jQTouch與jQuery Moblie十分類似，也是一個jQuery插件，一樣也支持HTML頁面標籤驅動，實現移動設備視圖切換效果。不一樣的是它是專爲WebKit內核的瀏覽器打造的，能夠藉助該瀏覽器的專有功能對頁面進行渲染；此外，開發時所需的代碼量更少。若是開發的項目中，目標用戶羣都使用WebKit內核的瀏覽器，能夠考慮此框架。css

2.Sencha Touch
Sencha Touch是一套基於ExtJS開發的插件庫。也是針對於WebKit內核的瀏覽器打造的，不一樣的是它的開發語言不是基於HTML標籤，而是相似於客戶端的MVC風格編寫的JS代碼，相對來講，學習週期較長。html

看代碼：html5

_Layout.cshtmljquery

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">@*網站頁面的自適應，寬度爲驅動設備的寬度*@
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    @Styles.Render("~/Content/mobileCss", "~/Content/css")@*<link href="~/Content/jquery.mobile-1.4.2.css" rel="stylesheet" />*@
    @Scripts.Render("~/bundles/modernizr")@*<script src="~/Scripts/modernizr-2.6.2.js"></script>*@
    @*modernizr就是爲HTML5而生的——它是一個檢測瀏覽器對HTML5和CSS3特性支持的JS庫，經過檢測你的瀏覽器對html5/css3的支持狀況，返回特定的樣式名稱，從而能夠針對不一樣的瀏覽器寫出不一樣的樣式。*@
</head>
<body>
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")@*<script src="~/Scripts/jquery-1.8.2.js"></script>*@
    <script>
        
        //該事件在ready()以前執行,由於mobileinit事件是在加載後立刻觸發，因此你須要在Jquery Mobile加載以前綁定你的事件處理函數，
        //必須放在jQuery和jQuery Moblie之間
        $(document).on("mobileinit", function () {
            $.mobile.ajaxEnabled = true;
        });
    </script>
    @Scripts.Render("~/bundles/jquerymobile")@*<script src="~/Scripts/jquery.mobile-1.4.2.js"></script>*@
    @RenderSection("scripts", required: false)
</body>
</html>

Index.cshtmlcss3

<section data-role="page" id="foo">
    <header data-role="header" data-theme="b" data-position="fixed" data-fullscreen="true">
        @*data-position="fixed" 讓頭部和尾部固定在瀏覽器頂部
        data-fullscreen="true" 不佔位
        *@
        <h1>Page Title</h1>
    </header>
    <div role="main" class="ui-content">
        <p>Page content goes here.</p>
        <p><a href="#bar"  class="ui-btn ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-delete ui-btn-inline" data-transition="slide">go to bar</a>@*跳轉到id=」bar「頁面*@
            <a href="#bar"  class="ui-btn ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-delete ui-btn-inline" data-transition="slide">go to bar</a>
            
              <a href="#bar"  class="ui-btn ui-shadow ui-corner-all  ui-icon-delete ui-btn-inline ui-btn-icon-left" data-transition="slide" data-mini="true">go to bar</a>
        </p>
        @*    ui-btn :按鈕樣式
        ui-shadow:按鈕加上陰影
         ui-corner-all:按鈕圓角
        data-transition="slide": 跳轉的頁面效果
        ui-btn-icon-notext 讓按鈕沒有文字
        ui-icon-delete  出現刪除的圖片
         ui-btn-inline 行內不佔一行
        ui-btn-icon-left 讓圖標出如今文字的左邊
        *@
        
            <div data-role="controlgroup" data-mini="true" data-type="horizontal">
                <a href="#" class="ui-btn ui-corner-all">no icon</a>
                     <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">left</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">right</a>
            </div>
        @* data-role="controlgroup" 控件組
         data-type="horizontal" 控件排列方式
        *@
            <a href="#leftpanel3" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-btn-mini">Overlay panel</a>
        
        <div data-role="collapsible">
            <h4>Heading</h4>
            <p>I'm the collapsible content.By default I'm closed,but you can click the header to open me.</p>
        </div>

        <ul data-role="listview" data-filter="true" data-filter-placeholder="請輸入" data-inset="true">
            <li>
                <a href="#">Acura</a>
            </li>
            <li><a href="#">Audi</a></li>
            <li><a href="#">BMW</a></li>
            <li><a href="#">Cadillac</a></li>
            <li><a href="#">Ferrari</a></li>
        </ul>
        
        
        
        <div>
            
        </div>
    </div>
    <footer data-role="footer" data-theme="c" data-position="fixed">
        <div data-role="navbar" data-iconpos="left">
            <ul>
                <li><a href="#" class="ui-btn-active" data-icon="home">One</a></li>
                <li><a href="#" data-icon="gear">two</a></li>
                <li><a href="#" data-icon="back">Three</a></li>
            </ul>
        </div>
        @* 
         data-role="navbar" 導航
           data-iconpos="left" 全部的導航圖標都向左 
        *@
    </footer>
    

    <div data-role="panel" id="leftpanel3" data-position="left" data-display="overlay" data-theme="a">

        <h3>Left Panel: Overlay</h3>
        <p>This panel is positioned on the left with the overlay display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
        <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
        <a href="#demo-links" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left ui-btn-inline">Close panel</a>

    </div><!-- /leftpanel3 -->

</section>

<!-- Start of second page -->
<section data-role="page" id="bar">

    <header data-role="header">
        <h1>Bar</h1>
    </header>
    <!-- /header -->

    <div role="main" class="ui-content">
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
        <p><a href="#foo" >Back to foo</a></p>@*跳轉到id=」foo「頁面*@
        
        <p><a href="#" data-rel="back" >Back to foo</a></p>@*跳轉到id=」foo「頁面*@
      
    </div>
    <!-- /content -->

    <footer data-role="footer">
        <h4>Page Footer</h4>
    </footer>
    <!-- /footer -->
</section>
<!-- /page -->

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。