<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.YearAndMonth td
{
border-top: 1px #DDD solid;
border-right: 1px #DDD solid;
padding: 3px 5px;
}
.YearAndMonth
{
border-bottom: 1px #DDD solid;
border-left: 1px #DDD solid;
position: absolute;
display: none;
z-index: 1;
background-color: White;
}
.YearAndMonth span
{
cursor: pointer;
}
.YearAndMonth .YearAndMonthHover
{
background-color: #e3f1fa;
color: Fuchsia;
}
</style>
<style type="text/css">
dl
{
clear: both;
}
dt
{
float: left;
}
dd
{
float: left;
margin: 0 20px 0 5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/////封装jQuery对象方法的插件
(function ($) {
$.fn.extend({
"YearAndDate": function (options) {
options = $.extend({
startDate: 2010,
numYear: 2
}, options);
var thisObj = this;
var str = '<table class="YearAndMonth" cellspacing="0"><tr><td><span title="Next">▲</span><span title="Previous">▼</span></td><td>Jan</td><td>Feb</td><td>Mar</td><td>Apri</td><td>May</td><td>Jun</td><td>July</td><td>Aug</td><td>Sep</td><td>Oct</td><td>Nov</td><td>Dec</td></tr>';
for (var i = 0; i < options.numYear; i++) {
str += '<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
}
str += '</table>';
var thisTableObj = $(str);
str = "";
thisTableObj.appendTo("body");
$(thisObj).focus(function () {
thisTableObj.css("top", $(this).offset().top + $(this).innerHeight() + 5)
.css("left", ($(true)) ? $(this).offset().left : $(this).offset().left + $(this).width() + 5)
.slideDown("slow");
})
$("tr:gt(0)", thisTableObj).each(function (i, item) {
$(item).children("td").first().text(parseInt(options.startDate) + i);
});
$("span", thisTableObj).click(function () {
var year = parseInt($("tr:eq(1)", thisTableObj).children("td").first().text());
if ($(this).text() == "▲") {
$("tr:gt(0) td:nth-child(13n+1)", thisTableObj).each(function (i, item) {
$(item).text(parseInt($(item).text()) - ($("tr", thisTableObj).length - 1));
});
} else {
$("tr:gt(0) td:nth-child(13n+1)", thisTableObj).each(function (i, item) {
$(item).text(parseInt($(item).text()) + ($("tr", thisTableObj).length - 1));
});
}
}).hover(function () {
$(this).css("color", "Red");
}, function () {
$(this).css("color", "Black");
});
$("tr:eq(0) td", thisTableObj).attr("width", "30px").css("text-align", "center");
$("tr:gt(0) td ", thisTableObj).not($("tr:gt(0) td:nth-child(13n+1)", thisTableObj)).hover(function () {
$(this).css("background-color", "Red");
}, function () {
$(this).css("background-color", "");
}).click(function () {
$("td", thisTableObj).removeClass("YearAndMonthHover");
$(thisObj).val($(this).parent().children("td").first().text() + "." + $(this).prevAll("td").length);
thisTableObj.css("display", "none");
}).mousemove(function () {
$("td", thisTableObj).removeClass("YearAndMonthHover").removeAttr("title");
$(this).attr("title", $(this).parent().children("td").first().text() + "." + $(this).prevAll("td").length);
$("tr:eq(" + $(this).parent().prevAll("tr").length + ") td", thisTableObj).addClass("YearAndMonthHover");
$("tr td:nth-child(13n+" + ($(this).prevAll("td").length + 1) + ")", thisTableObj).addClass("YearAndMonthHover");
}).css("cursor", "pointer");
}
});
//////封装全局函数的插件
$.extend({
YearAndDateObj: {}
});
//////
//参数说明
// a ， 指向当前遍历到的 DOM 元素
// i , 指向当前遍历到的 DOM 元素的索引值， 从 0 开始
// m最为特别， 它是由jQuery 正则解析引擎进一步解析后的产物(用 match 匹配出来的), 是一个数组
// m[0] 以上面的 $("div:gt(1)") 为例 ， 是 :gt(1) 这部分，它是 jQuery选择器进一步将要解析的内容
// m[1] 这里是选择器的引导符， 匹配例子中的 “：” 也可以用其他的选择器引导符
// m[2] 即例子中的 gt , 确定究竟是调用哪个选择器函数
// m[3] 即例子中的括号的数字“1” 它非常有用， 是编写选择器函数最重要的一个参数
// m[4] 上面的例子没有体现出来，这个比较罕见 。 例如 "div:l(ss(dd))" 这样的一个选择器中， m[4] 就指向(dd)这部分，注意是带括号的(dd) ，
// 同时要注意 m[3] 的值是 ss(dd) 而非ss
$.extend(jQuery.expr[":"], {
between: function (a, i, m) {
var tmp = m[3].split(","); ////以逗号分隔
return tmp[0] - 0 < i && i < tmp[1] - 0;
}
});
/////应用 $("dd:between(2,5)").css("color", "Green");
})(jQuery);
$(function () {
////定位问题
$("#txtStart").YearAndDate();
$("#txtEnd").YearAndDate({ startDate:1998, numYear: 5 });
$("#Text1").YearAndDate({ startDate: 1888, numYear: 10 });
$("dt:between(1,5)").css("color", "Green");
});
</script>
</head>
<body>
<h4>
Select Date</h4>
<dl>
<dt>Start:</dt>
<dd>
<input id="txtStart" type="text" />
</dd>
<dt>End:</dt>
<dd>
<input id="txtEnd" type="text" />
</dd>
<dt>ddddd:</dt>
<dd>
<input id="Text1" type="text" />
</dd>
</dl>
</body>
</html>
浙公网安备 33010602011771号