[TOC] >[warning] 函數依賴請查看本章第一節 [概述](http://www.hmoore.net/donknap/we7/175036)，使用前請務必 load()->func('tpl'); 加載模板組件函數 #### 組件 ##### 地區選擇 >[info] tpl_app_form_field_district($name, $values = array()) * $name 表單字段的名稱，同一頁面不能為空 * $values 選中的地區信息，結構為 array('province' => '山西', 'city' => '太原', 'district' => '迎澤區') ``` <div class="mui-input-row"> <label>選擇地區</label> {php echo tpl_app_form_field_district('address', array('province' => $address['province'],'city' => $address['city'],'district' => $address['district']));} </div> ``` ##### 日期選擇 >[info] tpl_app_form_field_calendar($name, $values = array()) * $name 表單字段的名稱，同一頁面不能為空 * $values 選中的生日日期，結構為 array('year' => 2013,'month' => '10','day' => 3) ``` <div class="mui-input-row"> <label>出生日期</label> {php echo tpl_app_fans_form('birth', array('year' => $profile['birthyear'], 'month' => $profile['birthmonth'], 'day' => $profile['birthday']), $mcFields['birthyear']['title']);} </div> ``` >[warning] 下方說明一些比較簡單的數據選擇組件，由于使用簡單，只提供示例 ##### 性別選擇 ``` <div class="form-group"> <label class="col-xs-12 col-sm-3 col-md-2 control-label">性別</label> <div class="col-sm-9 col-xs-12"> {php echo tpl_fans_form('gender', $profile['gender']);} </div> </div> ``` ##### 血型選擇 ``` <div class="form-group"> <label class="col-xs-12 col-sm-3 col-md-2 control-label">血型</label> <div class="col-sm-9 col-xs-12"> {php echo tpl_fans_form('bloodtype', $profile['bloodtype']);} </div> </div> ``` ##### 生肖選擇 ``` <div class="form-group"> <label class="col-xs-12 col-sm-3 col-md-2 control-label">生肖</label> <div class="col-sm-9 col-xs-12"> {php echo tpl_fans_form('zodiac',$profile['zodiac']);} </div> </div> ``` ##### 星座選擇 ``` <div class="form-group"> <label class="col-xs-12 col-sm-3 col-md-2 control-label">星座</label> <div class="col-sm-9 col-xs-12"> {php echo tpl_fans_form('constellation',$profile['constellation']);} </div> </div> ``` ##### 學歷選擇 ``` <div class="form-group"> <label class="col-xs-12 col-sm-3 col-md-2 control-label">學歷</label> <div class="col-sm-9 col-xs-12"> {php echo tpl_fans_form('education',$profile['education']);} </div> </div> ``` ##### 自定義選擇 自定義選項時只需要定義選擇數據調用函數即可，數據可以在JS中定義，也可以在PHP中定義通過 json_encode 輸出到模板中。 ``` <div class="mui-input-row"> <label>自定義選項</label> <input class="js-user-options" type="text" value="" readonly="" placeholder="請選擇"> </div> <script type="text/javascript"> $(".js-user-options").on("tap", function(){ var options = {data: [ {"text":"測試1","value":"1"}, {"text":"測試2","value":"2"} ]}; var $this = $(this); util.poppicker(options, function(items){ $this.val(items[0].value); }); }); </script> ```