javascript实现的淘宝旅行通用日历组件用法实例

本文实例讲述了javascript实现的淘宝旅行通用日历组件用法。分享给大家供大家参考。

在线演示：http://demo.jb51.net/js/2015/trip-calendar/demo.html

PS：下面的演示代码，需要用到 trip-calendar.js与trip-calendar.css文件。打包下载地址

具体如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="angtian">
<meta name="description" content="淘宝旅行通用日历组件Demo1">
<meta name ="keywords" content="日历, 日历组件, 淘宝旅行日历">
<title>淘宝旅行通用日历组件Demo1</title>
<style>
body{padding:0;margin:0 10px;text-align:center;}
.title{padding:0;margin:10px 0;font:700 18px/1.5 \5fae\8f6f\96c5\9ed1;}
.title a{font:400 14px/1.5 Tahoma;margin-left:20px;}
.example{margin-top:10px;}
.example button{margin:0 5px 10px 0;}
.calendar{display:inline-block;}
</style>
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
<script>
var root = 'http://fgm.cc/learn/calendar/trip-calendar/';
YUI({
 modules: {
 'trip-calendar': {
 fullpath: root + 'trip-calendar.js',
 type : 'js',
 requires: ['trip-calendar-css']
 },
 'trip-calendar-css': {
 fullpath: root + 'trip-calendar.css',
 type : 'css'
 }
 }
}).use('trip-calendar', function(Y) {
 /**
 * 非弹出式日历实例
 * 直接将日历插入到页面指定容器内
 */
 var oCal = new Y.TripCalendar({
 container : '#J_Calendar', //非弹出式日历时指定的容器（必选）
 selectedDate: new Date //指定日历选择的日期
 });
 //日期点击事件
 oCal.on('dateclick', function() {
 var selectedDate = this.get('selectedDate');
 alert(selectedDate + '\u3010' + this.getDateInfo(selectedDate) + '\u3011');
 });
 Y.one('#J_Example').delegate('click', function(e) {
 var oTarget = e.currentTarget;
 value = oTarget.getAttribute('data-value');
 switch(true) {
 //日历个数
 case oTarget.hasClass('J_Count'):
 this.set('count', value).render();
 break;
 //显示节假日
 case oTarget.hasClass('J_showHoliday'):
 this.set('isHoliday', true).render();
 break;
 //隐藏节假日
 case oTarget.hasClass('J_hideHoliday'):
 this.set('isHoliday', false).render();
 break;
 //时间范围限定
 case oTarget.hasClass('J_Limit'):
 this.set('minDate', new Date)
  .set('maxDate', '')
  .set('afterDays', value)
  .set('date', new Date());
 break;
 //指定初始日期
 case oTarget.hasClass('J_InitDate'):
 this.set('minDate', value)
  .set('maxDate', '2012-12-21')
  .set('date', value);
 break;
 //下拉表单选择时间
 case oTarget.hasClass('J_Select'):
 this.set('isSelect', true).render();
 Y.all('.J_Count').slice(1).set('disabled', true);
 break;
 //取消下拉表单选择
 case oTarget.hasClass('J_SelectOff'):
 this.set('isSelect', false).render();
 Y.all('.J_Count').slice(1).set('disabled', false);
 break;
 }
 }, 'button', oCal);
});
</script>
</head>
<body>
<h1 class="title">淘宝旅行通用日历组件Demo1 <a href="http://fgm.cc/learn/calendar/trip-calendar/Demo1.html">Demo1</a><a href="http://fgm.cc/learn/calendar/trip-calendar/Demo2.html">Demo2</a><a href="http://fgm.cc/learn/calendar/trip-calendar/Demo3.html">Demo3</a><a href="http://fgm.cc/learn/calendar/trip-calendar/api.html" target="_blank">API文档</a></h1>
<div id="J_Example" class="example">
 <button class="J_Count" data-value="1">单日历</button>
 <button class="J_Count" data-value="2">双日历</button>
 <button class="J_Count" data-value="3">三日历</button>
 <button class="J_Count" data-value="4">四日历</button>
 <br />
 <button class="J_showHoliday">显示节假日</button>
 <button class="J_hideHoliday">隐藏节假日</button>
 <br />
 <button class="J_Limit" data-value="90">限定范围（今天->90天）</button>
 <button class="J_InitDate" data-value="2012-10-01">指定初始日期（2012年10月）</button>
 <button class="J_InitDate" data-value="">取消范围限定</button>
 <br />
 <button class="J_Select">下拉表单选择时间</button>
 <button class="J_SelectOff">取消下拉表单选择</button>
</div>
<div id="J_Calendar" class="calendar"></div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • 原生JS实现日历组件的示例代码

    原生JS实现日历组件的示例代码

    想要实现的效果 点击日期选择框出现日历 有个日期控制栏帮助选择日期, 包括年.月.日的选择和今天 日历格子,初次点击日期选择框时显示此刻的日期,日历格子的日期应该包括这个月的所有天数,同时如果当月的1号不是周日,还应补全从周日到1号的天数.还要在这个月最后1号的后面补全到周六. 日期控制栏和日历格子的日期还有选择框里的日期的变化要是同步的. 实现思路 为了组件的可复用性,需要用面向对象的思想. 每个日历组件都是一个日历对象,主要包括日期选择框,日期控制显示栏,还有日历格子,为了保持日期控制显示栏

  • javascript实现的淘宝旅行通用日历组件用法实例

    本文实例讲述了javascript实现的淘宝旅行通用日历组件用法.分享给大家供大家参考. 在线演示:http://demo.jb51.net/js/2015/trip-calendar/demo.html PS:下面的演示代码,需要用到 trip-calendar.js与trip-calendar.css文件.打包下载地址 具体如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8">

  • JavaScript实现类似淘宝的购物车效果

    JavaScript实现类似淘宝的购物车效果

    前言 相信大家都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪件商品,就会加入购物车中,最后结算.购物车这一功能,方便消费者对商品进行管理,可以添加商品,删除商品,选中购物车中的某一项或几项商品,最后商品总价也会随着消费者的操作随着变化.本文介绍的是通过JavaScript实现类似于淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能. 功能如下 1. 实现兼容低版本IE的getElementsByClassName()方法 2. JS表

  • Reactjs实现通用分页组件的实例代码

    Reactjs实现通用分页组件的实例代码

    大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果: 注意这个组件需要ES6环境,最好使用NodeJS结合Webpack来打包:webpack --display-error-details --config webpack.config.js 此React版分页组件请亲们结合redux来使用比较方便,UI = Fn(State) 基本流程就是:用

  • JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析

    本文实例讲述了JavaScript设计模式之构造器模式(生成器模式)定义与用法.分享给大家供大家参考,具体如下: 工厂模式虽然解决了重复实例化的问题,但无法识别对象类型. 可以采用构造函数(构造方法)可用来创建特定的对象,可以解决工厂模式无法识别对象实例的问题.也就是说,使用构造函数的方法 ,即解决了重复实例化的问题 ,又解决了对象识别的问题. 构造器模式与工厂模式的不同之处在于: ① 构造函数方法没有显示的创建对象 (new Object()): ② 直接将属性和方法赋值给 this 对象:

  • JavaScript进阶（四）原型与原型链用法实例分析

    本文实例讲述了JavaScript原型与原型链用法.分享给大家供大家参考,具体如下: 一句话说明什么是原型:原型就是一个JavaScript对象,原型能存储我们的方法,构造函数创建出来的实例对象能够引用原型中的方法. 一.传统构造函数的问题 有如下代码 function Foo(){ this.sayHello = function(){ } } 由于对象是调用new Foo()所创建出来的,因此每一个对象在创建的时候,函数 sayHello 都会呗创建一次 那么有没一个对象都含有一个独立的,不

  • Android控件SeekBar仿淘宝滑动验证效果

    Android控件SeekBar仿淘宝滑动验证效果

    SeekBar是一个拖动条控件,最简单的案例就是我们的调节音量,还有音频视频的播放,传统的SeekBar样式,如图 传统的实现太简单,不足以让我们到能装逼的地步.本来是打算实现滴滴出行滑动完成订单的效果,可惜找不到效果图,今天也就用淘宝的滑动验证来作为实例 1.1 实现分析 SeekBar:使用progressDrawable属性自定义SeekBar 拖动块:使用thumb属性更改,其实就是一张图片 文字:使用RelativeLayout嵌套在一起 1.2 实现布局 <?xml version=

  • javascript实现淘宝幻灯片广告展示效果

    javascript实现淘宝幻灯片广告展示效果

    本文实例讲述了javascript实现淘宝幻灯片广告展示效果的方法.分享给大家供大家参考.具体如下: 一.效果图如下: 二.代码部分: JS代码部分: function getClass(oParent,name){ var arr=[]; var oBj=oParent.getElementsByTagName("*"); for(var i=0;i<oBj.length;i++){ if(oBj[i].className==name){ arr.push(oBj[i]); }

  • javascript之with的使用(阿里云、淘宝使用代码分析)

    javascript之with的使用(阿里云、淘宝使用代码分析)

    记得还在懵懂学习JavaScript基础之时,坊间便有传言"with语句是低效率语句,若非必要,请不要使用该语句",同时, ECMAScript 5 的strict mode下是禁止使用with语句的,所以一直以来我对with语句一直没啥好感. 今天在知乎有个话题大概说的是"你觉得什么东西相当有B格"之类的,然后就有人贴了这段代码: with(document)with(body)with(insertBefore(createElement("scrip

  • JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析

    淘宝图片处理讨论 淘宝网页面很大,但是打开速度很快.其对图片处理是运用了滚动加载,就是滚动轴滚到哪里,图片在哪里加载.但是你想查看他的源代码,那要费九牛二虎之力吧,因为他们代码压缩合并做的很好!因为图片是滚动加载的,初始化的时候图片不加载,那么当你在页面底部刷新页面的时候,底部的页面通常不会加载出来,淘宝网的做法貌似是(因为我没有看他们的源代码,只是凭操作),刷新让页面回到顶部. 模仿淘宝,做滚动图片加载 这里想到了三种方法: 1.javascript懒加载之可视区域加载 <!DOCTYPE h

  • Javascript模仿淘宝信用评价实例(附源码)

    Javascript模仿淘宝信用评价实例(附源码)

    本文实例讲述了Javascript模仿淘宝信用评价实现方法.分享给大家供大家参考,具体如下: 老板昨天开会说:要给公司的购物平台增加信用评价功能,用户体验参考淘宝. 于是今天研究了一下,用jQuery模似一个类似的效果: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&

随机推荐