jquery mobile 初探

如今已經進入了移動web時代。因此如今的mobile的js框架也開始流行。瀏覽器有一個好處：不用區分安卓仍是iOS，也不用下載app。隨着框架和控件的日益增多，應用將更加豐富。比較著名的如：

jquery mobile, Moobile（基於mooltools框架）The M Project，sencha touch（繼承ExtJS 4的應用程序MVC架構）,Titanium，zepto。想要最好的用戶體驗Sencha Touch會是最好的選擇，想要最好的兼容性應當選擇jQuery Mobile，若是有至關強大的UI團隊，Zepto、XUI會是更好的選擇，適合的纔是最好的。

本文先介紹jquerymobile。

    jquery mobile是由Media Temple聯合多家移動設備廠商以及軟件企業共同發起的的針對觸屏智能手機與平板電腦的website以及在線應用的前端開發框架。Jquerymobile構建於Jquery。

        jQuery Mobile 不只會給主流移動平臺帶來jQuery核心庫，並且會發布一個完整統一的jQuery移動UI框架。支持全球主流的移動平臺。jQuery Mobile是一個在Internet 上直接託管、免費可用的開源代碼基礎。只需將各類 *.js 和 *.css 文件直接包含到您的 web頁面中便可。

此框架簡單易用。頁面開發主要使用標記，無需或僅需不多 JavaScript。

儘管 jQuery Mobile 利用最新的 HTML5、CSS3和 JavaScript，但並不是全部移動設備都提供這樣的支持。jQuery Mobile 的哲學是同時支持高端和低端設備，好比那些沒有 JavaScript 支持的設備，儘可能提供最好的體驗。

jQuery Mobile 框架的總體大小比較小，JavaScript 庫12KB，CSS 6KB，還包括一些圖標。

<link rel="stylesheet"href="http://code.jquery.com/mobile/1.4.0-alpha.1/jquery.mobile-1.4.0-alpha.1.min.css"/>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<scriptsrc="http://code.jquery.com/mobile/1.4.0-alpha.1/jquery.mobile-1.4.0-alpha.1.min.js"></script>

jQuery Mobile 目前支持如下移動平臺：

Apple iOS：iPhone、iPodTouch、iPad

Android  Blackberry 等

舉個例子：

摺疊控件效果

Html：

<button type="button" data-icon="gear" data-theme="b" data-iconpos="right" data-mini="true" data-inline="true" id="add">Add</button>
<button type="button" data-icon="plus" data-theme="b" data-iconpos="right" data-mini="true" data-inline="true" id="expand">Expand last</button>
<button type="button" data-icon="minus" data-theme="b" data-iconpos="right" data-mini="true" data-inline="true" id="collapse">Collapse last</button>
<div data-role="collapsible-set" data-content-theme="d" id="set">
    <div data-role="collapsible" id="set1" data-collapsed="true">
        <h3>Section 1</h3>
        <p>I'm the collapsible content.</p>
    </div>
</div>

Javascript：

$(document).on("pageinit", function() {
    var nextId = 1;
    $("#add").click(function() {
        nextId++;
        var content = "<div data-role='collapsible' id='set" + nextId + "'><h3>Section " + nextId + "</h3><p>I am the collapsible content in a set so this feels like an accordion. I am hidden by default because I have the 'collapsed' state; you need to expand the header to see me.</p></div>";
        $("#set").append( content ).collapsibleset('refresh');
    });
    $("#expand").click(function() {
        $("#set").children(":last").trigger( "expand" );
    });
    $("#collapse").click(function() {
        $("#set").children(":last").trigger( "collapse" );
    });
});

具體參照：

http://jquerymobile.com/

 

Codiqa：爲jquerymobile的強大的所見即所得的UI編輯器，使用方法爲：點選本身要編輯的部分並將控件拖入到屏幕當中，

並做出相應設置。包括了工具欄（頂部、底部、導航）、按鈕（普通按鈕、文本按鈕）、內容區域（字號、文本區域、圖像、手風琴區域、網格）、

列表、表單等各種WEB元素。直接選擇具體工具在頁面中拖動佈局，右側可設置相關屬性，最終完成後選擇右上角的「DownloadHTML」下載得到生成的html和css打包文件。

具體參照：http://www.codiqa.com/

                    http://www.jqmapi.com/