源码动态 源码评测 源码技巧 网站运营 网页制作 网站开发 安全相关 软件教程 IDC资讯 业界消息
高级搜索
关键字:Discuz!  Axure  团购系统
最新更新发布资源提建议收藏本站
当前位置:A5下载 > 资讯报道 > 编程开发 > 网站开发 > jQuery基于muipicker实现仿ios时间选择

jQuery基于muipicker实现仿ios时间选择

作者:fang来源:a5源码浏览:时间:2016-02-23 11:36我要评论
本文给大家分享的是把jQuery的muipicker插件修改实现仿IOS时间选择特效,非常的不错,有需要的小伙伴可以参考下。

首先我们先来看原始的muipicker的例子

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<title></title>

<!--标准mui.css-->

<link rel="stylesheet" href="../css/mui.min.css">

<!--App自定义的css-->

<link rel="stylesheet" type="text/css" href="../css/app.css" />

<link href="../css/mui.picker.css" rel="stylesheet" />

<link href="../css/mui.poppicker.css" rel="stylesheet" />

<!--<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />-->

<style>

.mui-btn {

font-size: 16px;

padding: 8px;

margin: 3px;

}

h5.mui-content-padded {

margin-left: 3px;

margin-top: 20px !important;

}

h5.mui-content-padded:first-child {

margin-top: 12px !important;

}

.ui-alert {

text-align: center;

padding: 20px 10px;

font-size: 16px;

}

</style>

</head>

<body>

<header class="mui-bar mui-bar-nav">

<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

<h1 class="mui-title">picker(选择器)</h1>

</header>

<div class="mui-content">

<div class="mui-content-padded">

<h5 class="mui-content-padded">原生 SELECT</h5>

<select class="mui-btn mui-btn-block">

<option value="item-1">item-1</option>

<option value="item-2">item-2</option>

<option value="item-3">item-3</option>

<option value="item-4">item-4</option>

<option value="item-5">item-5</option>

</select>

<br />

<p>原生 SELECT(选择框)在不同的设备上UI可能会有差异,并且不支持多级联动(多个 SELECT 可实现,但较麻烦),故mui封装了picker组件,参见如下示例。</p>

<h5 class="mui-content-padded">普通示例</h5>

<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>一级选择示例 ...</button>

<div id='userResult' class="ui-alert"></div>

<h5 class="mui-content-padded">级联示例</h5>

<button id='showCityPicker' class="mui-btn mui-btn-block" type='button'>二级联动示例 ...</button>

<div id='cityResult' class="ui-alert"></div>

<button id='showCityPicker3' class="mui-btn mui-btn-block" type='button'>三级联动示例 ...</button>

<div id='cityResult3' class="ui-alert"></div>

</div>

</div>

<script src="../js/mui.min.js"></script>

<!--<script src="../js/mui.picker.min.js"></script>-->

<script src="../js/mui.picker.js"></script>

<script src="../js/mui.poppicker.js"></script>

<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>

<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>

<script>

(function($, doc) {

$.init();

$.ready(function() {

//普通示例

var userPicker = new $.PopPicker();

userPicker.setData([{

value: 'ywj',

text: '董事长 叶文洁'

}, {

value: 'aaa',

text: '总经理 艾AA'

}, {

value: 'lj',

text: '罗辑'

}, {

value: 'ymt',

text: '云天明'

}, {

value: 'shq',

text: '史强'

}, {

value: 'zhbh',

text: '章北海'

}, {

value: 'zhy',

text: '庄颜'

}, {

value: 'gyf',

text: '关一帆'

}, {

value: 'zhz',

text: '智子'

}, {

value: 'gezh',

text: '歌者'

}]);

var showUserPickerButton = doc.getElementById('showUserPicker');

var userResult = doc.getElementById('userResult');

showUserPickerButton.addEventListener('tap', function(event) {

userPicker.show(function(items) {

userResult.innerText = JSON.stringify(items[0]);

//返回 false 可以阻止选择框的关闭

//return false;

});

}, false);

//-----------------------------------------

//级联示例

var cityPicker = new $.PopPicker({

layer: 2

});

cityPicker.setData(cityData);

var showCityPickerButton = doc.getElementById('showCityPicker');

var cityResult = doc.getElementById('cityResult');

showCityPickerButton.addEventListener('tap', function(event) {

cityPicker.show(function(items) {

cityResult.innerText = "你选择的城市是:" + items[0].text + " " + items[1].text;

//返回 false 可以阻止选择框的关闭

//return false;

});

}, false);

//-----------------------------------------

// //级联示例

var cityPicker3 = new $.PopPicker({

layer: 3

});

cityPicker3.setData(cityData3);

var showCityPickerButton = doc.getElementById('showCityPicker3');

var cityResult3 = doc.getElementById('cityResult3');

showCityPickerButton.addEventListener('tap', function(event) {

cityPicker3.show(function(items) {

cityResult3.innerText = "你选择的城市是:" + (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;

//返回 false 可以阻止选择框的关闭

//return false;

});

}, false);

});

})(mui, document);

</script>

</body>

</html>

在此基础上修改为类似ios选择时间的插件。

把里面数据换成下面的数据就可以了。

(function($, doc) {

$.init();

$.ready(function() {

//普通示例

// 年月

var yearArray = new Array();

for (var i = 0; i < 10; i ++) {

var monthArray = new Array();

for (var j = 0; j < 12; j ++) {

var month = new Object();

month.value = j + 1 + "月";

month.text = j + 1 + "月";

monthArray.push(month);

}

var year = new Object();

year.value = i + 2016 + "年" ;

year.text = i + 2016 + "年";

year.children = monthArray;

yearArray.push(year);

};

//年月日

var yearArray = new Array();

for (var i = 0; i < 10; i ++) {

var monthArray = new Array();

for (var j = 0; j < 12; j ++) {

//月的最后一天

var year = i + 2016;

var month = j;

var lastDay = new Date(year, month + 1, 0).getDate();//month 要加1,原本month是从0开始的,但是因为0是这个月的上个月,所以到了上个月.

if(year == 2016 && month == 1) {

console.log("lastday" + lastDay);

}

var dayArray = new Array();

for(var k = 0; k < lastDay; k ++) {

var day = new Object();

day.value = k + 1 + "日";

day.text = k + 1 + "日";

dayArray.push(day);

}

var month = new Object();

month.children = dayArray;

month.value = j + 1 + "月";

month.text = j + 1 + "月";

monthArray.push(month);

}

var year = new Object();

year.value = i + 2016 + "年" ;

year.text = i + 2016 + "年";

year.children = monthArray;

yearArray.push(year);

};

console.log(yearArray);

// 小时分钟

var hoursec = new Array();

for (var i = 0; i < 24; i ++) {

var hsChildrenArray = new Array();

for (var j = 0; j < 60; j ++) {

var childrenObject = new Object();

var secTrue = j ;

if(j < 10) {

var secTrue = j ;

childrenObject.value = "0" + secTrue;

childrenObject.text = "0" + secTrue;

}else {

childrenObject.value = secTrue ;

childrenObject.text = secTrue;

}

hsChildrenArray.push(childrenObject);

}

var object = new Object();

if(i < 10) {

object.value = "0" + i + ":" ;

object.text = "0" + i + ":";

}else {

object.value = i +":" ;

object.text = i + ":";

}

object.children = hsChildrenArray;

hoursec.push(object);

};

});

})(mui, document);

效果图:

jQuery基于muipicker实现仿ios时间选择

年月日

jQuery基于muipicker实现仿ios时间选择

小时分钟

效果只有在手机端或者手机chrome的手机模拟器中可以看到。

以上就是本文章的内容,希望对大家有所帮助

相关文章
评论暂时关闭
资讯分类
本类热门资讯
  • 源码推荐
  • 软件推荐
关于我们联系我们发布资源广告服务合作伙伴网站地图版权声明与我们对话