Framework7學習筆記之 表單
一:表單布局基本格式
表單布局是通過列表來實現的。
<div class="list-block"> <ul> <!--一個表單行--> <li> <div class="item-content"> <div class="item-media">圖標</div> <div class="item-inner"> <div class="item-title label">標簽文字</div> <div class="item-input"> <input type="輸入類型" name="字段名"> </div> </div> </div> </li> ... </ul> </div>
一個表單就是一個列表,一個表單行就是一個列表元素。表單行由 標簽文字+輸入 組成。
二:輸入類型
所有文本輸入 |
text, password, email
|
下拉列表 |
|
文本框 |
|
自適應文本框 |
|
復選框 |
|
進度條 |
|
三:布局示例
http://framework7.taobao.org/docs/form-elements.html#.Wo5BgCO74lU
四:單選框、復選框
單選框組需要使用list視圖制作而成。
http://framework7.taobao.org/docs/checkboxes-radios.html#.Wo5-9CO74lU
五:智能選擇器(高級!)
1:將列表元素轉變為智能選擇器,並且把選擇項用select標簽包裹,放進列表元素中即可。這樣,在點擊列表元素時,就會自動打開一個動態頁面來選擇內容。
<li> <!--1:將列表元素轉變為智能選擇器 --> <a href="#" class="item-link smart-select"> <!-- 2:提供選項 --> <select name="fruits"> <option value="apple" selected>Apple</option> <option value="pineapple">Pineapple</option> ... </select> <!-- 3:列表元素格式定義 --> <div class="item-content"> <div class="item-inner"> <div class="item-title">元素標簽</div> <div class="item-after">默認選中的選項內容</div> </div> </div> </a> </li>
2:帶搜索框的智能選擇器:只需加data-searchbar="true"屬性即可。
3:自定義選擇頁面的標題與返回文本:加上 data-page-title="標題" data-back-text="返回按鈕文本" 即可。
4:用彈出頁來打開選擇頁面:加上 data-open-in="popup" 即可。
5:選擇後自動關閉選擇頁:加上 data-back-on-select="true" 即可。
6:多選:列表元素可以多選【高階用法,少】
六:快速獲取表單數據與填充表單
F7可以直接把整個表單的輸入轉換為json數據,也可以快速把json數據填充到表單中,而無需逐個表單字段去操作。
1:快速獲取表單內容
$$(‘按鈕選擇器‘).on(‘click‘, function(){ var formData = myApp.formToJSON(‘#表單id‘); });
2:快速填充表單
$$(‘按鈕‘).on(‘click‘, function(){ var formData = { ‘key‘: ‘value‘, 。。。。 } myApp.formFromJSON(‘#表單id‘, formData); });
七:表單存儲(保存剛剛輸入的內容,並且在表單重新打開時自動填充)
啟用表單存儲:
- 在表單上增加一個 "store-data" class。(新版中是 form-store-data 類)
- 在表單上增加一個 id 屬性。如果沒有 id, 表單存儲無法正常工作。
- 確保input都有 "name" 屬性,沒有name屬性的input將會被忽略(不會被填充)。
八:提交表單
有兩種方法提交表單:點擊submit按鈕、檢測表單內容變化自動提交。
1:submit
<form action="表單提交url" method="GET" enctype="內容類型" class="ajax-submit"> ... </form>
2:表單內容變化自動提交(沒有設置submit按鈕時)
<form action="提交url" method="GET" class="ajax-submit-onchange"> ... </form>
Framework7學習筆記之 表單