jquerymobile框架中的表單組件基礎(chǔ)使用教程_jquery

《jquerymobile框架中的表單組件基礎(chǔ)使用教程_jquery》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。

1、jQueryMobile框架中的表單組件基礎(chǔ)使用教程一.表單組件基礎(chǔ)1.組件簡介jQueryMobile屮的表單組件是基于標(biāo)準HTML,然后在此基礎(chǔ)上增強樣式，因此即使瀏覽器不支持jQueryMob訂e表單仍可止常使用。需要注意的是，jQueryMobile會把表單元素增強為觸摸設(shè)備很容易使用的形式，因此對于iphone/ipad與Android使用Web表單將會變得非常方便。jQueryMob訂c的表單組件有以卜?幾種：(1)文本輸入框，type二〃text"標(biāo)記的input元素會自動增強為jQue

2、ryMobile樣式,無需額外添加data-role屬性。(2)文木輸入域，textarea元素會被自動增強，無需額外添加data-role屬性，用于多行輸入文本，jQueryMobile會自動增大文本域的高度，避免在移動設(shè)備中很難找到滾動條的情況。(3)搜索輸入框，type二"search"標(biāo)記的input元素會自動增強，無需額外添加data-role屬性，這是一個新的HTML元素，增強后的輸入框左邊有一個放大鏡圖標(biāo)，點擊觸發(fā)搜索，在輸入內(nèi)容后，輸入框的右邊還會出現(xiàn)一個叉的圖標(biāo)，點擊清除已輸入的內(nèi)容

3、，非常方便。(4)單選按鈕，type二〃radio"標(biāo)記的input元素會門動增強，無需額外添加data-role屬性。(5)復(fù)選按鈕，type二〃checkbox"標(biāo)記的input元素會自動增強,無需額夕卜添加data-role屬性。(6)選擇列表，select元索會被自動壇強，無需額外添加data-role屬性。(7)劃桿，type二〃remge"標(biāo)記的input元素會口動增強，無需額外添加data-role屬性。(8)開關(guān),select元素添?加data-role二〃slider"屬性后會被增強

4、會jQueryMob訂e的開關(guān)組件，select中只能有兩個option。2.組件使用規(guī)范所有的表單組件，只耍是需耍與服務(wù)器傳送數(shù)據(jù)，都應(yīng)該包裹在一個form標(biāo)簽內(nèi),并且應(yīng)該指定好form的action和method屬性。當(dāng)然如果你使用的是WebSQLDatabase這類本地儲存，即數(shù)據(jù)并不需要與服務(wù)器傳送，可以不用form標(biāo)簽和sumbit提交。另外form的id需要在整站屮唯一，由于jQueryMobi1e使用Ajax導(dǎo)航，因此不同的page可以同時加載至!I一個D0M中,因此formid必須整站

5、唯一以保證每個D0M的表單id都是不同的。每一個表單元索應(yīng)該要有相應(yīng)的label對應(yīng)，label的for值要與元索的id相同，使其在語義上相關(guān)，并且可以使用一個帶有data-role=/，fieldcontain，/屬性的div或fieldset容器包裹,jQueryMobile會自動在容器底部增加一條細邊框作為分隔。二.表單組件詳解1.文本輸入框在jQueryMobile中,文本輸入框和文本輸入域都是使用標(biāo)準HTML標(biāo)記的,并且支持一些HTML5的input類型，如password,email,te

6、l,number,range等更多的類型,而對于一些類型(range,scrach)jQueryMobile則會將其轉(zhuǎn)換為text的input類型,統(tǒng)一標(biāo)準化其樣式，下面是文本輸入框的調(diào)用代碼及示圖。