jqm移動網站開發－web app

上周試了下EXT的sencha touch 功能相當強大，試用下感覺也相當不錯。不過因為公司一直都是用jQuery做為javascript開發架構，為了減少大家的學習成本隻好又去看了下JQM，之前也看過一些說明，這次認真看了下發現功能同樣強大。于是就動手做了個示例，示例素材及内容都是來源為APPLE官網，學習目的蘋果應該不會有任何意見吧

。在IOS和androidh手機上測試效果相當OK。基于HTML5+CSS3的響應式設計在不尺寸的移動裝置表現都很好，美工特别開心不用再為每個尺寸都寫個樣式了。上先上幾張效果圖這些圖都是從androidh系統4.0英寸的手機上截屏的。

首頁

菜單

内容頁

國為是初學再加上這次的目的是體驗一下開發模式，這裡不對實作細節做說明，在最後貼出首頁代碼。總結下嘗試性開發的感受：

一、因為在jQuery的應用基礎在基礎功能上隻需要看看官網的API就可以滿足開發要求；

二、需要對HTML5、CSS3有一定的了解；

三、需要了解下JQM對于“data-自定義屬性”的功能定義及實作效果；

四、一定要熟悉布局結構；

因為JQM支援所有頁面在同一檔案中，這裡隻貼出首頁代碼：

<div data-role="page" id="home">
    <div data-role="panel" id="menu" data-position="left" data-display="reveal" data-theme="a">
    <ul id="menubox">	
    <li class="fisrt"><img src="Public/Images/Icon/bkg_title5.png" width="35"></li>
    <li data-icon="false" data-theme="a"><a class="li3" href="#product" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-transition="pop">線上購買</a></li>
    <li data-icon="false" data-theme="a"><a class="li2" href="#map" target="_blank" rel="external nofollow"  data-transition="slideup">零售網點</a></li>
    <li data-icon="false" data-theme="a"><a class="li4" href="tel:[phone]" target="_blank" rel="external nofollow" >緻電Apple</a></li>
    <li data-icon="false" data-theme="a"><a class="li6" href="#service" target="_blank" rel="external nofollow"  data-transition="slidedown">線上客服</a></li>
    <li data-icon="false" data-theme="a"><a class="li5" href="#ewm" target="_blank" rel="external nofollow"  data-transition="slide">品牌推廣</a></li>
    </ul>
	</div>
	
    <div data-theme="a" data-role="header" data-position="fixed" class="me-header">
        <div class="ui-grid-b">
            <div class="ui-block-a" align="left">
                <a data-role="button" href="#menu" target="_blank" rel="external nofollow"  data-inline="true" data-mini="true" class="ui-icon-header icon-menu"></a>
            </div>
            <div class="ui-block-b">
            	<span class="me-header-logo"><img src="Public/Images/logo.png"></span>
            	<span class="me-header-text">Apple中國</span>
            </div>
            <div class="ui-block-c" align="right">
			<a data-role="button" href="#home" target="_blank" rel="external nofollow"  data-inline="true" data-mini="true" class="ui-icon-header icon-home"></a>
            </div>
        </div>
    </div>
    <div data-role="content">
		<div id="PhotoSwipeTarget"></div>
<div id="Indicators"><span></span><span></span><span></span></div>
<ul data-role="listview" data-inset="true">
	<li><a href="#product" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
        <img src="Public/Images/img1.png">
        <h2>iPhone 5</h2>
        <p>要制造出如此輕薄的裝置，同時不以犧牲功能或</p></a>
    </li>
    <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
        <img src="Public/Images/img2.png">
        <h2>iPad</h2>
        <p>iPad 能推動業務不斷向前，使平凡的日常工作變得不平凡</p></a>
    </li>
    <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
        <img src="Public/Images/img3.png">
        <h2>Mac</h2>
        <p>了解教師、教授以及不同年齡的學生如何在課堂上以及更。</p></a>
    </li>
    <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
        <img src="Public/Images/img4.png">
        <h2>iPod</h2>
        <p>這款小巧玲珑、适宜佩戴的音樂播放器現有按鍵和 VoiceOver 功能，可告訴你正在</p></a>
    </li>
</ul>

    </div>
	<div data-role="footer" class="ui-foot" data-position="fixed">
		<p>Copyright © 2013 Apple Inc. 保留所有權利。<br></>京ICP備10214630</p>
	</div>
</div>
           

初學階段稍後會深入學習到時再補上技術性強點的文檔。