欢迎访问 水平网    今天是:2018年06月18日 注册 | 登录 | 订阅 | 收藏
>> JavaScript >> 非常漂亮的可拖动的JS日历代码
推荐代码
热点代码

非常漂亮的可拖动的JS日历代码

作者:未知,  来源:网络,  阅读:902,  发布时间:2014-05-10  【放入收藏夹

Style-able and semantic XHTML

I have tried to make Calendar as semantic as possible–with proper usage of CAPTION, THEAD, TBODY, TH and TD elements–and lots of CSS styling hooks. View the Calendar stylesheet for examples of the CSS; see the Styling Your Calendar section in the Manual for references to the XHTML. myCal1 = new Calendar({ date1: 'd/m/Y' }, { direction: 1, tweak: { x: 6, y: 0 }});
myCal2 = new Calendar({ date2: 'd/m/Y' }, { classes: ['dashboard'], direction: 1 });
myCal3 = new Calendar({ date3: 'd/m/Y' }, { classes: ['i-heart-ny'], direction: 1 });

代码:复制】【运行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=gbk" />
	<title>Style-able and semantic XHTML › Calendar: a Javascript class for Mootools</title>
	<script type="text/javascript" src="http://tool.alixixi.com/demo/198/198/js/mootools.js"></script>
	<script type="text/javascript" src="http://tool.alixixi.com/demo/198/198/js/calendar.rc4.js"></script>
	<script type="text/javascript">		
	//<![CDATA[
		window.addEvent('domready', function() { 
			myCal1 = new Calendar({ date1: 'd/m/Y' }, { direction: 1, tweak: {x: 6, y: 0} });
			myCal2 = new Calendar({ date2: 'd/m/Y' }, { classes: ['dashboard'], direction: 1, tweak: {x: 3, y: -3} });
			myCal3 = new Calendar({ date3: 'd/m/Y' }, { classes: ['i-heart-ny'], direction: 1, tweak: {x: 3, y: 0} });
		});
	//]]>
	</script>
	<link rel="stylesheet" type="text/css" href="http://tool.alixixi.com/demo/198/198/css/iframe.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="http://tool.alixixi.com/demo/198/198/css/calendar.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="http://tool.alixixi.com/demo/198/198/css/dashboard.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="http://tool.alixixi.com/demo/198/198/css/i-heart-ny.css" media="screen" />
</head>
<body>
	<h1>Style-able and semantic XHTML</h1>

	

		I have tried to make Calendar as <strong>semantic</strong> as possible–with proper usage of <em>CAPTION, THEAD, TBODY, TH and TD</em> elements–and lots of <strong>CSS styling hooks</strong>. View the Calendar <a href="css/calendar.css" target="_blank">stylesheet</a> for examples of the <em>CSS</em>; see the <strong>Styling Your Calendar</strong> section in the Manual for references to the <em>XHTML</em>.

		<code>
			myCal1 = new Calendar({ date1: 'd/m/Y' }, { direction: 1, tweak: { x: 6, y: 0 }});

			myCal2 = new Calendar({ date2: 'd/m/Y' }, { classes: ['dashboard'], direction: 1 });

			myCal3 = new Calendar({ date3: 'd/m/Y' }, { classes: ['i-heart-ny'], direction: 1 }); 
		</code>		
	

	<form action="/" class="long">
		<fieldset>
			<legend>Default styling</legend>

			<label for="date1">Date</label>
			<input id="date1" name="date1" type="text" />
		</fieldset>
	</form>

	<form action="/">
		<fieldset>
			<legend>Alternate styling: dashboard</legend>

			<label for="date2">Date</label>
			<input id="date2" name="date2" type="text" />
		</fieldset>
	</form>

	<form action="/">
		<fieldset>
			<legend>Alternate styling: i-heart-ny (experimental)</legend>

			<label for="date3">Date</label>
			<input id="date3" name="date3" type="text" />
		</fieldset>
	</form>
</body>
</html>
Tags:日历
您可能还有兴趣查阅的内容
  • 没有相关内容
评论【共有0条评论】查看所有评论
昵称:(*)   邮箱:   QQ:   验证码: 看不清楚?点击刷新验证码