WebApp(JqueryMobile) 實戰(二)

時間 2019-11-11

原文原文鏈接

天比較冷，在這裏我就不費話了，本片仍是介紹前臺佈局，看下圖，用過Android手機的用戶都知道打開UC瀏覽器以後會出現下面的網址導航界面。
javascript

看到了吧，就是這兩張，一個是主界面，一個是展開Collapse後的界面。css

OK，那麼咱們先看一下第一張圖的佈局，首先先看一下head部分，引用了JqueryMobile的css以及JqueryMobile js還有一個angular.js，一個誕生於2009的web前端框架，後被google收購發展壯大。style部分是我本身定義的一些css樣式html

@{
    Layout = null;
}

<!DOCTYPE html>

<html ng-app>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Main</title>
    @Styles.Render("~/Content/mobileCss", "~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jquerymobile")>
    <script src="~/Scripts/angular.js" type="text/javascript"></script>
    <style type="text/css">
        .img-app {
            width: 18px;
            height: 18px;
            vertical-align: middle;
        }

        .img-app-word {
            font-family: 微軟雅黑;
            font-size: 14px;
            vertical-align: middle;
        }

        .ui-grid-x-margin {
            margin-top: 10px;
        }

        hr {
            margin: 15px 5px 0px 5px;
        }
    </style>
</head>

OK，Head沒什麼可說的。接下來咱們先看頂部天氣部分。前端

<div data-role="header" data-theme="b" data-tap-toggle="false" data-position="fixed">
            <div style="height:40px;line-height:40px;margin:0px 5px 0px 5px;font-family:微軟雅黑">
                5℃
                <label style="margin-left:5px">西安 -5℃-5℃</label>
                <label style="margin-left:5px;background-color:yellowgreen;border-radius:20%">45優</label>
                <div style="float:right;">
                    <img src="~/Image/Default/sunny.jpg" height="20" width="20" />晴
                </div>
            </div>
        </div>

天氣部分，咱們採用了藍底白字的主題(data-theme="b")，而且是始終顯示在頁面上的，不會隨着滾動條的拉動而消失。OK，這裏咱們爲了使得文字在div中居中，咱們設置height和line-height的值都是40px。而後距左右各5px，html中的margin是上右下左的順序，而silverlight是左下右上的順序，別搞混了。而後咱們仍是讓晴天向右漂浮，看一下效果java

怎麼樣，還行吧。OK，咱們接着往下看，看搜索部分jquery

<div>
                    <input type="search" name="search" id="search" placeholder="輸入關鍵詞" />
                    <a href="#anylink" data-theme="b" data-role="button" data-icon="search">搜索</a>
                </div>

很簡單，一個input type="search"，並設置未輸入前的文字是"輸入關鍵詞"。而後search按鈕實際上是一個超連接設置其data-role="button"，再設置icon就好了。icon有以下這麼多，你能夠隨便設置。angularjs

ok，搜索作好後，它的效果以下web

你們看到，放到了兩行上，那麼爲何會這樣，我也不知道，下回再講。json

接下來咱們就要看新浪，百度等等12個站點超連接是怎麼實現的。你們其實看過上一篇文章的話應該知道Jquery Mobile的網格系統。是的，在這裏我要將屏幕分紅4份。bootstrap

那麼咱們會使用ui-grid-c這個css將div分紅四份。

<div class="ui-grid-c ui-grid-x-margin">
                    <div class="ui-block-a">
                        <img src="~/Image/Default/sina.jpg" class="img-app" />
                        <label class="img-app-word">新浪</label>
                    </div>
                    <div class="ui-block-b">
                        <img src="~/Image/Default/baidu.jpg" class="img-app" />
                        <label class="img-app-word">百度</label>
                    </div>
                    <div class="ui-block-c">
                        <img src="~/Image/Default/nba.jpg" class="img-app" style="border-radius:30%" />
                        <label class="img-app-word">NBA</label>
                    </div>
                    <div class="ui-block-d">
                        <img src="~/Image/Default/taobao.jpg" class="img-app" />
                        <label class="img-app-word">淘寶</label>
                    </div>
                </div>
                <div class="ui-grid-c ui-grid-x-margin">
                    <div class="ui-block-a">
                        <img src="~/Image/Default/amazon.jpg" class="img-app" />
                        <label class="img-app-word">亞馬遜</label>
                    </div>
                    <div class="ui-block-b">
                        <img src="~/Image/Default/ganji.jpg" class="img-app" />
                        <label class="img-app-word">趕集</label>
                    </div>
                    <div class="ui-block-c">
                        <img src="~/Image/Default/58.jpg" class="img-app" style="border-radius:30%" />
                        <label class="img-app-word">同城</label>
                    </div>
                    <div class="ui-block-d">
                        <img src="~/Image/Default/meituan.jpg" class="img-app" />
                        <label class="img-app-word">美團網</label>
                    </div>
                </div> ...........

那其實在這裏呢，也就是這樣實現的，看一下效果。

其實這裏我是寫死的靜態頁面。OK，咱們接着看下面的手機酷站，每日資訊等等能夠摺疊展開的Collapse panel的實現。

<div data-role="collapsible-set">
                <div data-role="collapsible" ng-controller="websiteController">
                    <h3>手機酷站</h3>
                    <p>
                        <div class="ui-grid-c" style="text-align:center;">
                            <div style="margin-top:10px" class="ui-block-`website`.`block`" ng-repeat="website in webistes">
                                <a href="`website`.`link`" style="color: black; cursor: pointer; text-decoration: none">
                                    <label class="img-app-word">`website`.`name`</label>
                                </a>
                            </div>
                        </div>
                    </p>
                </div>
                <div data-role="collapsible">
                    <h5>每日資訊</h5>
                    <p>Collapsible content</p>
                </div>
                <div data-role="collapsible">
                    <h3>生活服務</h3>
                    <p>Collapsible content</p>
                </div>
                <div data-role="collapsible">
                    <h3>天貓精選</h3>
                    <p>Collapsible content</p>
                </div>
                <div data-role="collapsible">
                    <h3>輕鬆大雜燴</h3>
                    <p>Collapsible content</p>
                </div>
            </div>

其實在這裏咱們使用了Jquery Mobile中的collapsible-set，咱們能夠在這個set中添加咱們的collapsible元素。在這裏須要注意每一個collapsible中只能是<h><p>標籤，若是改爲其餘標籤則不能被識別。OK，咱們看一下效果，不一樣的主題，不一樣的感受。

看起來雖然沒有原圖好看，可是也湊合能看，其實在這裏我也嘗試找到一些接口去修改展開圖標或者展開頭部的樣式，可是發現並無那麼好改。因此我的以爲仍是沒bootstrap作的好。

ok，最後，咱們再看看手機酷站展開後的內容，代碼以下

<div data-role="collapsible" ng-controller="websiteController">
                    <h3>手機酷站</h3>
                    <p>
                        <div class="ui-grid-c" style="text-align:center;">
                            <div style="margin-top:10px" class="ui-block-`website`.`block`" ng-repeat="website in webistes">
                                <a href="`website`.`link`" style="color: black; cursor: pointer; text-decoration: none">
                                    <label class="img-app-word">`website`.`name`</label>
                                </a>
                            </div>
                        </div>
                    </p>
                </div>

在這裏咱們使用了angular.js這個優秀的js前端框架。你們注意到咱們在頁面的html標籤上標記了ng-app，這樣該頁面才能被angular.js識別。而後咱們在div上又標記了ng-controller="websiteController"，這個標記是告訴angular.js當加載該標籤時，去調用websiteController這個js控制器。那麼這個js控制器在哪呢，在頁面底部。

<script type="text/javascript">
        function websiteController($scope) {
            $scope.webistes =
                [
                    { block: "a", name: "1號店", link: "http://www.baidu.com" }, { block: "b", name: "天貓", link: "http://www.baidu.com" },
                    { block: "c", name: "搶車票", link: "http://www.baidu.com" }, { block: "d", name: "小米", link: "http://www.baidu.com" },
                    { block: "a", name: "惟品會", link: "http://www.baidu.com" }, { block: "b", name: "QQ空間", link: "http://www.baidu.com" },
                    { block: "c", name: "樂訊", link: "http://www.baidu.com" }, { block: "d", name: "搜房網", link: "http://www.baidu.com" },
                    { block: "a", name: "汽車之家", link: "http://www.baidu.com" }, { block: "b", name: "去哪兒", link: "http://www.baidu.com" },
                    { block: "c", name: "智聯招聘", link: "http://www.baidu.com" }, { block: "d", name: "太平洋車", link: "http://www.baidu.com" },
                    { block: "a", name: "攜程", link: "http://www.baidu.com" }, { block: "b", name: "百姓網", linhk: "ttp://www.baidu.com" },
                    { block: "c", name: "UC書城", link: "http://www.baidu.com" }, { block: "d", name: "京東", link: "http://www.baidu.com" }
                ];
        }
    </script>

在這裏咱們定義了網站以及鏈接，還有前面的block是什麼呢，實際上是爲了佈局用的(ui-block-x)。在這裏咱們在做用域中定義了一個json數組，而後這個json數據在標記ng-controller的div被加載的時候被循環加入到該div中的一個div中。

<div style="margin-top:10px" class="ui-block-`website`.`block`" ng-repeat="website in webistes">

這段代碼含義就是循環json對象數組(ng-repeat="website in webistes")，而後根據json數組中的block屬性(class="ui-block-`website`.`block`")，來決定加入哪個網格。其實在angularjs中，雙大括號表示輸出，因此咱們最後的元素生成後，查看源碼以下

你們注意到，其實就是ui-block-a,ui-block-b....，你們可能在這裏有個疑問，爲何全部的ui-block-x都在一個ui-grid-c中還能顯示正常，不是說分四列嗎，這都塞了16列了。你們注意，若是是下一批ui-block-a....，那麼它會從新起一行，不會在一行。OK，咱們看一下效果

OK，成功了，好了，今天就到這裏，咱們最後再看一下總體的效果。

這篇文章的代碼基本都已經貼上來了，若是誰須要源碼，請給我留言。