因目前項目並非前后端分離模式，且用到PHP的yii2框架（所有html代碼，js較多內嵌在.php文件內多少采用同步提交【噴墨中...】），遂對於前端面上需要用到的yii2小組件一些整理（因是前端若涉及到php寫法錯誤或者風格問題，敬請指點）
使用場景盡量為表單
基礎注冊調用小組件
<?php use yii\helpers\Html; use yii\widgets\ActiveForm;
？>
//首先注冊activeForm小部件，並賦值給$form(php中的聲明變量方法用$ 等價於js中的var let)
//begin 標志小部件開始 <?php $form = ActiveForm::begin([ 'id' => 'login-form', //聲明小部件的id 即form的id
//聲明需要添加的屬性 ，例如class ， data-x等 'options' => ['class' => 'form-horizontal'], ]) ?>
//注冊完小部件后可以在 activeForm小部件聲明塊中調用小部件的方法 <?= $form->field($model, 'password')->passwordInput() ?>
//：：end標識小部件結束 <?php ActiveForm::end() ?>
1.首先就列出activeForm的一些基本方法：
自定義input框：input();
文本框:textInput();
密碼框:passwordInput();
單選框:radio(),radioList();
復選框:checkbox(),checkboxList();
下拉框:dropDownList();
多選列表:listBox();
隱藏域:hiddenInput();
文本域:textarea(['rows'=>3]);
文件上傳:fileInput();
widget擴展 <?= $form->field($model, 'username')->widget(\yii\widgets\MaskedInput::className(), ['mask' => '9999/99/99',]); ?>
<?php $form=ActiveForm::begin(['id'=>'login','class'=>'login'])?> <!-- 簡易用法 使用activeForm 的 fiedld方法 --> <!-- 其中 該方法下有 textInout/passwordInput 等一些常用input類型方法 hint 輸入前的提示內容 error 錯誤內容 //一般由后台生成 label 可以更改label內的內容 在hint,error,label設置class后將會重置了 這些方法內原來屬於容器上的class若需要可以原樣賦回去 --> <!-- 這里的 $mode為跟字段有關的數據模型 ， 第二個參數為關系模型中的字段不存在將報錯， 第三個參數為模板內的一些內容的進行自定義 --> <?= $form->field($model, 'username',[ 'options'=>[],//數組里面可以設置自需屬性 // template 為字符串模板可自定義模板 ， // 其中 {label} {input} {hint} {error} 存在是會調用對應封裝好的html模板 當然你也可以不寫這樣就不會生成yii2內置小部件模板 'template' => '{label} {input} {hint} {error}', // 以下三個分別可以設置label ，input ，hint，error的屬性（都是選填項） // 其中如果后面有使用->input...,label(...)等將會將這些里面的配置合並值對應的xxxOptions 內 'labelOptions' => [ 'class'=>'需要在label上添加的類名' //....其他屬性集 ], 'inputOptions' => [], 'hintOptions' => [], 'errorOptions' => [], ])->textInput([ // 在options數組內可以設置任意屬性 'class'=>'testClass', 'value'=>'測試' ])->hint( // 設置提示內容，當只有一個參數切為false（boolean）用於顯示提示的標簽 'Please enter your name', [ // 設置任意屬性 'class' => 'testHint' ])->label( // 設置label顯示內容，當只有一個參數切為false（boolean）label標簽將不會被渲染 'Name', [ // 設置任意屬性 'class' =>'testLabel' ])->error([ // 任意屬性，當只有一個參數切為false（boolean）用於顯示錯誤的標簽 'class'=>'errors' ]) ?> <!-- 可自定義類型input 這里只描述了input的參數 其余參數參考上個示例 --> <?= $form->field($model, 'username')->input( // input內只允許放置兩個參數即[type ,options] 'email',//該處為指定type="xxxx"的input類型 ['class'=>'tests','value'=>'值']//可在內部定義任何屬性 ) ?> <?php ActiveForm::end();?>
2.2 radio 單選框系列
<?php $form=ActiveForm::begin(['id'=>'login','class'=>'login'])?> <!-- 老實說對這個radio方法相當迷惑 一個單選按鈕選擇而且一旦選擇無法取消，無法一次柑橘屬性放置多個值 在有radioList方法的前提下覺得相當雞肋 第二個參數中false為是否開啟label標簽若沒開啟 labelOption 將無效 ，label設置的值直接顯示在容器內 --> <?= $form->field($model, 'username')->radio([ // 隱藏域中的值 'uncheck' =>'test1', // 定義lebal的內容 'label' =>'test', // label上的任意屬性 'labelOptions'=>[ 'gs'=>'test' ] ],false)?> <!-- 單選框組 若要設置默認值，則在對應控制器中將指定字段設置為 需要選擇的值 $model->username = 1; --> <?= $form->field($model, 'username')->radioList([ '0'=>'a', '1'=>'b', '2'=>'c' ],[ // tag聲改變 class="radio"的父級標簽 若tag設置為h3 // 則 <div id="loginform-username" key="testKey" role="radiogroup" aria-required="true"> // => 轉為 <h3 id="loginform-username" key="testKey" role="radiogroup" aria-required="true"> // <div class="form-group field-loginform-username required"> // <label class="control-label">Username</label> // <input type="hidden" name="LoginForm[username]" value=""> // <div id="loginform-username" key="testKey" role="radiogroup" aria-required="true"> // <div class="radio"><label><input type="radio" name="LoginForm[username]" value="0"> a</label></div> // <div class="radio"><label><input type="radio" name="LoginForm[username]" value="1"> b</label></div> // <div class="radio"><label><input type="radio" name="LoginForm[username]" value="2"> c</label></div> // </div> // <p class="help-block help-block-error"></p> // </div> 'tag'=>'h3', // 未選擇是默認提交的值 'unselect'=>'1', // 如果設置了item選項，則忽略此選項 'encode'=>false, // 每個單選塊之間的內容 寫的是什么字符串輸出就什么字符串 'separator'=>'', // 定義在每個input單選按鈕上的屬性 'itemOptions'=>[ 'tess'=>'jzq' ],
//可調用的回調，可用於自定義與$Item中單個項對應的HTML代碼的生成。此回調的簽名必須是：函數($index、$Label、$name、$check、$value)，
//其中$index是整個列表中單選按鈕的基於零的索引；$Label是單選按鈕的標簽；$name、$value和$check表示單選按鈕輸入的名稱、值和選中狀態。 'item'=>function($index, $label, $name, $checked, $value){ // 這塊跟encode是在下才疏學淺暫時還未明白啥子用處，待弄明白后在補上，若有碼友知曉這塊具體作用用法，希望不吝賜教，感激 // echo $index, $label, $name, $checked, $value; }, // 除此yii2有規定屬性之外還可自定義任意屬性 且上述屬性均不是必填 ])?>
2.3 checkbox多選框系列
<?php $form=ActiveForm::begin(['id'=>'login','class'=>'login'])?> <!-- checbox方法 該方法與radio 方法近似就不多說了 直接擼代碼 具體可參考 radio --> <?= $form->field($model, 'username')->checkbox([ // 隱藏域中的值 'uncheck' =>'test1', // 定義lebal的內容 'label' =>'test', // label上的任意屬性 'labelOptions'=>[ 'gs'=>'test' ] ],true)?> <!-- checkboxList方法 多選框 --> <?= $form->field($model, 'username')->checkboxList([ '1'=>'籃球', '2'=>'足球', '3'=>'游戲', '4'=>'讀書' ],[ // tag聲改變 class="radio"的父級標簽 若tag設置為h3 // 則 <div id="loginform-username" key="testKey" role="radiogroup" aria-required="true"> // => 轉為 <h3 id="loginform-username" key="testKey" role="radiogroup" aria-required="true"> // <div class="form-group field-loginform-username required"> // <label class="control-label">Username</label> // <input type="hidden" name="LoginForm[username]" value=""> // <div id="loginform-username" key="testKey" role="radiogroup" aria-required="true"> // <div class="radio"><label><input type="radio" name="LoginForm[username]" value="0"> a</label></div> // <div class="radio"><label><input type="radio" name="LoginForm[username]" value="1"> b</label></div> // <div class="radio"><label><input type="radio" name="LoginForm[username]" value="2"> c</label></div> // </div> // <p class="help-block help-block-error"></p> // </div> 'tag'=>'h3', // 未選擇是默認提交的值 'unselect'=>'1', // 如果設置了item選項，則忽略此選項 'encode'=>false, // 每個單選塊之間的內容 寫的是什么字符串輸出就什么字符串,建議如無特殊情況 請忽視該字段 // 'separator'=>',', // 定義在每個input單選按鈕上的屬性 'itemOptions'=>[ 'tess'=>'jzq' ], // 用於替換html指向函數后若不做操作將會輸出空 // 'item'=>function($index, $label, $name, $checked, $value){ // 這塊跟encode是在下才疏學淺暫時還未明白啥子用處，待弄明白后在補上，若有碼友知曉這塊具體作用用法，希望不吝賜教，感激 // echo $index, $label, $name, $checked, $value; // }, // 除此yii2有規定屬性之外還可自定義任意屬性 且上述屬性均不是必填 ])?> <?php ActiveForm::end();?>
2.4 select下拉列表系列
<?php $form=ActiveForm::begin(['id'=>'login','class'=>'login'])?> <!-- dropDownList方法 下拉列表 --> <?= $form->field($model, 'username')->dropDownList([ // 二維數組直接回報上組標簽 'test'=>[ '1'=>'籃球', '2'=>'足球', ], '3'=>'游戲', '4'=>'讀書' ],[ // 設置下拉列表的默認請選擇選項 'prompt'=>[ 'text' => '請選擇', 'options' => ['value' => 'none', 'class' => 'prompt', 'label' => 'Select'] ], 'encode'=>false, // 對select option的設置條件以及更改內容 'options'=>[ // 設置禁止選擇項 '2' => ['disabled' => true], //替換或者追加指定key的內容,實際上原內容還在只是假設了 label 屬性 和顯示了 label的屬性值
'4' => ['label' => 'value 2'], ], 'encodeSpaces'=>true // 除此yii2有規定屬性之外還可自定義任意屬性 且上述屬性均不是必填 ])?> <?php ActiveForm::end();?>
2.5 widget 小部件
<?php $form=ActiveForm::begin(['id'=>'login','class'=>'login'])?> <!-- 小部件 用於強制輸入正確內容的input部件 --> <?= $form->field($model, 'username',[ 'template'=>'<h2>test</h2> {label} {input} {error}' ])->widget(\yii\widgets\MaskedInput::className(), [ // 指定input類型 // 'type'=>'time', // 指定必須輸入的類型 'mask' => '999-9999-9999', 'options'=>['class' => 'form-control test'] ]); ?> <!-- 用於生成帶圖片驗證的input小部件 --> <?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [ 'captchaAction' => 'login/captcha', 'options' => [ 'class' => 'two', 'id'=>'two', 'placeholder' => '請輸入驗證碼', ], 'template' => '{input}{image}', 'imageOptions' => [ 'alt' => 'images', ] ])?>
--------------------- 最后一個並未實測 -------------------------------
<!-- 自定義小部件 需在widget文件定義源文件 --> <?= $form->field($model, 'username')->widget('WidgetClassName', [ // configure additional widget properties here ]) ?> <?php ActiveForm::end();?>
以上是這段時間使用的一篇小總結 如有用法錯誤敬請指點