MUIを選択し、ドロップダウンリストスタイルの最適化

       MUIアプリの開発者は最近、MUIのフレームワークを発見した<選択>フォームは、モバイルクライアントのポップスタイルを最適化されていないカスタムCSSが良い結果を示さなかった、満足のいくものではなかったです。公式文書を読み取ることによってピッカー(セレクタ)が見出されたこのコンポーネントは、モバイル端末のスタイルドロップダウンリストの特定の使用を最適化することができ、以下の通りであります:

1.ページで、導入されます

  • <スクリプトSRC = "../../ JS / mui.picker.js"> </ SCRIPT>
  • <スクリプトSRC = "../../ JS / mui.poppicker.js"> </ SCRIPT>

ページmui.min.jsが戻って何度も実際の開発を導入しないこと2.注意を繰り返しリードピッカーコールバック関数の導入は複数回実行することを発見しました。

そして、これら二つの文書やページの機能を記述も公式文書では、私は機能が比較的単純で書いたものの一例を掲載していることができます。

//因表单页面是根据后台接口动态生成所以此处需要传递参数key为表单ID,data为下拉列表中所需要展示得数据。
function selectData(key,data){
		var leaveTypeArray=new Array();
		var leaveTypeData=data.split(",");
//此处for循环为拼接picker定义得数据格式例如: picker.setData([{value:'zz',text:'智子'}]); 
		for(var i=0;i<leaveTypeData.length-1;i++){
					var str=leaveTypeData[i];
					var item={value:str,text:str};
					leaveTypeArray.push(item);
		}
		    var picker = new mui.PopPicker();
			picker.setData(leaveTypeArray);
            //这里是回调函数在用户选中后所需要执行得操作
			picker.show(function (selectItems) {
			    picker.setData(leaveTypeArray);
			    $("#"+key).val(selectItems[0].value);
				   
			});
	}

3.ページには、例えば、その上でクリックイベントを、現在の入力タグを実行します

  • <入力οnclick= "selectData(\ '' + inputkey + '\' \ '' + dataStr + '\')" タイプ= "テキスト" クラス= "MUI入力クリア" 読み取り専用= "読み取り専用">
リリース6元記事 ウォン称賛7 ビュー1097

おすすめ

転載: blog.csdn.net/weixin_43814408/article/details/105238551