‹‹ 上一主題 | 下一主題 ››
發新話題
打印

[mooTools] Calendar - 可拖曳的月曆, 超美觀!

wmh

管理員

Rank: 9Rank: 9Rank: 9
1# 大 中 小 發表於 2008-8-9 14:35  只看該作者

[mooTools] Calendar - 可拖曳的月曆, 超美觀!

Calendar: A Javascript class for Mootools
http://www.electricprism.com/aeron/calendar/
美觀又實用的月曆

先前曾經介紹過一篇 jQuery 月曆的用法，最近看到一位仁兄分享了許多新的風格(theme)，不過都大同小異，不怎麼美觀。因此今天特別介紹一下 mootools 這個漂亮的月曆，功能上絕不輸 jQuery 的月曆，快來看看範例吧：



有沒有覺得很棒呢？

對了，官方連結似乎沒有提供整個完整的下載包，因此我自己包了一個預設風格的壓縮檔給大家下載：
mootools_calendar.zip

使用方式非常簡單，先看看 HTML 的部份:
<div><input id="date" name="date" type="text" style="float: left" /></div>
<link rel="stylesheet" type="text/css" href="calendar.css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="calendar.js"></script>

  • 先建立一個 <input> id 為 date
  • 引用了 css
  • 引用 mootools.js，這是分享 Calendar 的這位仁兄包裝過的版本，包含了 Mootools 1.1 並且加上 Fx.Style、Element、Window 等功能。
  • 引用 calendar.js


JavaScript 的部份是在 domready 事件執行 new Calendar():
window.addEvent('domready', function() { myCal = new Calendar({ date: 'Y-m-d' }); });
new Calendar() 還有很多參數，這部份還請參考官方所提供的說明。

搜索更多相關主題的帖子: mootools Calendar 月曆

JavaScript 討論區

TOP

wing_hk

新手上路

Rank: 1
2# 大 中 小 發表於 2008-11-14 17:03  只看該作者
如果預設月份是當前月份就好了

TOP

hanmin888

新手上路

Rank: 1
3# 大 中 小 發表於 2008-12-12 23:24  只看該作者

試不出來

太悶了....一直搞不出來

有錯請指正
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
<html>   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">   
<title>moontool月曆測試</title>   
<!--JavaScript-->   
<script type="text/javascript" src="mooltool.js"></script>
<script type="text/javascript" src="calendar.js"></script>

<script type="text/javascript">
window.addEvent('domready', function() { myCal = new Calendar({ date: 'Y/m/d' }); });
</script>
  
<!--JavaScript-->    
<!--CSS-->    
<link rel="stylesheet" type="text/css" href="calendar.css" />   
<!--CSS-->    
</head>   
<body>   
<input type="text" name="date" id="date" style="float: left">
  
</body>   
</html>

TOP

‹‹ 上一主題 | 下一主題 ››
發新話題