<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link href="mobiscroll-2.13.2.full.min.css" rel="stylesheet" />
<!--功能说明:
mobiscroll select选择, year选择, date选择, time选择示例完整代码demo
不必再为依赖不清发愁, 完整代码demo, 详细注释说明, 拿来即用!!!!
其中, 包括市面上见不到的 单选框, 多选框, 日期等组件 数值的初始化 -->
<title>demo1</title>
<style type="text/css">
.demo-non-form {
color: initial;
width: 100%;
padding: 10px;
margin: 6px 0 12px 0;
border: 1px solid #ccc;
border-radius: 0;
font-family: arial, verdana, sans-serif;
font-size: 14px;
box-sizing: border-box;
-webkit-appearance: none;
}
.demo-container {
padding: 0 1em;
}
.external-container {
display: flex;
}
.external-container button.external-button {
font-weight: 400;
padding: 10px;
margin: 6px 0 12px 16px;
}
<%--========================================--%>
.section {
position: relative;
height: 32px;
padding-left: 80px;
padding-right: 15px;
margin-bottom: 10px;
box-sizing: border-box;
}
.section label {
left: 0;
top: 0;
bottom: 0;
height: 32px;
line-height: 32px;
;
font-size: 12px;
}
.section>select, .section>input {
width: 100%;
height: 100%;
display: block;
padding: 0 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div style="height: 6em;">
<li id="sex">
<div class="mbase-menu-title">性别</div>
<div class="mbase-menu-txt">未设置</div>
<div class="clear"></div>
</li>
<ul id="sex-list" style="display: none">
<li>先生</li>
<li>女士</li>
</ul>
</div>
<!-- ============================================================= -->
<!-- Select demo markup -->
<div class="section">
<label>普通控件</label>
<select id="slct0">
<option value="">请选择</option>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
<option value="4">选项四</option>
<option value="5">选项五</option>
<option value="6">选项六</option>
<option value="7">选项七</option>
<option value="8">选项八</option>
<option value="9">选项九</option>
</select>
</div>
<!-- ============================================================= -->
<!-- Select demo markup -->
<div class="section">
<label>普通控件1</label>
<select id="slct1">
<option value="">请选择</option>
<option value="1">选项一rrr</option>
<option value="2">选项二ssd</option>
<option value="3">选项三aew</option>
</select>
</div>
<div class="section">
<label>普通控件2</label>
<select id="slct2">
<option value="">请选择</option>
<option value="1">选项一222</option>
<option value="2">选项二222</option>
<option value="3">选项三222</option>
</select>
</div>
<div class="section">
<label>多选控件</label>
<!--jquery mobile的时候添加 data-role="none" data-native-menu="false" 属性到select标签中-->
<select id="slct3" multiple="multiple">
<%--<option value="">----</option>--%>
<option value="mon">星期一</option>
<option value="tue">星期二</option>
<option value="wed">星期三</option>
<option value="thu">星期四</option>
<option value="fri">星期五</option>
<option value="sat">星期六</option>
<option value="sun">星期日</option>
</select>
</div>
<!-- Date demo markup -->
<div class="section">
<label>日期控件</label>
<input type="text" id="demo_date" class="mobile-date" />
</div>
<!-- Date & Time demo markup -->
<div class="section">
<label>日期时间控件</label>
<input type="text" id="demo_datetime" />
</div>
<!-- Time demo markup -->
<div class="section">
<label>时间控件</label>
<input type="text" id="demo_time" />
</div>
</div>
<script src="jquery-2.1.3.min.js"></script>
<script src="mobiscroll-2.13.2.full.min.js"></script>
<script type="text/javascript">
var theme = "android-ics light"; // mobiscroll auto ios
var mode = "scroller";
var display = "modal";
var lang="zh";
var hnObj = {
'slct0': '请您选择',
'slct1': '请您选择',
'slct2': '请您选择',
'slct3': '请您选择',
'demo_date': '请您选择'
};
$(function(){
// ========================== init select ========================== //
initSelect();
function initSelect() {
// 初始化所有select组件
$.each($('select'), function (index, item) {
initItm(item.id, hnObj[item.id]);
var iArray_str = '3'; // 初始值
if (item.id === 'slct3') { // 多选初始值
iArray_str = 'wed,fri,sun';
}
initSelectVal(item, iArray_str);
// 获取该组件jquery对象
var inst = $('#' + item.id).mobiscroll('getInst');
initSelector(item, inst, iArray_str)
// var va2 = $('#demo_select_lds').mobiscroll('getValue') -- 获取value值
});
}
function initItm(id, headerTextName) {
// 'setValue', value
$('#' + id).mobiscroll().select({
theme: theme, // Specify theme like: theme: 'ios' or omit setting to use default
mode: mode, // Specify scroller mode like: mode: 'mixed' or omit setting to use default
display: display, // Specify display mode like: display: 'bottom' or omit setting to use default
headerText: headerTextName,
lang: lang, // Specify language like: lang: 'pl' or omit setting to use default
closeOnOverlay: true, // 设置为false, 则点击空白地方不会关闭弹出层, 默认为true
onSelect: function (valueText, inst) { // 选中时的自定义动作, 将选中值放到需要的地方
//var ths = $(this);
//var id = ths.attr('id');
//var isMultiple = inst.settings.wheels[0][0].multiple;
//if(isMultiple){
// var valt = getVals(inst.getValues());
// $("#" + id.replace('0', '')).val(valt);
// console.log(valt);
//} else {
// $("#" + id.replace('0', '')).val(inst.getValue());
// console.log(inst.getValue());
//}
//console.log(id);
//console.log($("#" + id + '_dummy').val());
//function getVals(array) {
// var str = '';
// for (var i in array) {
// if (i < array.length - 1) {
// str += array[i] + ',';
// } else {
// str += array[i];
// }
// }
// return str;
// }
}
});
}
// 初始化select初始值展示
function initSelectVal(ths, iArray_str) {
var id0 = ths.id;
var idd_obj = $("#" + id0 + '_dummy');
var iArray = iArray_str.split(',');
idd_obj.val(getNames());
console.log(idd_obj.val());
function getNames() {
var str = '';
var that = $("#" + id0 + " option");
for (var i in iArr
mobiscroll select选择, year选择, date选择, time选择示例完整代码
需积分: 28 154 浏览量
2018-08-01
10:22:13
上传
评论
收藏 100KB RAR 举报
mobiscroll-min-2.13.2-use.rar （5个子文件） 
mobiscroll-min-2.13.2-use 
mobiscroll-2.13.2.full.min.css 55KB jquery-1.11.3.min.js 99KB mobiscroll-2.13.2.full.min.js 72KB
demo1.html 12KB jquery-2.1.3.min.js 82KB资源评论
