溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
天比較冷，在這里我就不費話了，本片還是介紹前臺布局，看下圖，用過Android手機的用戶都知道打開UC瀏覽器之后會出現下面的網址導航界面。
看到了吧，就是這兩張，一個是主界面，一個是展開Collapse后的界面。
OK，那么我們先看一下第一張圖的布局，首先先看一下head部分，引用了JqueryMobile的css以及JqueryMobile js還有一個angular.js，一個誕生于2009的web前端框架，后被google收購發展壯大。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優</label> <div > <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是左下右上的順序，別搞混了。然后我們還是讓晴天向右漂浮，看一下效果
怎么樣，還行吧。OK，我們接著往下看，看搜索部分
<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有如下這么多，你可以隨便設置。
ok，搜索做好后，它的效果如下
大家看到，放到了兩行上，那么為什么會這樣，我也不知道，下回再講。
接下來我們就要看新浪，百度等等12個站點超鏈接是怎么實現的。大家其實看過上一篇文章的話應該知道Jquery Mobile的網格系統。是的，在這里我要將屏幕分成4份。
那么我們會使用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">美團網</label> </div> </div> ...........
那其實在這里呢，也就是這樣實現的，看一下效果。
其實這里我是寫死的靜態頁面。OK，我們接著看下面的手機酷站，每日資訊等等可以折疊展開的Collapse panel的實現。
<div data-role="collapsible-set"> <div data-role="collapsible" ng-controller="websiteController"> <h4>手機酷站</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>生活服務</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>
其實在這里我們使用了Jquery Mobile中的collapsible-set，我們可以在這個set中添加我們的collapsible元素。在這里需要注意每個collapsible中只能是<h><p>標簽，如果改成其他標簽則不能被識別。OK，我們看一下效果，不同的主題，不同的感覺。
看起來雖然沒有原圖好看，但是也湊合能看，其實在這里我也嘗試找到一些接口去修改展開圖標或者展開頭部的樣式，但是發現并沒有那么好改。所以個人覺得還是沒bootstrap做的好。
ok，最后，我們再看看手機酷站展開后的內容，代碼如下
<div data-role="collapsible" ng-controller="websiteController"> <h4>手機酷站</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這個優秀的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 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，成功了，好了，今天就到這里，我們最后再看一下整體的效果。
這篇文章的代碼基本都已經貼上來了，如果誰需要源碼，請給我留言。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
