记录一下
选择控件js插件
1 /* 2 * 滚动控件，包含地址选择、时间选择、自定义单选 3 */ 4 //js_inputbox input 输入框 5 //js_pickviewselect 下拉单项选择 6 //js_pickviewdate 下拉选择时间 7 //js_pickviewcity 下拉选择地址 8 //data-options="{title:'下拉的标题',changeValue:自定义事件（左右默认取消确定）,datasource:@ViewBag.数据源 后台给的 数据存到隐藏域}" 9 10 $(function () { 11 12 $(document).ready(function () { 13 $(".js_pickviewdate").pickviewdate(); 14 $(".js_pickviewselect").pickviewselect(); 15 $(".js_pickviewcity").pickviewcity(); 16 $("input.js_inputbox,textarea.js_inputbox").inputbox(); 17 }); 18 19 $.fn.pickviewcity = function (options, params) { 20 if (typeof (options) == "string") { 21 $.pickview.methods[options](this, params); 22 } 23 return this.each(function () { 24 var state = $.data(this, 'pickviewcity'); 25 if (state) { 26 $.extend(state, options); 27 } else { 28 var eleSetting = $(this).attr("data-options"); 29 if (!eleSetting) { 30 eleSetting = { text: "请选择地址" }; 31 } else { 32 eleSetting = eval("(" + eleSetting + ")"); 33 } 34 state = $.extend({}, $.pickviewcity.defaults.config, eleSetting, options); 35 state.province = { code: $(this).find("input.pv_province").val() }; 36 state.city = { code: $(this).find("input.pv_city").val() }; 37 state.area = { code: $(this).find("input.pv_area").val() }; 38 $.data(this, 'pickviewcity', state); 39 40 41 $(this).on("click", function () { 42 $.pickviewcity.setLastPickElement(this); 43 var initData = []; 44 if (state.province) { 45 initData.push(state.province.code); 46 } 47 if (state.city) { 48 initData.push(state.city.code); 49 } 50 if (state.area) { 51 initData.push(state.area.code); 52 } 53 if (initData.length <= 0) { 54 initData = ["51", "5101", "510101"]; 55 } 56 $.zProtocol({ 57 type: "Control.PickerViewCity", 58 path: "/Create/BodyBottom", 59 data: { text: state.text, textColor: state.textColor, fontSize: state.fontSize, menus: state.menus, initialData: initData.join(",") } 60 }); 61 }); 62 } 63 }); 64 } 65 66 $.fn.pickviewdate = function (options, params) { 67 if (typeof (options) == "string") { 68 $.pickview.methods[options](this, params); 69 } 70 return this.each(function () { 71 var state = $.data(this, 'pickviewdate'); 72 if (state) { 73 $.extend(state, options); 74 } else { 75 var eleSetting = $(this).attr("data-options"); 76 if (!eleSetting) { 77 return; 78 } 79 eleSetting = eval("(" + eleSetting + ")"); 80 state = $.extend({}, $.pickviewdate.defaults.config, eleSetting, options); 81 state.value = $(this).find("input:eq(1)").val(); 82 $.data(this, 'pickviewdate', state); 83 if (!state.date) { 84 state.value = $(this).find("input:eq(1)").val(); 85 //未设置或为9999 0001,则设置为当前时间，防止App不响应 by 雷 2017-3-7 86 if (!state.value || state.value.indexOf("9999") == 0 || state.value.indexOf("0001") == 0) { 87 var now = new Date(); 88 state.value = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate(); 89 } 90 state.value = state.value.replace(///g, '-'); 91 var reg = new RegExp("([0-9]+-[0-9]+-[0-9]+)", "gmi"); 92 var resultArray = reg.exec(state.value); 93 if (resultArray != null) { 94 state.value = resultArray[0]; //截取日期 2017-3-8 0:00:00 截为2017-3-8 95 } 96 } 97 98 $(this).on("click", function () { 99 $.pickviewdate.setLastPickElement(this); 100 $.zProtocol({ 101 type: "Control.PickerViewDate", 102 path: "/Create/BodyBottom", 103 data: { text: state.title, textColor: state.textColor, fontSize: state.fontSize, menus: state.menus, initialData: state.value } 104 }); 105 }); 106 } 107 }); 108 } 109 110 $.fn.pickviewselect = function (options, params) { 111 if (typeof (options) == "string") { 112 $.pickview.methods[options](this, params); 113 } 114 return this.each(function () { 115 var state = $.data(this, 'pickviewselect'); 116 if (state) { 117 $.extend(state, options); 118 } else { 119 var eleSetting = $(this).attr("data-options"); 120 if (!eleSetting) { 121 return; 122 } 123 eleSetting = eval("(" + eleSetting + ")"); 124 var saveState = $.extend({}, $.pickviewselect.defaults.config, eleSetting, options); 125 $.data(this, 'pickviewselect', saveState); 126 var initValue = $(this).find("input:eq(1)").val(); 127 128 var initIndex = 0; 129 if (initValue) { 130 for (var dIndex in saveState.datasource) { 131 if (initValue == saveState.datasource[dIndex].value) { 132 $(this).find("input:eq(0)").val(saveState.datasource[dIndex].text); 133 initIndex = dIndex; 134 break; 135 } 136 } 137 } 138 saveState.selectIndex = initIndex; 139 140 if (saveState.value) { 141 for (var dIndex in saveState.datasource) { 142 if (saveState.value == saveState.datasource[dIndex].value) { 143 $(this).find("input:eq(0)").val(saveState.datasource[dIndex].text); 144 break; 145 } 146 } 147 } 148 149 $(this).on("click", function () { 150 $.pickviewselect.setLastPickElement(this); 151 var config = $.data(this, 'pickviewselect'); 152 $.zProtocol({ 153 type: "Control.PickerViewSelect", 154 path: "/Create/BodyBottom", 155 data: { text: config.title, textColor: config.textColor, fontSize: config.fontSize, datasource: config.datasource, menus: config.menus, initialData: config.selectIndex } 156 }); 157 }); 158 } 159 }); 160 161 function initPickSelect(target, config) { 162 163 } 164 } 165 166 $.extend({ 167 pickviewcity: { 168 defaults: { 169 lastPickElement: undefined, 170 config: { 171 title: "请选择", 172 textColor: "000000", 173 fontSize: 14, 174 menus: [ 175 { 176 text: "确定", 177 textColor: "000000", 178 backColor: "FFFFFF", 179 fontSize: "12", 180 jsCallBack: "$.pickviewcity.changeValue('#pickview#')" 181 }, 182 { 183 text: "取消", 184 textColor: "000000", 185 backColor: "FFFFFF", 186 fontSize: "12" 187 } 188 ] 189 } 190 }, 191 getLastPickElement: function () { 192 return this.defaults.lastPickElement; 193 }, 194 setLastPickElement: function (element) { 195 this.defaults.lastPickElement = element; 196 }, 197 changeValue: function (addressObj) { 198 addressObj = eval("(" + addressObj + ")"); 199 var lastPickElement = this.getLastPickElement(); 200 var state = $.data(lastPickElement, "pickviewcity"); 201 state.province = { name: addressObj.provinceName, code: addressObj.provinceCode }; 202 state.city = { name: addressObj.cityName, code: addressObj.cityCode }; 203 state.area = { name: addressObj.districtName, code: addressObj.districtCode }; 204 $(lastPickElement).find("input:eq(0)").val(state.province.name + state.city.name + state.area.name); 205 $(lastPickElement).find("input.pv_province").val(state.province.code); 206 $(lastPickElement).find("input.pv_city").val(state.city.code); 207 $(lastPickElement).find("input.pv_area").val(state.area.code); 208 } 209 }, 210 pickviewdate: { 211 defaults: { 212 lastPickElement: undefined, 213 config: { 214 title: "请选择", 215 textColor: "000000", 216 fontSize: 16, 217 isShowWeek: false, 218 menus: [ 219 { 220 text: "确定", 221 textColor: "000000", 222 backColor: "FFFFFF", 223 fontSize: "12", 224 jsCallBack: "$.pickviewdate.changeValue('#pickview#')" 225 }, 226 { 227 text: "取消", 228 textColor: "000000", 229 backColor: "FFFFFF", 230 fontSize: "12" 231 } 232 ] 233 } 234 }, 235 getLastPickElement: function () { 236 return this.defaults.lastPickElement; 237 }, 238 setLastPickElement: function (element) { 239 this.defaults.lastPickElement = element; 240 }, 241 changeValue: function (dateObj) { 242 //alert(JSON.stringify(dateObj)); 243 dateObj = eval("(" + dateObj + ")"); 244 var lastPickElement = this.getLastPickElement(); 245 var state = $.data(lastPickElement, "pickviewdate"); 246 state.date = dateObj; 247 state.value = state.date.year + "-" + state.date.month + "-" + state.date.day; 248 $(lastPickElement).find("input:eq(1)").val(state.value); 249 if (state.isShowWeek) { 250 var weekDay = ['日', '一', '二', '三', '四', '五', '六']; 251 $(lastPickElement).find("input:eq(0)").val(state.value + ' 星期' + weekDay[dateObj.weekday]); 252 } 253 else { 254 $(lastPickElement).find("input:eq(0)").val(state.value); 255 } 256 257 } 258 }, 259 pickviewselect: { 260 defaults: { 261 lastPickElement: undefined, 262 config: { 263 title: "请选择", 264 textColor: "000000", 265 fontSize: 18, 266 menus: [ 267 { 268 text: "确定", 269 textColor: "000000", 270 backColor: "FFFFFF", 271 fontSize: "12", 272 jsCallBack: "$.pickviewselect.changeValue('#pickview#')" 273 }, 274 { 275 text: "取消", 276 textColor: "000000", 277 backColor: "FFFFFF", 278 fontSize: "12" 279 } 280 ] 281 } 282 }, 283 getLastPickElement: function () { 284 return this.defaults.lastPickElement; 285 }, 286 setLastPickElement: function (element) { 287 this.defaults.lastPickElement = element; 288 }, 289 changeValue: function (selectObj) { 290 if (typeof (selectObj) == "string") { 291 selectObj = eval("(" + selectObj + ")"); 292 } 293 var lastPickElement = this.getLastPickElement(); 294 var oldValue = $(lastPickElement).find("input:eq(1)").val(); 295 $(lastPickElement).find("input:eq(0)").val(selectObj.text); 296 $(lastPickElement).find("input:eq(1)").val(selectObj.value); 297 var state = $.data(lastPickElement, "pickviewselect"); 298 var selectIndex = 0; 299 for (var i in state.datasource) { 300 if (state.datasource[i].value == selectObj.value) { 301 selectIndex = i; 302 break; 303 } 304 } 305 state.selectIndex = selectIndex; 306 //如果定义有值改变事件，则调用值改变的回调 307 if (oldValue != selectObj.value && state.changeValue) { 308 state.changeValue(selectObj.value, selectObj.text, oldValue); 309 } 310 } 311 } 312 }); 313 314 $.fn.inputbox = function (options, params) { 315 if (typeof (options) == "string") { 316 $.inputbox.methods[options](this, params); 317 } 318 return this.each(function () { 319 var state = $.data(this, 'inputbox'); 320 if (state) { 321 $.extend(state, options); 322 } else { 323 $(this).on("click", function () { 324 var inputType = $(this).prop("type"); 325 if (!inputType || inputType == "text") { 326 inputType = "defaults"; 327 } else { 328 if (inputType == "tel") { 329 inputType = "phone"; 330 } 331 } 332 var placeholder = $(this).prop("placeholder"); 333 if (!placeholder) { 334 placeholder = "" 335 } 336 337 var setting = { 338 keyboardtype: inputType, 339 placeholder: placeholder, 340 text: $(this).val(), 341 }; 342 343 var eleSetting = $(this).attr("data-options"); 344 if (eleSetting) { 345 eleSetting = eval("(" + eleSetting + ")"); 346 } 347 348 setting = $.extend({}, $.inputbox.defaults.config, setting, eleSetting); 349 if (setting.regex) { 350 setting.regex = $.toBase64Str(setting.regex); 351 } 352 var eleProp = $(this).attr("data-options") 353 $.inputbox.setLastInputElement(this); 354 $.zProtocol({ 355 type: "Control.InputBox", 356 path: "/Create/BodyBottom", 357 data: setting 358 }); 359 }); 360 } 361 }); 362 }; 363 $.extend({ 364 inputbox: { 365 defaults: { 366 lastInputEle: undefined, 367 config: { 368 text: "", 369 placeholder: "", 370 buttonBackGroundColor: "000000", 371 buttonFontSize: "18", 372 buttonText: "确定", 373 keyboardtype: "default", 374 jscallback: "$.inputbox.changeValue('#inputbox#')" 375 }, 376 }, 377 getLastInputElement: function () { 378 return this.defaults.lastInputEle; 379 }, 380 setLastInputElement: function (element) { 381 this.defaults.lastInputEle = element; 382 }, 383 changeValue: function (selectObj) { 384 var lastInputElement = this.getLastInputElement(); 385 $(lastInputElement).val(selectObj); 386 } 387 } 388 }); 389 });
给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>