网页前端设计

http://www.86y.org

搜索文章

jQuery日期插件 支持移动、PC端

用声音读出全文关注我吧
 2016/7/8 15:28:36 阅读次数:8224

一、概述

本实例特效代码是一款依赖于jq,iScroll滑动插件,效果偏向于手机移动端的,所以请用支持HTML5+CSS3主流浏览器预览效果,手机查看效果更佳哦。(兼容测试:FireFox、Chrome、Safari、Opera等支持HTML5/CSS3浏览器)

样式不附加任何图片,能自动定位到当前系统日期。修复了以前在网络上下载下来了好几个BUG。大家如果喜欢可以去文章底部下载。

效果如下图所示:

jQuery日期插件 支持移动、PC端

二、使用说明

1、CSS样式:

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

2、JS插件代码:

<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="js/date.js" ></script>
<script type="text/javascript" src="js/iscroll_date.js" ></script>

3、完整使用方法

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/>
<title>移动端日期选择插件特效-幸凡学习网</title>
<link rel="stylesheet" type="text/css" href="css/date.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/date.js?2153"></script>
<script type="text/javascript" src="js/iscroll_date.js"></script>
</head>

<body>
    <!-- 日期容器 -->
	<div id="datePlugin"></div>	
    <input type="text" id="dateinput" style="width:90%;height:50px;line-height:50px;display:block;margin:10px auto;font-size:16px;text-align:center;" />
	<script>
    $(function(){		
        //初始化日期插件	
        $('#dateinput').date();	
    });
    </script>
</body>
</html>

三、结语

DEMO地址:http://www.86y.org/DEMO/mobliedate/

下载地址:http://pan.baidu.com/s/1mioCxT2  访问密码 4nvq

前端最大的收藏不是你做了多少网站,而是你从中学了多少。所以把自己所学的东西能与大家分享,让大家一起共同进步这才是目的。

大家如果发现有什么问题可以反馈给我。
(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭