WebApp(JqueryMobile) 實戰(一)

時間  2019-11-11
標籤 webapp jquerymobile 實戰 欄目 無線 简体版
原文   原文鏈接

其實WebApp這個版塊已經放置一段時間了，可是一直沒有寫文章，那是由於我還在學習中。今天的話，咱們就來寫一篇關於佈局的，之前在沒有BootStrap，Jquery EasyUI，Jquery Mobile以前不管是作web項目仍是web 移動站點都是那麼費勁，尤爲是我這種學不會css的人，實在是搞不了前臺。OK，廢話很少說，咱們來看一下今天要仿製的頁面，手機頭條網。
css

wKioL1SRkYnBfzswAAk72X4qGuY482.jpg

看到了吧，這個界面若是用BootStrap的話可能更簡單一些，由於它是單純的三列或者兩列布局，利用Bootstrap的網格系統能夠很好的佈局出來。那今天的話仍是用Jquery Mobile css。html

首先看一下最頂端的頭部，個人代碼以下css3

@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" style="padding:3px" width="40" height="40" src="~/Image/IMG_20140531_170818.jpg" /></div>
            <h3 class="ui-block-b" style="text-align:center;">今日頭條<img height="25" width="25" src="~/Image/ic_popup_sync_6.png" /></h3>
            <div class="ui-block-c" style="padding:5px;text-align:right"><img src="../Image/ic_menu_search.png" width="30" height="30" /></div>
        </div>
        <div data-role="navbar" style="background-color:red;border-bottom-style:solid; border-bottom-width:2px;border-bottom-color:lightyellow">
            <ul>
                <li><a class="a-header" href="#">推薦</a></li>
                <li><a class="a-header" href="#">熱點</a></li>
                <li><a class="a-header" href="#">社會</a></li>
                <li><a class="a-header" href="#">娛樂</a></li>
                <li><a class="a-header" href="#">科技</a></li>
            </ul>
        </div>
    </div>
}

其實這裏咱們使用Jquery Mobile css中的一些樣式及屬性。咱們看一下data-role="header"web

wKioL1SRk4uhyT_xAAGtACgkUsM176.jpg

在這裏咱們設置頭部不會在點擊屏幕的時候縮回去data-tap-toggle="false"，這樣當頁面內容隨着滾動條上移時，會被頭部蓋住。data-theme="f"這個是我本身定義的主題，主題能夠是a-z。而Jquery Mobile css默認只提供了五種主題。數據庫

wKioL1SRlNahMLirAACipLbUpqk766.jpg

因此f須要本身定義，咱們來看一下ide

.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;
}

第一個css就是咱們本身定義的主題，必須是以ui-bar-[a-z]來命名。頭部的話在這裏共分了三列，由於咱們的第一個div是 <div class="ui-grid-b">這個css就把屏幕分紅了相等的三份。佈局

wKioL1SRmZTR9ErGAADWRX7Ip9E387.jpg

而後咱們在每一份放咱們的元素。學習

wKiom1SRlaLweQL3AABBzX3CPA4571.jpg

效果如上，那麼這個圓圈圖片是怎麼實現的呢，很簡單，css3很好實現，將下面的css應用到圖片便可。網站

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

OK，頭部還有一個Nav bar，這個其實將div的data-role設置爲navbar，而後在div中嵌套<ul><li>。ui

wKioL1SRl6fjGgEdAABC2akFt6M358.jpg

頭部的這個導航條若是被點擊的話，它的顏色會變，這個功能是Jquery Mobile實現的，咱們不須要作什麼。


頭部說完了咱們看內容頁，爲了簡單，有一些css我直接寫在元素上。

<div style="font-family:微軟雅黑">
    <p><b>什麼人會買二手車？這四類人才是最精明的消費者</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" style="padding-left:5px;padding-right:5px;">
            <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>第一車網</label>
        <img style="margin-left:15px" src="/Image/News/pencil.png" width="12" height="12" />
        <label>200</label>
        <div style="float:right">
            <label>剛剛</label>
            <img src="~/Image/News/add.jpg" width="12" height="12" />
        </div>
    </div>
    <hr />
    <div class="ui-grid-a" style="height:150px">
        <div class="ui-block-a">
            <div style="height:135px"><b>《羋月轉》孫儷近照曝光網友:太美了！</b></div>
            <div class="news-footer" style="float:left;width:100%">
                <label>海外網</label>
                <img style="margin-left:15px" src="/Image/News/pencil.png" width="12" height="12" />
                125
                <div style="float:right;margin-right:10px">
                    <img src="~/Image/News/add.jpg" width="12" height="12" />
                </div>
            </div>
        </div>
        <div class="ui-block-b" style=" border: 1px solid white;">
            <img src="~/Image/News/tvphoto.jpg" style="width: 100%; height: 150px;" />
        </div>
    </div>
    <hr />
    <div class="ui-grid-a" style="height:100px">
        <div class="ui-block-a">
            <div style="height:85px"><b>初二女生收到情書，超牛老媽只說了五句話！</b></div>
            <div class="news-footer" style="float:left;width:100%">
                <label>達達兔</label>
                <img style="margin-left:15px" src="/Image/News/pencil.png" width="12" height="12" />
                751
                <div style="float:right;margin-right:10px">
                    <img src="~/Image/News/add.jpg" width="12" height="12" />
                </div>
            </div>
        </div>
        <div class="ui-block-b" style=" border: 1px solid white;">
            <img src="~/Image/News/qingshu.jpg" style="width: 100%;" />
        </div>
    </div>
    <hr />
    <div class="ui-grid-a" style="height:100px">
        <div class="ui-block-a">
            <div style="height:85px"><b>那些發生在汽車歷史上的第一次！</b></div>
            <div class="news-footer" style="float:left;width:100%">
                <label style="background-color:red;color:white;border-radius:20%">推廣</label>
                <label style="margin-left:10px">上海通用</label>
                <img style="margin-left:15px" src="/Image/News/pencil.png" width="12" height="12" />
                751
                <div style="float:right;margin-right:10px">
                    <img src="~/Image/News/add.jpg" width="12" height="12" />
                </div>
            </div>
        </div>
        <div class="ui-block-b" style=" border: 1px solid white;">
            <img src="~/Image/News/car.jpg" style="width: 100%; height: 100px;" />
        </div>
    </div>
    <hr />

</div>

其實咱們觀察一下，就會發現，第一行是標題，第二行是三個圖片，第三行是一些其餘的信息。

那麼第一部分咱們佈局就能夠採用<p><div><div>完成這三部分。第一行沒什麼說的，第二行咱們使用網格系統，將屏幕分紅三列，每列一張圖，最後一行須要注意這個"剛剛+"是在右邊，須要使用float="right"，看一下效果

wKiom1SRmE_CymWqAAFRcuogNW0422.jpg

怎麼樣，還行吧。OK，咱們接着看下面的佈局，下面的佈局我在使用Jquery mobile的網格系統的時候沒有查到像BootStrap那樣的跨列功能。因此我暫時先用50%/50%的網格。

第一個網格咱們放置文字，第二個網格咱們放置圖片。

wKiom1SRmXzQqko-AAIKAmPQJo8417.jpg

須要注意的是上面的兩個height，咱們設置總高度爲150，設置文字的高度爲135，那麼小文字的高度爲15，此時咱們設置小文字所在的層的float:left，由於高度不夠，它就會自動沉底。

wKiom1SRmozCXkgnAAEsTn1Ezmw098.jpg

如上圖，小字都沉底了。OK，其實真個頭條網都採用這樣的佈局方式，其實咱們只須要在數據庫表建立好類型(是一行文字+一行3圖片+小字或者是左邊文字(打字加小字)+右邊圖片)，標題，小字內容，圖片咱們就能夠動態生成或者加載頁面，這個是我下節要實現的內容。

最後咱們還給這個頁面加了foot。

@section Footer
{
    <div data-role="footer" data-theme="c" data-position="fixed" data-fullscreen="true">
        <h3><label style="color:red">頭條網，一個神奇的網站！</label></h3>
    </div>
}

wKiom1SRm4zQFDyjAADaJDKaTvc931.jpg

頭條網，一個神奇的網站。這個腳咱們設置點擊屏幕時該腳會收縮。好了，咱們看一下所有頁面的效果

wKiom1SRnH7wrp6nAANQK3I6BxE866.jpg

收縮掉腳，咱們再看看

wKioL1SRnV6D6wxGAANf4L6h_QM802.jpg

OK，頁面今天就到這裏，最後告訴你們怎麼建立移動項目的

wKioL1SRnxbR4WaDAAOi4QTty8U565.jpg

點擊肯定

wKioL1SRn2nBWP3aAAI-1NJTi6g394.jpg

選擇移動應用程序，肯定，項目就建立好了。

最後，你們若是須要源碼的話去下載，下載請點擊這裏源碼

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程