经验分享程序开发文档资料数据资源其它资源

jQuery移动端触屏滑动日期控件特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery移动端触屏滑动日期控件特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery移动端触屏滑动日期控件特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>jQuery移动端触屏滑动日期控件</title>
    <script src="js/jquery.1.7.2.min.js"></script>
    <script src="js/mobiscroll_002.js" type="text/javascript"></script>
	<script src="js/mobiscroll_004.js" type="text/javascript"></script>
	<link href="css/mobiscroll_002.css" rel="stylesheet" type="text/css">
	<link href="css/mobiscroll.css" rel="stylesheet" type="text/css">
	<script src="js/mobiscroll.js" type="text/javascript"></script>
	<script src="js/mobiscroll_003.js" type="text/javascript"></script>
	<script src="js/mobiscroll_005.js" type="text/javascript"></script>
	<link href="css/mobiscroll_003.css" rel="stylesheet" type="text/css">

    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            font-family: arial, verdana, sans-serif;
            font-size: 12px;
            background: #ddd;
        }
        input, select {
            width: 100%;
            padding: 5px;
            margin: 5px 0;
            border: 1px solid #aaa;
            box-sizing: border-box;
            border-radius: 5px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -webkit-border-radius: 5px;
        }
        .header {
            border: 1px solid #333;
            background: #111;
            color: white;
            font-weight: bold;
            text-shadow: 0 -1px 1px black;
            background-image: linear-gradient(#3C3C3C,#111);
            background-image: -webkit-gradient(linear,left top,left bottom,from(#3C3C3C),to(#111));
            background-image: -moz-linear-gradient(#3C3C3C,#111);
        }
        .header h1 {
            text-align: center;
            font-size: 16px;
            margin: .6em 0;
            padding: 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .content {
            padding: 15px;
            background: #fff;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Mobiscroll精简实例</h1>
    </div>
    <div class="content">
		<div class="demos">
			<label for="appDate">日期</label>
			<input value="" class="" readonly="readonly" name="appDate" id="appDate" type="text">
		</div>
		<div class="demos">
			<label for="appDateTime">日期时间</label>
			<input value="2015-05-01 15:42:02" class="" readonly="readonly" name="appDateTime" id="appDateTime" type="text">
		</div>
		<div class="demos">
			<label for="appTime">时间</label>
			<input value="16:43" class="" readonly="readonly" name="appTime" id="appTime" type="text">
		</div>
	</div>
	<script type="text/javascript">
        $(function () {
			var currYear = (new Date()).getFullYear();	
			var opt={};
			opt.date = {preset : 'date'};
			opt.datetime = {preset : 'datetime'};
			opt.time = {preset : 'time'};
			opt.default = {
				theme: 'android-ics light', //皮肤样式
		        display: 'modal', //显示方式 
		        mode: 'scroller', //日期选择模式
				dateFormat: 'yyyy-mm-dd',
				lang: 'zh',
				showNow: true,
				nowText: "今天",
		        startYear: currYear - 10, //开始年份
		        endYear: currYear + 10 //结束年份
			};

		  	$("#appDate").mobiscroll($.extend(opt['date'], opt['default']));
		  	var optDateTime = $.extend(opt['datetime'], opt['default']);
		  	var optTime = $.extend(opt['time'], opt['default']);
		    $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
		    $("#appTime").mobiscroll(optTime).time(optTime);
        });
    </script>
</body>
</html>

JS代码(mobiscroll_003.js):

<!-- 陈廷峰增加中文资源包 (ceo@vmeitime.com) -->(function ($){
	$.mobiscroll.i18n.zh = $.extend($.mobiscroll.i18n.zh,{
	dateFormat:'yyyy-mm-dd',dateOrder:'yymmdd',dayNames:['周日','周一;
	','周二;
	','周三','周四','周五','周六'],dayNamesShort:['日','一','二','三','四','五','六'],dayText:'日',hourText:'时',minuteText:'分',monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],monthNamesShort:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],monthText:'月',secText:'秒',timeFormat:'HH:ii',timeWheels:'HHii',yearText:'年'}
);
}
)(jQuery);

JS代码(mobiscroll_004.js):

(function ($){
	$.mobiscroll.i18n.zh = $.extend($.mobiscroll.i18n.zh,{
	setText:'确定',cancelText:'取消'}
);
}
)(jQuery);

CSS代码(mobiscroll_003.css):

/* Android ICS skin */
.android-ics .dw{padding:0;color:#31b6e7;background:#292829;}
.android-ics .dw .dwwc,.android-ics .dw .dwwl,.android-ics .dw .dww,.android-ics .dw .dwb,.android-ics .dw .dwpm .dww{background:none;}
.android-ics .dwwr{padding:0;}
.android-ics .dwc{margin:0;padding:30px 10px 1px 10px;}
.android-ics .dwhl{padding:1px 10px;}
.android-ics .dwv{height:36px;line-height:36px;padding:0;border-bottom:2px solid #31b6e7;font-size:18px;}
.android-ics .dwwl{margin:0 2px;}
.android-ics .dww,.android-ics .dw .dwpm .dwwl,.android-ics .dw .dwpm .dww{border:0;}
.android-ics .dww .dw-li{color:#fff;font-size:18px;text-shadow:none;}
.android-ics .dww .dw-li.dw-hl{background:#31b6e7;background:rgba(49,182,231,.5);}
.android-ics .dwwo{background:linear-gradient(#282828 0%,rgba(40,40,40,0) 52%,rgba(40,40,40,0) 48%,#282828 100%);background:-webkit-gradient(linear,left bottom,left top,from(#282828),color-stop(0.52,rgba(40,40,40,0)),color-stop(0.48,rgba(40,40,40,0)),to(#282828));background:-moz-linear-gradient(#282828 0%,rgba(40,40,40,0) 52%,rgba(40,40,40,0) 48%,#282828 100%);background:-o-linear-gradient(#282828 0%,rgba(40,40,40,0) 52%,rgba(40,40,40,0) 48%,#282828 100%);}
.android-ics .dw .dwwb{background:#292829;box-shadow:none;-webkit-box-shadow:none;}
.android-ics .dwwb span{display:none;}
.android-ics .dwwb:after{position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-8px;color:#7e7e7e;width:0;height:0;border-width:8px;border-style:solid;content:'';}
.android-ics .dwwbm{top:0;bottom:auto;}
.android-ics .dwwbp{bottom:0;top:auto;}
.android-ics .dwwbm:after{border-color:transparent transparent #7e7e7e transparent;}
.android-ics .dwwbp:after{border-color:#7e7e7e transparent transparent transparent;}
.android-ics .dw .dwwl .dwb-a{background:#292829;}
.android-ics .dwwbm.dwb-a:after{border-color:transparent transparent #319abd transparent;}
.android-ics .dwwbp.dwb-a:after{border-color:#319abd transparent transparent transparent;}
.android-ics .dw .dwwol{width:60%;left:20%;height:36px;border-top:2px solid #31b6e7;border-bottom:2px solid #31b6e7;margin-top:-20px;display:block;}
.android-ics .dwbc{border-top:1px solid #424542;padding:0;}
.android-ics .dw .dwb{height:36px;line-height:36px;padding:0;margin:0;font-weight:normal;text-shadow:none;box-shadow:none;border-radius:0;-webkit-border-radius:0;-webkit-box-shadow:none;}
.android-ics .dw .dwb-a{background:#29799c;}
.android-ics .dwb-s .dwb,.android-ics .dwb-n .dwb{border-right:1px solid #424542;}
/* Docked */
.android-ics.dw-bottom .dw,.android-ics.dw-top .dw{border-radius:0;-webkit-border-radius:0;}
/* Multiple select */
.android-ics .dwwms .dwwol{display:none;}
.android-ics .dwwms .dw-li{padding-left:5px;padding-right:36px;}
.android-ics .dwwms .dw-li:after{content:'';position:absolute;top:50%;left:auto;right:10px;width:14px;height:14px;margin-top:-9px;color:#31b6e7;line-height:14px;border:1px solid #424542;text-shadow:0 0 5px #29799c;}
.android-ics .dwwms .dw-msel:after{content:'✔';}
/* Light version */
.android-ics.light .dw{background:#f5f5f5;}
.android-ics.light .dww .dw-li{color:#000;}
.android-ics.light .dwwo{background:linear-gradient(#f5f5f5 0%,rgba(245,245,245,0) 52%,rgba(245,245,245,0) 48%,#f5f5f5 100%);background:-webkit-gradient(linear,left bottom,left top,from(#f5f5f5),color-stop(0.52,rgba(245,245,245,0)),color-stop(0.48,rgba(245,245,245,0)),to(#f5f5f5));background:-moz-linear-gradient(#f5f5f5 0%,rgba(245,245,245,0) 52%,rgba(245,245,245,0) 48%,#f5f5f5 100%);background:-o-linear-gradient(#f5f5f5 0%,rgba(245,245,245,0) 52%,rgba(245,245,245,0) 48%,#f5f5f5 100%);}
.android-ics.light .dw .dwwb{background:#f5f5f5;color:#f5f5f5;}
.android-ics.light .dwbc{border-top:1px solid #dbdbdb;}
.android-ics.light .dwb{color:#000;}
.android-ics.light .dwb-a{color:#fff;}
.android-ics.light .dwb-s .dwb,.android-ics.light .dwb-n .dwb{border-right:1px solid #dbdbdb;}
/* Bubble positioning */
.android-ics .dw-bubble-bottom .dw-arr{border-color:transparent transparent #292829 transparent;}
.android-ics .dw-bubble-top .dw-arr{border-color:#292829 transparent transparent transparent;}
/* Bubble positioning */
.android-ics.light .dw-bubble-bottom .dw-arr{border-color:transparent transparent #f5f5f5 transparent;}
.android-ics.light .dw-bubble-top .dw-arr{border-color:#f5f5f5 transparent transparent transparent;}
/* Multiple select */
.android-ics.light .dwwms .dw-li:after{text-shadow:0 0 5px #31b6e7;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
124.95 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
124.95 KB
立即下载
路静枫
了解
打赏作者 鼓励作者
Html 滑动滚动特效2
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章