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

其實(shí)WebApp這個(gè)版塊已經(jīng)放置一段時(shí)間了，但是一直沒(méi)有寫(xiě)文章，那是因?yàn)槲疫€在學(xué)習(xí)中。今天的話(huà)，我們就來(lái)寫(xiě)一篇關(guān)于布局的，以前在沒(méi)有BootStrap，Jquery EasyUI，Jquery Mobile之前不論是做web項(xiàng)目還是web 移動(dòng)站點(diǎn)都是那么費(fèi)勁，尤其是我這種學(xué)不會(huì)css的人，實(shí)在是搞不了前臺(tái)。OK，廢話(huà)不多說(shuō)，我們來(lái)看一下今天要仿制的頁(yè)面，手機(jī)頭條網(wǎng)。

看到了吧，這個(gè)界面如果用BootStrap的話(huà)可能更簡(jiǎn)單一些，因?yàn)樗菃渭兊娜谢蛘邇闪胁季郑肂ootstrap的網(wǎng)格系統(tǒng)可以很好的布局出來(lái)。那今天的話(huà)還是用Jquery Mobile css。

首先看一下最頂端的頭部，我的代碼如下

@section Header
{
    <div data-role="header" data-theme="f" data-tap-toggle="false" data-position="fixed" data-fullscreen="false">
        <div class="ui-grid-b">
            <div class="ui-block-a"><img class="img-corner"  width="40" height="40" src="~/Image/IMG_20140531_170818.jpg" /></div>
            <h4 class="ui-block-b" >今日頭條<img height="25" width="25" src="~/Image/ic_popup_sync_6.png" /></h4>
            <div class="ui-block-c" ><img src="../Image/ic_menu_search.png" width="30" height="30" /></div>
        </div>
        <div data-role="navbar" >
            <ul>
                <li><a class="a-header" href="#">推薦</a></li>
                <li><a class="a-header" href="#">熱點(diǎn)</a></li>
                <li><a class="a-header" href="#">社會(huì)</a></li>
                <li><a class="a-header" href="#">娛樂(lè)</a></li>
                <li><a class="a-header" href="#">科技</a></li>
            </ul>
        </div>
    </div>
}

其實(shí)這里我們使用Jquery Mobile css中的一些樣式及屬性。我們看一下data-role="header"

在這里我們?cè)O(shè)置頭部不會(huì)在點(diǎn)擊屏幕的時(shí)候縮回去data-tap-toggle="false"，這樣當(dāng)頁(yè)面內(nèi)容隨著滾動(dòng)條上移時(shí)，會(huì)被頭部蓋住。data-theme="f"這個(gè)是我自己定義的主題，主題可以是a-z。而Jquery Mobile css默認(rèn)只提供了五種主題。

所以f需要自己定義，我們來(lái)看一下

.ui-bar-f {
    background-color: red;
    color: white;
    font-weight: bold;
    height:45px;
    font-family:微軟雅黑;
}

.img-corner {
    border-radius: 50%;
}

.a-header {
    text-decoration:none;
    color:white;
}

body {
    font-family:微軟雅黑;
    background-color:white;
}

.img-shrink {
    height:150px;
    width:100%;
    border:1px solid white;
}

.news-footer {
    font-size:10px;
}

第一個(gè)css就是我們自己定義的主題，必須是以u(píng)i-bar-[a-z]來(lái)命名。頭部的話(huà)在這里共分了三列，因?yàn)槲覀兊牡谝粋€(gè)div是 <div class="ui-grid-b">這個(gè)css就把屏幕分成了相等的三份。

然后我們?cè)诿恳环莘盼覀兊脑亍?/p>

效果如上，那么這個(gè)圓圈圖片是怎么實(shí)現(xiàn)的呢，很簡(jiǎn)單，css3很好實(shí)現(xiàn)，將下面的css應(yīng)用到圖片即可。

.img-corner {
    border-radius: 50%;
}

OK，頭部還有一個(gè)Nav bar，這個(gè)其實(shí)將div的data-role設(shè)置為navbar，然后在div中嵌套<ul><li>。

頭部的這個(gè)導(dǎo)航條如果被點(diǎn)擊的話(huà)，它的顏色會(huì)變，這個(gè)功能是Jquery Mobile實(shí)現(xiàn)的，我們不需要做什么。

頭部說(shuō)完了我們看內(nèi)容頁(yè)，為了簡(jiǎn)單，有一些css我直接寫(xiě)在元素上。

<div >
    <p><b>什么人會(huì)買(mǎi)二手車(chē)？這四類(lèi)人才是最精明的消費(fèi)者</b></p>
    <div class="ui-grid-b">
        <div class="ui-block-a">
            <img class="img-shrink" src="~/Image/News/1.jpg" />
        </div>
        <div class="ui-block-b" >
            <img class="img-shrink" src="~/Image/News/2.jpg" />
        </div>
        <div class="ui-block-c">
            <img class="img-shrink" src="~/Image/News/3.jpg" />
        </div>
    </div>
    <div class="news-footer">
        <label>第一車(chē)網(wǎng)</label>
        <img  src="/Image/News/pencil.png" width="12" height="12" />
        <label>200</label>
        <div >
            <label>剛剛</label>
            <img src="~/Image/News/add.jpg" width="12" height="12" />
        </div>
    </div>
    <hr />
    <div class="ui-grid-a" >
        <div class="ui-block-a">
            <div ><b>《羋月轉(zhuǎn)》孫儷近照曝光網(wǎng)友:太美了！</b></div>
            <div class="news-footer" >
                <label>海外網(wǎng)</label>
                <img  src="/Image/News/pencil.png" width="12" height="12" />
                125
                <div >
                    <img src="~/Image/News/add.jpg" width="12" height="12" />
                </div>
            </div>
        </div>
        <div class="ui-block-b" >
            <img src="~/Image/News/tvphoto.jpg"  />
        </div>
    </div>
    <hr />
    <div class="ui-grid-a" >
        <div class="ui-block-a">
            <div ><b>初二女生收到情書(shū)，超牛老媽只說(shuō)了五句話(huà)！</b></div>
            <div class="news-footer" >
                <label>達(dá)達(dá)兔</label>
                <img  src="/Image/News/pencil.png" width="12" height="12" />
                751
                <div >
                    <img src="~/Image/News/add.jpg" width="12" height="12" />
                </div>
            </div>
        </div>
        <div class="ui-block-b" >
            <img src="~/Image/News/qingshu.jpg"  />
        </div>
    </div>
    <hr />
    <div class="ui-grid-a" >
        <div class="ui-block-a">
            <div ><b>那些發(fā)生在汽車(chē)歷史上的第一次！</b></div>
            <div class="news-footer" >
                <label >推廣</label>
                <label >上海通用</label>
                <img  src="/Image/News/pencil.png" width="12" height="12" />
                751
                <div >
                    <img src="~/Image/News/add.jpg" width="12" height="12" />
                </div>
            </div>
        </div>
        <div class="ui-block-b" >
            <img src="~/Image/News/car.jpg"  />
        </div>
    </div>
    <hr />

</div>

其實(shí)我們觀察一下，就會(huì)發(fā)現(xiàn)，第一行是標(biāo)題，第二行是三個(gè)圖片，第三行是一些其他的信息。

那么第一部分我們布局就可以采用<p><div><div>完成這三部分。第一行沒(méi)什么說(shuō)的，第二行我們使用網(wǎng)格系統(tǒng)，將屏幕分成三列，每列一張圖，最后一行需要注意這個(gè)"剛剛+"是在右邊，需要使用float="right"，看一下效果

怎么樣，還行吧。OK，我們接著看下面的布局，下面的布局我在使用Jquery mobile的網(wǎng)格系統(tǒng)的時(shí)候沒(méi)有查到像BootStrap那樣的跨列功能。所以我暫時(shí)先用50%/50%的網(wǎng)格。

第一個(gè)網(wǎng)格我們放置文字，第二個(gè)網(wǎng)格我們放置圖片。

需要注意的是上面的兩個(gè)height，我們?cè)O(shè)置總高度為150，設(shè)置文字的高度為135，那么小文字的高度為15，此時(shí)我們?cè)O(shè)置小文字所在的層的float:left，因?yàn)楦叨炔粔颍蜁?huì)自動(dòng)沉底。

如上圖，小字都沉底了。OK，其實(shí)真?zhèn)€頭條網(wǎng)都采用這樣的布局方式，其實(shí)我們只需要在數(shù)據(jù)庫(kù)表創(chuàng)建好類(lèi)型(是一行文字+一行3圖片+小字或者是左邊文字(打字加小字)+右邊圖片)，標(biāo)題，小字內(nèi)容，圖片我們就可以動(dòng)態(tài)生成或者加載頁(yè)面，這個(gè)是我下節(jié)要實(shí)現(xiàn)的內(nèi)容。

最后我們還給這個(gè)頁(yè)面加了foot。

@section Footer
{
    <div data-role="footer" data-theme="c" data-position="fixed" data-fullscreen="true">
        <h4><label >頭條網(wǎng)，一個(gè)神奇的網(wǎng)站！</label></h4>
    </div>
}

頭條網(wǎng)，一個(gè)神奇的網(wǎng)站。這個(gè)腳我們?cè)O(shè)置點(diǎn)擊屏幕時(shí)該腳會(huì)收縮。好了，我們看一下全部頁(yè)面的效果

收縮掉腳，我們?cè)倏纯?br />

OK，頁(yè)面今天就到這里，最后告訴大家怎么創(chuàng)建移動(dòng)項(xiàng)目的

點(diǎn)擊確定

選擇移動(dòng)應(yīng)用程序，確定，項(xiàng)目就創(chuàng)建好了。

最后，大家如果需要源碼的話(huà)去下載，下載請(qǐng)點(diǎn)擊這里源碼