DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> WML教程9:Select List 控件
WML教程9:Select List 控件
編輯:XML詳解     

對表單的控制能力可以證明一個Html設計者是否夠專業,而且很多交互功能也必須依賴表單。WML沒有表單屬性,但是WML可以直接使用控件,同樣可以達到使用表單的效果。因此,使用控件的水平可以體現一個WML設計者的制作水平。

WML控件有Select List和Input Box兩個系列,每個系列另外包含幾個子系列,基本可以滿足表單設計的需求。

選擇列表控件(Select List)
  Select有兩對很重要也很容易混淆的屬性:name, value , iname , ivalue。這四個屬性的區別和用途不太容易描述清除,看了後面的例子會很容易理解。

  每個Select是一個或多個Option的集合,Option地結果返回給Select元素的name和iname。

  示例:

<select name="name" iname="iname value="value" ivalue="ivalue">
<option value="S">sina</option>
<option value="Y">yahoo</option>
</select>

相關屬性:

1. multiple 這個布爾變量的值決定是否允許多重選擇,值為True時Select控件允許復選,否則相反。

2. name & Value 這一組變量的主要作用是獲取於該option的返回值,value提供name的缺省值。

3. iname & ivalue 與上一組參數功能相似,不同的是ivalue返回有效Option的序列號。被選中的控件用它的序號表示,0代表沒有option被選中,假如第二個和第三個同時被選中就表示為 2;3

4. title 作為標題參數提供給浏覽器,但是不同的浏覽器處理方式有所不同,有些浏覽器直接顯示選項內容不顯示標題,有的浏覽器顯示標題,按選擇鍵進入選擇界面。

5. tabindex 提供給浏覽器的控件序號參數。

2、選項控件
  Option只有包含在Select內才有意義,無法單獨使用。

  相關屬性:

1. value Option的返回值,假如當前Option被選擇,這個Value的值會被傳送到Select元素的Name變量。

2. title 供浏覽器顯示的選項標題。

3. onpick 如果當前Option被點選,浏覽器跳轉到指定的Url。

示例1:

<card>
<p>Please choice your favourite Web.<br/>
 <select name="X">
  <option value="S">sina</option>
  <option value="Y">yahoo</option>
 </select>
<p>
</card>

上例是一個基本的單選列表,選擇的結果被賦值給X。

示例2:

<card>
<p>Please choice all your favourite Web.<br/>
<select name="X" iname="I" ivalue="1;3" multiple="true">
  <option value="S">sina</option>
  <option value="Y">yahoo</option>
  <option value="N">netease</option>
</select>
<p>
</card>

上例是一個使用了iname和ivalue的多選列表,I被預置為 1;3 。假如用戶選擇了sina和yahoo,X被賦值為 S;Y,I被賦值為 1;2。假如用戶不做任何選擇,I等於1;3,X內容為空。

示例3:

<card>
<p>Jump to your favourite Web.<br/>
<select>
  <option onpick="sinahttp://wap.sina.com.cn">sina</option>
  <option onpick="china/'>http://wap.chnmobile.Net">china mobile</option>
</select>
<p>
</card>

上例演示了Option的onpick功能,不管Option的狀態如何,只要它被點選,浏覽器就會跳轉到指定的Url。

示例四:

<card>
<p>Please choice your favourite Web.<br/>
<select name="X">
  <option value="S">sina</option>
  <option value="Y">yahoo</option>
  <option value="S;Y">both</option>
</select>
<p>
</card>

上例演示了一個通過單選功能完成多選需求的示例。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved