jQueryMobile & DateBox Cheat Sheet

此篇版本以Beta 1為準，一定愛配 API。

jQueryMobile Demo and API
http://jquerymobile.com/demos/1.0b1/

1.
mobileinit務必要在jQM讀進來之前去設定jQM的config。
<script type="text/javascript" src="/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
//設定jQueryMobile必須在Load之前設定
$(document).bind("mobileinit", function(){
    //設定為$.mobile.xxxx = "OOOOO"
   config設定參考
});
</script>
<script type="text/javascript" src="/js/jquery.mobile-1.0b1.min.js"></script>

2.
正式版不再用：在HTML依據Orientation加上Class的方法做。
建議改用Media Queries。官方說法

3.
data-transition：指定連結的 transition 動畫。動畫種類
data-rel：指定關係為Dialog，會以對話框形式跳出來，並且有可關掉視窗的按鈕。
class="ui-btn-right"：指定這顆按鈕在Header右邊。
相關init config：defaultPageTransition、defaultDialogTransition、loadingMessage、pageLoadErrorMessage。 
        <div data-role="header" data-position="inline" data-theme="f">
            <h1>我是Header喔！</h1>
            <a href="#login" class="ui-btn-right" data-rel="dialog" data-transition="pop">登入</a>
        </div>

4.
data-add-back-btn：jQM Beta開始預設不會有back按鈕了，要在data-role="page"上加上data-add-back-btn="true"
data-back-btn-text：back按鈕的文字
以上兩點都可以在 mobileinit 時統一設定。
相關init config：addBackBtn、backBtnText、backBtnTheme。
<div data-role="page" id="login" data-theme="g" data-add-back-btn="true" data-back-btn-text="取消">
......
</div>


5.
在Select上比照按鈕，都可以指定按鈕有的東西
可用optgroup做群組選單。
data-native-menu：true 使用手機內建樣式， false使用jQM樣式，都可玩玩看。
data-icon：選單圖片
data-theme：選單樣式
相關init config：ajaxEnabled。
<form action="#">
    <select name="count" id="count" data-native-menu="false" data-icon="search" data-theme="c">
        <optgroup label="上午">
            <option value="8">上午八點</option>
            <option value="9" disabled="disabled">上午九點</option>
        </optgroup>
        <optgroup label="下午">

            <option value="14">下午兩點</option>
            <option value="15">下午三點</option>
        </optgroup>

    </select>
</form>

6.
data-fliter：可替選單加上搜尋介面。
data-filter-placeholder：搜尋框的PlaceHolder
data-filter-theme：就theme嘛
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search User..." data-filter-theme="c">
   ......
</li>


同場加映DateBox
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
jQueryMobile DateBox Demo and API
http://dev.jtsage.com/jQM-DateBox/

1.
<script type="text/javascript" src="/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
//設定jQueryMobile必須在Load之前設定
$(document).bind("mobileinit", function(){
    //DateBox官方強烈建議將date降級成使用text
   $.mobile.page.prototype.options.degradeInputs.date = 'text';
});
</script>
<script type="text/javascript" src="/js/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript" src="/js/jquery.mobile.datebox.min.js"></script>
<script type="text/javascript">
//要調整DateBox的東西要在datebox.js讀進來以後。
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
    'dateFormat': 'dd日mm月YYYY年',
    'headerFormat': 'dd.mm.YYYY'
});
</script>

2.
date-option說明不詳列，類似jQueryUI DatePicker。
mode：picker種類
dateFormat：input中的格式
noButtonFocusMode：不要設為true，開啟一次以後會關不掉，預設是flase。
fieldsOrder：要有哪些可選
theme：input的樣式
pickPageInputTheme：picker中的數字區塊樣式
pickPageTheme：picker的背景及確定按鈕