正文
选择控件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>
