选择控件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 <= 0) {
                        initData = ["51", "5101", "510101"];
                    }
                    $.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("9999") == 0 || state.value.indexOf("0001") == 0) {
                        var now = new Date();
                        state.value = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + 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[0]; //截取日期 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 = 0;
                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: "000000",
                    fontSize: 14,
                    menus: [
                       {
                           text: "确定",
                           textColor: "000000",
                           backColor: "FFFFFF",
                           fontSize: "12",
                           jsCallBack: "$.pickviewcity.changeValue('#pickview#')"
                       },
                        {
                            text: "取消",
                            textColor: "000000",
                            backColor: "FFFFFF",
                            fontSize: "12"
                        }
                    ]
                }
            },
            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: "000000",
                    fontSize: 16,
                    isShowWeek: false,
                    menus: [
                       {
                           text: "确定",
                           textColor: "000000",
                           backColor: "FFFFFF",
                           fontSize: "12",
                           jsCallBack: "$.pickviewdate.changeValue('#pickview#')"
                       },
                        {
                            text: "取消",
                            textColor: "000000",
                            backColor: "FFFFFF",
                            fontSize: "12"
                        }
                    ]
                }
            },
            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: "000000",
                    fontSize: 18,
                    menus: [
                       {
                           text: "确定",
                           textColor: "000000",
                           backColor: "FFFFFF",
                           fontSize: "12",
                           jsCallBack: "$.pickviewselect.changeValue('#pickview#')"
                       },
                        {
                            text: "取消",
                            textColor: "000000",
                            backColor: "FFFFFF",
                            fontSize: "12"
                        }
                    ]
                }
            },
            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 = 0;
                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: "000000",
                    buttonFontSize: "18",
                    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>