虽然现在的日历控件成千上万,但是YUI提供的日历控件仍不失为一个强大的组件。并且如果网站整体采用YUI作为前端框架的话,整体效果会很好。
要使用YUI的日历,首先要引入相应的CSS和Javascript文件。
<div id="mycal"></div>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/calendar/assets/skins/sam/calendar.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/calendar/calendar-min.js"></script>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
#date1 { width:100px }
#cal1Container { margin-right:10px;margin-bottom:10px }
</style>
mycal是要放日历的容器。要注意的是YUI的body默认class是<body class="yui-skin-sam">才能将其上的控件正常显示。
然后构造显示日历的函数。
function selectData(obj){
var objPosition = getArea(obj);
var container = document.getElementById("mycal");
container.style.left = objPosition.left+"px";
container.style.top = objPosition.bottom+"px";
container.style.position = "absolute";
container.style.display = "";
cal = new YAHOO.widget.Calendar("my","mycal",{ pages:2, close:true });
cal.render();
cal.selectEvent.subscribe(function(){
if (cal.getSelectedDates().length > 0) {
var selDate = cal.getSelectedDates()[0];
obj.value = selDate.getFullYear() + "-" + (selDate.getMonth()+1) + "-" + selDate.getDate();
} else {
obj.value = "";
}
document.getElementById("mycal").style.display = "none";
});
}
在调用的时候,在那个input空间调用,就加上onClick ="selectData(this)"就行了。
YUI有个很怪异的地方(selDate.getMonth()+1)显示的才是正确的月份,连官方的例子都是这么写的-_-!
YUI的日历控件也是YUI的一贯传统,功能强大,使用不方便。 可以按照API扩展出自己想要的日历,但是天下没有免费的午餐,代价就是要费一番功夫。
分享到:
相关推荐
基于YUI3的dialog组件该组件是基于YUI3开发的,功能强大,详细见http://www.qiqicartoon.com
NULL 博文链接:https://every-best.iteye.com/blog/750967
YUI 是 jquery 一样网页使用的javascrpit 方法库。
Yui组件分成2类:工具包和控件库 Yui 工具包 Yui 工具包利用DOM脚本来简化浏览器内的开发(in-browser devolvement),使用DHTML和AJAX的特性开发所有的Web程序。 动画(Animation):在你的页面中通过指定位置,...
使用YUI2.8 仿照JQuery UI 的select插件写的一个函数 详情见我的博客http://hi.baidu.com/hjzheng
非常有用的YUI插件,包括所有的Yahoo YUI插件库。
这是对YUI拖拽例子的改编,大家可以去访问的博客 http://hi.baidu.com/hjzheng
YUI教程YUI 入门教程YUI 入门教程YUI 入门教程
JavaScript是一种最初由Netscape的LiveScript发展而来的面向对象的Web脚本语言,被ECMA国际定义为国际化标准——ECMAScript。JavaScript具有使用局限性。... 本书适用于YUI工程师,也可以作为教材供高校师生学习使用。
yuicompressor-maven-plugin, 用于压缩 (Minify/Ofuscate/Aggregate) Javascript文件和使用 YUI 压缩器的CSS文件的Maven 插件 [[Flattr this git repo] ( http://api.flattr.com/button/flattr-badge-large.png)]...
alloy_Liferay使用YUI封装的框架,含使用文档
YUI-EXT使用详解,免费送给大家
--charset <charset> 指定读取输入文件使用的编码 --line-break <column> 在指定的列后插入一个 line-bread 符号 -v, --verbose 显示info和warn级别的信息 -o <file> 指定输出文件。默认输出是控制台。 ...
YUI 库,全称Yahoo! UI Library。是一组工具和控件,用...YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两个创建时工具: YUI Compressor (压缩) 和 YUI Doc (JavaScripts代码的文档引擎)。
YUI的使用文档,汉语版的,个人日记,是别人写的,不是我写的
雅虎YUI组件,内附详细实例
yui3-master.zip
maven打包使用yui压缩css和js文件
可惜官网提供的版本都不具备右键功能,每次压缩都要cmd输入一些命令实在是繁琐,本文就介绍如何给YUI Compressor添加右键命令,方便使用。 网上已有一些网友写好的安装包,但对应的版本太低,目前最新最多人使用的...
雅虎的东西,简单的操作很好用 使用例子:java -jar D:\yuicompressor\yuicompressor\yuicompressor.jar E:\js\all.js -o E:\wap\wap2\js\all-min.js --charset utf-8 当然要装jdk了 不然就玩完了