WebApp(JqueryMobile)實(shí)戰(zhàn)(二)-創(chuàng)新互聯(lián)

天比較冷，在這里我就不費(fèi)話了，本片還是介紹前臺布局，看下圖，用過Android手機(jī)的用戶都知道打開UC瀏覽器之后會出現(xiàn)下面的網(wǎng)址導(dǎo)航界面。

在同安等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站制作、網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需網(wǎng)站建設(shè),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),全網(wǎng)整合營銷推廣,外貿(mào)營銷網(wǎng)站建設(shè),同安網(wǎng)站建設(shè)費(fèi)用合理。

WebApp(JqueryMobile) 實(shí)戰(zhàn)(二)

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

OK，那么我們先看一下第一張圖的布局，首先先看一下head部分，引用了JqueryMobile的css以及JqueryMobile js還有一個angular.js，一個誕生于2009的web前端框架，后被google收購發(fā)展壯大。style部分是我自己定義的一些css樣式

@{
    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 >
                5℃
                <label >西安 -5℃-5℃</label>
                <label >45優(yōu)</label>
                <div >
                    <img src="~/Image/Default/sunny.jpg" height="20" width="20" />晴
                </div>
            </div>
        </div>

天氣部分，我們采用了藍(lán)底白字的主題(data-theme="b")，并且是始終顯示在頁面上的，不會隨著滾動條的拉動而消失。OK，這里我們?yōu)榱耸沟梦淖衷赿iv中居中，我們設(shè)置height和line-height的值都是40px。然后距左右各5px，html中的margin是上右下左的順序，而silverlight是左下右上的順序，別搞混了。然后我們還是讓晴天向右漂浮，看一下效果

WebApp(JqueryMobile) 實(shí)戰(zhàn)(二)

怎么樣，還行吧。OK，我們接著往下看，看搜索部分

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

很簡單，一個input type="search"，并設(shè)置未輸入前的文字是"輸入關(guān)鍵詞"。然后search按鈕其實(shí)是一個超鏈接設(shè)置其data-role="button"，再設(shè)置icon就行了。icon有如下這么多，你可以隨便設(shè)置。

WebApp(JqueryMobile) 實(shí)戰(zhàn)(二)

ok，搜索做好后，它的效果如下

WebApp(JqueryMobile) 實(shí)戰(zhàn)(二)

大家看到，放到了兩行上，那么為什么會這樣，我也不知道，下回再講。

接下來我們就要看新浪，百度等等12個站點(diǎn)超鏈接是怎么實(shí)現(xiàn)的。大家其實(shí)看過上一篇文章的話應(yīng)該知道Jquery Mobile的網(wǎng)格系統(tǒng)。是的，在這里我要將屏幕分成4份。

WebApp(JqueryMobile) 實(shí)戰(zhàn)(二)

那么我們會使用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"  />
                        <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"  />
                        <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">美團(tuán)網(wǎng)</label>
                    </div>
                </div> ...........

那其實(shí)在這里呢，也就是這樣實(shí)現(xiàn)的，看一下效果。

WebApp(JqueryMobile) 實(shí)戰(zhàn)(二)

其實(shí)這里我是寫死的靜態(tài)頁面。OK，我們接著看下面的手機(jī)酷站，每日資訊等等可以折疊展開的Collapse panel的實(shí)現(xiàn)。

<div data-role="collapsible-set">
                <div data-role="collapsible" ng-controller="websiteController">
                    <h4>手機(jī)酷站</h4>
                    <p>
                        <div class="ui-grid-c" >
                            <div  class="ui-block-`website`.`block`" ng-repeat="website in webistes">
                                <a href="`website`.`link`" >
                                    <label class="img-app-word">`website`.`name`</label>
                                </a>
                            </div>
                        </div>
                    </p>
                </div>
                <div data-role="collapsible">
                    <h6>每日資訊</h6>
                    <p>Collapsible content</p>
                </div>
                <div data-role="collapsible">
                    <h4>生活服務(wù)</h4>
                    <p>Collapsible content</p>
                </div>
                <div data-role="collapsible">
                    <h4>天貓精選</h4>
                    <p>Collapsible content</p>
                </div>
                <div data-role="collapsible">
                    <h4>輕松大雜燴</h4>
                    <p>Collapsible content</p>
                </div>
            </div>

其實(shí)在這里我們使用了Jquery Mobile中的collapsible-set，我們可以在這個set中添加我們的collapsible元素。在這里需要注意每個collapsible中只能是<h><p>標(biāo)簽，如果改成其他標(biāo)簽則不能被識別。OK，我們看一下效果，不同的主題，不同的感覺。

WebApp(JqueryMobile) 實(shí)戰(zhàn)(二)

看起來雖然沒有原圖好看，但是也湊合能看，其實(shí)在這里我也嘗試找到一些接口去修改展開圖標(biāo)或者展開頭部的樣式，但是發(fā)現(xiàn)并沒有那么好改。所以個人覺得還是沒bootstrap做的好。

ok，最后，我們再看看手機(jī)酷站展開后的內(nèi)容，代碼如下

<div data-role="collapsible" ng-controller="websiteController">
                    <h4>手機(jī)酷站</h4>
                    <p>
                        <div class="ui-grid-c" >
                            <div  class="ui-block-`website`.`block`" ng-repeat="website in webistes">
                                <a href="`website`.`link`" >
                                    <label class="img-app-word">`website`.`name`</label>
                                </a>
                            </div>
                        </div>
                    </p>
                </div>

在這里我們使用了angular.js這個優(yōu)秀的js前端框架。大家注意到我們在頁面的html標(biāo)簽上標(biāo)記了ng-app，這樣該頁面才能被angular.js識別。然后我們在div上又標(biāo)記了ng-controller="websiteController"，這個標(biāo)記是告訴angular.js當(dāng)加載該標(biāo)簽時，去調(diào)用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: "搜房網(wǎng)", link: "http://www.baidu.com" },
                    { block: "a", name: "汽車之家", link: "http://www.baidu.com" }, { block: "b", name: "去哪兒", link: "http://www.baidu.com" },
                    { block: "c", name: "智聯(lián)招聘", link: "http://www.baidu.com" }, { block: "d", name: "太平洋車", link: "http://www.baidu.com" },
                    { block: "a", name: "攜程", link: "http://www.baidu.com" }, { block: "b", name: "百姓網(wǎng)", linhk: "ttp://www.baidu.com" },
                    { block: "c", name: "UC書城", link: "http://www.baidu.com" }, { block: "d", name: "京東", link: "http://www.baidu.com" }
                ];
        }
    </script>

在這里我們定義了網(wǎng)站以及連接，還有前面的block是什么呢，其實(shí)是為了布局用的(ui-block-x)。在這里我們在作用域中定義了一個json數(shù)組，然后這個json數(shù)據(jù)在標(biāo)記ng-controller的div被加載的時候被循環(huán)加入到該div中的一個div中。

<div  class="ui-block-`website`.`block`" ng-repeat="website in webistes">

這段代碼含義就是循環(huán)json對象數(shù)組(ng-repeat="website in webistes")，然后根據(jù)json數(shù)組中的block屬性(class="ui-block-`website`.`block`")，來決定加入哪一個網(wǎng)格。其實(shí)在angularjs中，雙大括號表示輸出，所以我們最后的元素生成后，查看源碼如下

WebApp(JqueryMobile) 實(shí)戰(zhàn)(二)

大家注意到，其實(shí)就是ui-block-a,ui-block-b....，大家可能在這里有個疑問，為什么所有的ui-block-x都在一個ui-grid-c中還能顯示正常，不是說分四列嗎，這都塞了16列了。大家注意，如果是下一批ui-block-a....，那么它會重新起一行，不會在一行。OK，我們看一下效果

WebApp(JqueryMobile) 實(shí)戰(zhàn)(二)

OK，成功了，好了，今天就到這里，我們最后再看一下整體的效果。

WebApp(JqueryMobile) 實(shí)戰(zhàn)(二)

這篇文章的代碼基本都已經(jīng)貼上來了，如果誰需要源碼，請給我留言。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：WebApp(JqueryMobile)實(shí)戰(zhàn)(二)-創(chuàng)新互聯(lián)
當(dāng)前地址：http://aaarwkj.com/article16/jdcdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、云服務(wù)器、標(biāo)簽優(yōu)化、手機(jī)網(wǎng)站建設(shè)、微信公眾號、面包屑導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

WebApp(JqueryMobile)實(shí)戰(zhàn)(二)-創(chuàng)新互聯(lián)