选择控件js插件和使用方法

记录一下

选择控件js插件

 /*
 *   滚动控件，包含地址选择、时间选择、自定义单选
 */
 //js_inputbox input  输入框
 //js_pickviewselect 下拉单项选择
 //js_pickviewdate 下拉选择时间
 //js_pickviewcity 下拉选择地址
 //data-options="{title:'下拉的标题',changeValue:自定义事件（左右默认取消确定）,datasource:@ViewBag.数据源 后台给的  数据存到隐藏域}"
 
 $(function () {
 
     $(document).ready(function () {
         $(".js_pickviewdate").pickviewdate();
         $(".js_pickviewselect").pickviewselect();
         $(".js_pickviewcity").pickviewcity();
         $("input.js_inputbox,textarea.js_inputbox").inputbox();
     });
 
     $.fn.pickviewcity = function (options, params) {
         if (typeof (options) == "string") {
             $.pickview.methods[options](this, params);
         }
         return this.each(function () {
             var state = $.data(this, 'pickviewcity');
             if (state) {
                 $.extend(state, options);
             } else {
                 var eleSetting = $(this).attr("data-options");
                 if (!eleSetting) {
                     eleSetting = { text: "请选择地址" };
                 } else {
                     eleSetting = eval("(" + eleSetting + ")");
                 }
                 state = $.extend({}, $.pickviewcity.defaults.config, eleSetting, options);
                 state.province = { code: $(this).find("input.pv_province").val() };
                 state.city = { code: $(this).find("input.pv_city").val() };
                 state.area = { code: $(this).find("input.pv_area").val() };
                 $.data(this, 'pickviewcity', state);
 
                 $(this).on("click", function () {
                     $.pickviewcity.setLastPickElement(this);
                     var initData = [];
                     if (state.province) {
                         initData.push(state.province.code);
                     }
                     if (state.city) {
                         initData.push(state.city.code);
                     }
                     if (state.area) {
                         initData.push(state.area.code);
                     }
                     if (initData.length <= ) {
                         initData = ["", "", ""];
                     }
                     $.zProtocol({
                         type: "Control.PickerViewCity",
                         path: "/Create/BodyBottom",
                         data: { text: state.text, textColor: state.textColor, fontSize: state.fontSize, menus: state.menus, initialData: initData.join(",") }
                     });
                 });
             }
         });
     }
 
     $.fn.pickviewdate = function (options, params) {
         if (typeof (options) == "string") {
             $.pickview.methods[options](this, params);
         }
         return this.each(function () {
             var state = $.data(this, 'pickviewdate');
             if (state) {
                 $.extend(state, options);
             } else {
                 var eleSetting = $(this).attr("data-options");
                 if (!eleSetting) {
                     return;
                 }
                 eleSetting = eval("(" + eleSetting + ")");
                 state = $.extend({}, $.pickviewdate.defaults.config, eleSetting, options);
                 state.value = $(this).find("input:eq(1)").val();
                 $.data(this, 'pickviewdate', state);
                 if (!state.date) {
                     state.value = $(this).find("input:eq(1)").val();
                     //未设置或为9999 0001,则设置为当前时间，防止App不响应 by 雷 2017-3-7
                     if (!state.value || state.value.indexOf("") ==  || state.value.indexOf("") == ) {
                         var now = new Date();
                         state.value = now.getFullYear() + "-" + (now.getMonth() + ) + "-" + now.getDate();
                     }
                     state.value = state.value.replace(/\//g, '-');
                     var reg = new RegExp("([0-9]+-[0-9]+-[0-9]+)", "gmi");
                     var resultArray = reg.exec(state.value);
                     if (resultArray != null) {
                         state.value = resultArray[]; //截取日期 2017-3-8 0:00:00 截为2017-3-8
                     }
                 }
 
                 $(this).on("click", function () {
                     $.pickviewdate.setLastPickElement(this);
                     $.zProtocol({
                         type: "Control.PickerViewDate",
                         path: "/Create/BodyBottom",
                         data: { text: state.title, textColor: state.textColor, fontSize: state.fontSize, menus: state.menus, initialData: state.value }
                     });
                 });
             }
         });
     }
 
     $.fn.pickviewselect = function (options, params) {
         if (typeof (options) == "string") {
             $.pickview.methods[options](this, params);
         }
         return this.each(function () {
             var state = $.data(this, 'pickviewselect');
             if (state) {
                 $.extend(state, options);
             } else {
                 var eleSetting = $(this).attr("data-options");
                 if (!eleSetting) {
                     return;
                 }
                 eleSetting = eval("(" + eleSetting + ")");
                 var saveState = $.extend({}, $.pickviewselect.defaults.config, eleSetting, options);
                 $.data(this, 'pickviewselect', saveState);
                 var initValue = $(this).find("input:eq(1)").val();
 
                 var initIndex = ;
                 if (initValue) {
                     for (var dIndex in saveState.datasource) {
                         if (initValue == saveState.datasource[dIndex].value) {
                             $(this).find("input:eq(0)").val(saveState.datasource[dIndex].text);
                             initIndex = dIndex;
                             break;
                         }
                     }
                 }
                 saveState.selectIndex = initIndex;
 
                 if (saveState.value) {
                     for (var dIndex in saveState.datasource) {
                         if (saveState.value == saveState.datasource[dIndex].value) {
                             $(this).find("input:eq(0)").val(saveState.datasource[dIndex].text);
                             break;
                         }
                     }
                 }
 
                 $(this).on("click", function () {
                     $.pickviewselect.setLastPickElement(this);
                     var config = $.data(this, 'pickviewselect');
                     $.zProtocol({
                         type: "Control.PickerViewSelect",
                         path: "/Create/BodyBottom",
                         data: { text: config.title, textColor: config.textColor, fontSize: config.fontSize, datasource: config.datasource, menus: config.menus, initialData: config.selectIndex }
                     });
                 });
             }
         });
 
         function initPickSelect(target, config) {
 
         }
     }
 
     $.extend({
         pickviewcity: {
             defaults: {
                 lastPickElement: undefined,
                 config: {
                     title: "请选择",
                     textColor: "",
                     fontSize: ,
                     menus: [
                        {
                            text: "确定",
                            textColor: "",
                            backColor: "FFFFFF",
                            fontSize: "",
                            jsCallBack: "$.pickviewcity.changeValue('#pickview#')"
                        },
                         {
                             text: "取消",
                             textColor: "",
                             backColor: "FFFFFF",
                             fontSize: ""
                         }
                     ]
                 }
             },
             getLastPickElement: function () {
                 return this.defaults.lastPickElement;
             },
             setLastPickElement: function (element) {
                 this.defaults.lastPickElement = element;
             },
             changeValue: function (addressObj) {
                 addressObj = eval("(" + addressObj + ")");
                 var lastPickElement = this.getLastPickElement();
                 var state = $.data(lastPickElement, "pickviewcity");
                 state.province = { name: addressObj.provinceName, code: addressObj.provinceCode };
                 state.city = { name: addressObj.cityName, code: addressObj.cityCode };
                 state.area = { name: addressObj.districtName, code: addressObj.districtCode };
                 $(lastPickElement).find("input:eq(0)").val(state.province.name + state.city.name + state.area.name);
                 $(lastPickElement).find("input.pv_province").val(state.province.code);
                 $(lastPickElement).find("input.pv_city").val(state.city.code);
                 $(lastPickElement).find("input.pv_area").val(state.area.code);
             }
         },
         pickviewdate: {
             defaults: {
                 lastPickElement: undefined,
                 config: {
                     title: "请选择",
                     textColor: "",
                     fontSize: ,
                     isShowWeek: false,
                     menus: [
                        {
                            text: "确定",
                            textColor: "",
                            backColor: "FFFFFF",
                            fontSize: "",
                            jsCallBack: "$.pickviewdate.changeValue('#pickview#')"
                        },
                         {
                             text: "取消",
                             textColor: "",
                             backColor: "FFFFFF",
                             fontSize: ""
                         }
                     ]
                 }
             },
             getLastPickElement: function () {
                 return this.defaults.lastPickElement;
             },
             setLastPickElement: function (element) {
                 this.defaults.lastPickElement = element;
             },
             changeValue: function (dateObj) {
                 //alert(JSON.stringify(dateObj));
                 dateObj = eval("(" + dateObj + ")");
                 var lastPickElement = this.getLastPickElement();
                 var state = $.data(lastPickElement, "pickviewdate");
                 state.date = dateObj;
                 state.value = state.date.year + "-" + state.date.month + "-" + state.date.day;
                 $(lastPickElement).find("input:eq(1)").val(state.value);
                 if (state.isShowWeek) {
                     var weekDay = ['日', '一', '二', '三', '四', '五', '六'];
                     $(lastPickElement).find("input:eq(0)").val(state.value + ' 星期' + weekDay[dateObj.weekday]);
                 }
                 else {
                     $(lastPickElement).find("input:eq(0)").val(state.value);
                 }
 
             }
         },
         pickviewselect: {
             defaults: {
                 lastPickElement: undefined,
                 config: {
                     title: "请选择",
                     textColor: "",
                     fontSize: ,
                     menus: [
                        {
                            text: "确定",
                            textColor: "",
                            backColor: "FFFFFF",
                            fontSize: "",
                            jsCallBack: "$.pickviewselect.changeValue('#pickview#')"
                        },
                         {
                             text: "取消",
                             textColor: "",
                             backColor: "FFFFFF",
                             fontSize: ""
                         }
                     ]
                 }
             },
             getLastPickElement: function () {
                 return this.defaults.lastPickElement;
             },
             setLastPickElement: function (element) {
                 this.defaults.lastPickElement = element;
             },
             changeValue: function (selectObj) {
                 if (typeof (selectObj) == "string") {
                     selectObj = eval("(" + selectObj + ")");
                 }
                 var lastPickElement = this.getLastPickElement();
                 var oldValue = $(lastPickElement).find("input:eq(1)").val();
                 $(lastPickElement).find("input:eq(0)").val(selectObj.text);
                 $(lastPickElement).find("input:eq(1)").val(selectObj.value);
                 var state = $.data(lastPickElement, "pickviewselect");
                 var selectIndex = ;
                 for (var i in state.datasource) {
                     if (state.datasource[i].value == selectObj.value) {
                         selectIndex = i;
                         break;
                     }
                 }
                 state.selectIndex = selectIndex;
                 //如果定义有值改变事件，则调用值改变的回调
                 if (oldValue != selectObj.value && state.changeValue) {
                     state.changeValue(selectObj.value, selectObj.text, oldValue);
                 }
             }
         }
     });
 
     $.fn.inputbox = function (options, params) {
         if (typeof (options) == "string") {
             $.inputbox.methods[options](this, params);
         }
         return this.each(function () {
             var state = $.data(this, 'inputbox');
             if (state) {
                 $.extend(state, options);
             } else {
                 $(this).on("click", function () {
                     var inputType = $(this).prop("type");
                     if (!inputType || inputType == "text") {
                         inputType = "defaults";
                     } else {
                         if (inputType == "tel") {
                             inputType = "phone";
                         }
                     }
                     var placeholder = $(this).prop("placeholder");
                     if (!placeholder) {
                         placeholder = ""
                     }
 
                     var setting = {
                         keyboardtype: inputType,
                         placeholder: placeholder,
                         text: $(this).val(),
                     };
 
                     var eleSetting = $(this).attr("data-options");
                     if (eleSetting) {
                         eleSetting = eval("(" + eleSetting + ")");
                     }
 
                     setting = $.extend({}, $.inputbox.defaults.config, setting, eleSetting);
                     if (setting.regex) {
                         setting.regex = $.toBase64Str(setting.regex);
                     }
                     var eleProp = $(this).attr("data-options")
                     $.inputbox.setLastInputElement(this);
                     $.zProtocol({
                         type: "Control.InputBox",
                         path: "/Create/BodyBottom",
                         data: setting
                     });
                 });
             }
         });
     };
     $.extend({
         inputbox: {
             defaults: {
                 lastInputEle: undefined,
                 config: {
                     text: "",
                     placeholder: "",
                     buttonBackGroundColor: "",
                     buttonFontSize: "",
                     buttonText: "确定",
                     keyboardtype: "default",
                     jscallback: "$.inputbox.changeValue('#inputbox#')"
                 },
             },
             getLastInputElement: function () {
                 return this.defaults.lastInputEle;
             },
             setLastInputElement: function (element) {
                 this.defaults.lastInputEle = element;
             },
             changeValue: function (selectObj) {
                 var lastInputElement = this.getLastInputElement();
                 $(lastInputElement).val(selectObj);
             }
         }
     });
 });

给input加上相应的class（

js_inputbox           input输入框
js_pickviewselect   下拉单项选择
js_pickviewdate    下拉选择时间
js_pickviewcity      下拉选择地址

）

//input输入框：　　　　　　　　　　
<div class="js_inputbox">汉字:<input name="hanz" type="text" data-tipName="汉字" data-valid='{required:true,CHS:true,maxLength:4}'/></div> 
 
//js_pickviewselect 下拉单项选择：               data-options="{title:'下拉的标题',changeValue:自定义事件（左右默认取消确定）,datasource:@ViewBag.数据源 后台给的 用来将数据存到隐藏域}"
<div class="js_pickviewselect">选择:<input name="xz" type="text" data-tipName="选择" data-valid='{required:true,CHS:true,maxLength:4}'/></div>
<input type="hidden" name="dsd" data-valid='{required:true,CHS:true} data-options="{title:'装修',changeValue:自定义事件（左右默认取消，确定）,datasource:@ViewBag.后台给的数据源 }' />
 
// js_pickviewdate 下拉选择时间：
<div class="js_pickviewdate ">选择:<input name="xzsj" type="text" data-tipName="选择时间" data-valid='{required:true,CHS:true,maxLength:4}'/></div>
 
//js_pickviewcity 下拉选择地址 {pv_province省   pv_city市  pv_area区  放在隐藏域的class }
<p class="f_pr text js_pickviewcity">
<input type="text" placeholder="选择省份地区" name="LocationArea" value="@(string.Format("{0}{1}{2}",Model.ProvinceName,Model.CityName,Model.AreaName))" readonly="readonly"/>
@Html.HiddenFor(model => model.ProvinceCode, new { @class = "pv_province", @data_tipName = "省份地区", @data_valid = "{selectRequired:true}" })
@Html.HiddenFor(model => model.CityCode, new { @class = "pv_city", @data_tipName = "省份地区", @data_valid = "{selectRequired:true}" })
@Html.HiddenFor(model => model.AreaCode, new { @class = "pv_area" , @data_tipName = "省份地区", @data_valid = "{selectRequired:true}" })
</p>