MUIDtPickerMultiLevelPopPicker示例_mui.DtPicker资源-CSDN文库

共12个文件

js：6个

css：4个

svg：1个

DtPicker

4星 · 超过85%的资源需积分: 11 121 浏览量 2018-05-27 11:13:54 上传评论收藏 159KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

MUI.zip （12个子文件）

选择控件

test.html 6KB

Json2.js 4KB

mui

css

mui.css 74KB

mui.picker.css 6KB

mui.picker.all.css 46KB

mui.picker.min.css 36KB

img

icon_choose.svg 304B

mui.picker.all.js 93KB

mui.min.js 113KB

data.city.js 181KB

mui.picker.min.js 63KB

jquery-3.2.1.min.js 85KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telephone=yes" /> <title></title> <link href="Js/mui/css/mui.picker.min.css?v=2018.01.24.2" rel="stylesheet" /> <link type="text/css" href="Js/mui/css/mui.css" rel="stylesheet" /> <script type="text/javascript" src="Js/Json2.js"></script> <script src="Js/jquery-3.2.1.min.js" type="text/javascript"></script> <script type="text/javascript" src="Js/mui/js/mui.min.js"></script> <script type="text/javascript" src="Js/mui/js/mui.picker.min.js?v=2018.01.24.7"></script> </head> <body> <p class="select-control" style="background-color:blue;color:white;" data-type="Dealer" data-id="1">请在此作答</p> <p class="select-control" style="background-color:blue;color:white;" data-type="Date" data-id="2">请选择日期</p> <p class="select-control" style="background-color:blue;color:white;" data-type="VehicleModel" data-id="3">请选择车型车系</p> <script type="text/javascript"> var pickerList = new Array(); var PickerObj = new Object(); pickerList.push({ type: 'Dealer', id: '1' }); pickerList.push({ type: 'Date', id: '2' }); pickerList.push({ type: 'VehicleModel', id: '3' }); var picker_types = { dealer: 'Dealer', vehicle_model: 'VehicleModel', date: 'Date' } function GetSelectData() { // 根据picker类型请求picker数据，仅请求一次 var dealers = pickerList.filter(function (p) { return p.type == picker_types.dealer }); var vehicleModel = pickerList.filter(function (p) { return p.type == picker_types.vehicle_model }); var dates = pickerList.filter(function (p) { return p.type == picker_types.date }); if (dealers && dealers.length > 0) { var selectDataObj = [ { value: "", text: "安徽", children: [ { value: "", text: "合肥", children: [ { "value": " ", "text": "安徽鹏龙融富汽车销售服务有限公司 " } ] } ] }]; dealers.forEach(function (dealer, index) { var city_picker = new mui.MultiLevelPopPicker({ panelTitle: '经销商名称', layer: 3, titleWidthLayer: [20, 20, 50], defaultTitles: ['省份', '城市', '经销商'] }); city_picker.setData(selectDataObj); PickerObj[dealer.id] = city_picker; }); } if (vehicleModel && vehicleModel.length > 0) { var selectCarDataObj = [ { value: "", text: "A", children: [ { value: "", text: "A1" } ] }]; vehicleModel.forEach(function (vehicle, index) { var city_picker = new mui.MultiLevelPopPicker({ panelTitle: '车型', layer: 2, titleWidthLayer: [20, 40], defaultTitles: ['车型', '车系'] }); city_picker.setData(selectCarDataObj); PickerObj[vehicle.id] = city_picker; }); } if (dates && dates.length > 0) { dates.forEach(function(date, index) { var date_picker = new mui.DtPicker({ "type": "date", "beginYear": 2000, "endYear": 2030 }); PickerObj[date.id] = date_picker; }) } } function InitPickList() { $(".select-control").each(function () { var type = $(this).data("type"); var id = $(this).data("id"); var currentObj = $(this); $(this).click(function () { if (([picker_types.dealer, picker_types.vehicle_model].indexOf(type) > -1) && PickerObj[id] != undefined) { setTimeout(function () { PickerObj[id].show(function (items) { var selected = items.map(function (item) { return item.text }).join(' '); $(currentObj).prev().val(selected); $(currentObj).html(selected); }); }, 200); } else if (type == "Date" && PickerObj[id] != undefined) { setTimeout(function () { PickerObj[id].show(function (items) { if (items.text != "" && items.text != undefined) { $(currentObj).prev().val(items.text); $(currentObj).html(items.y.text + " 年 " + items.m.text + " 月 " + items.d.text + " 日"); } }); }, 200); } else if (PickerObj[id] = undefined) { GetSelectData(); } }); if (type == "Date") { //设置默认日期 var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); if (month >= 1 && month <= 9) { month = "0" + month; } if (day >= 0 && day <= 9) { day = "0" + day; } $(currentObj).prev().val(year + "-" + month + "-" + day); $(currentObj).html(year + " 年 " + month + " 月 " + day + " 日"); } }); } GetSelectData(); InitPickList(); </script> </body> </html>

评论收藏

内容反馈