您的位置：首页 > Web前端 > JQuery

时间选择器，结合jquery使用

2016-05-24 22:13 417 查看

fsrTip.js

</pre><pre code_snippet_id="1695564" snippet_file_name="blog_20160524_2_5454085" name="code" class="javascript">$(function () {
$.fn.fsrTip = function (options) {
var defaults = {
Event: 'mouseover',
Type: '24',
SZ: {
h: ["1", "2", "3"],
m: ["0", "30"]
}
};

var options = $.extend(defaults, options); //合并  将defaults 与 options合并
var h = "";
var mi = ""
//默认24小时制
if (options.Type == "24") {
for (var i = 1; i <= options.Type; i++) {
if (i < 10) {
h += "<option>0" + i + "</option>";
}
else {
h += "<option>" + i + "</option>";
}
}
for (var i = 0; i < 60; i++) {
if (i < 10) {
mi += "<option>0" + i + "</option>";
}
else {
mi += "<option>" + i + "</option>";
}
}
}
//默认12小时制
else if (options.Type == "12") {
for (var i = 1; i <= options.Type; i++) {
if (i < 10) {
h += "<option>0" + i + "</option>";
}
else {
h += "<option>" + i + "</option>";
}
}
for (var i = 0; i < 60; i++) {
if (i < 10) {
mi += "<option>0" + i + "</option>";
}
else {
mi += "<option>" + i + "</option>";
}
}
}
//自定义
else if (options.Type == "false") {
for (var i = 0; i < options.SZ.h.length; i++) {
if (options.SZ.h[i] < 10) {
h += "<option>0" + options.SZ.h[i] + "</option>";
}
else {
h += "<option>" + options.SZ.h[i] + "</option>";
}
}
for (var i = 0; i < options.SZ.m.length; i++) {
if (options.SZ.m[i] < 10) {
mi += "<option>0" + options.SZ.m[i] + "</option>";
}
else {
mi += "<option>" + options.SZ.m[i] + "</option>";
}
}
}

var $this = $(this);
var id = $this.attr("id");
var qd = "<input id='" + id + "_qd' type='button' value='确定' />"
$('body').prepend("<div class='user' style='width:165px;height:54px;border:0;margin:0;padding:0;font-size:12px;font-weight:normal;text-align:left;color:#000;position:absolute;left:0;top:0; background:#abc; display:none;'><center>小时:<select id='h'>" + h + "</select>分钟:<select id='mi'>" + mi + "</select>:00</br>  " + qd + "  <input id='back' type='button' value='取消' /></center></div>");

var $btip = $(".user");
if ($btip.length > 1) {
$($btip[1]).remove();
}
var timer = null;
$("#" + id + "_qd").live("click", function () {
$this.val($("#h").val() + ":" + $("#mi").val() + ":00")
})
$("#back").live("click", function () {
$btip.remove();
})
$this.die().live(options.Event, function () {
var offset = $(this).offset();
var h = $this.height();
var w = $this.width();
$btip.css({
"left": offset.left,
"top": offset.top + h + 5
}).show();
}).live('mouseout', function () {
timer = setTimeout(function () {
$btip.remove();
clearTimeout(timer);
}, 2000)
});
$btip.die().live('mousemove', function () {
clearTimeout(timer);
$(this).show();
}).live('mouseout', function () {
timer = setTimeout(function () {
$btip.remove();
clearTimeout(timer);
}, 2000)
});
}
});

demo.html

<!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>
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="fsrTip.js" type="text/javascript"></script>
</head>
<body>

<center>
<table width="100%">
<tr>
<td align="right"></td>
<td align="left">用到服务器控件的text的时候  加上  AutoPostBack="true"
</td>
<td></td>
</tr>
<tr>
<td align="right">开始时间</td>
<td align="left"><input id="txt_morning_date_start" type="text"/>
</td>
<td></td>
</tr>
<tr>
<td align="right">结束时间</td>
<td align="left"><input id="txt_morning_date_end" type="text" /></td>
<td></td>
</tr>
</table>
</center>

</body>
<script type="text/javascript">
$(document).ready(function () {
$("#txt_morning_date_start").click(function () {
$("#txt_morning_date_start").fsrTip({
Event: 'click',   //事件
Type: "24", //小时制 24 12 false 当为false的时候自定义 如果写的是12 24 则SZ:{}即可
SZ: {

}
});
})
$("#txt_morning_date_end").click(function () {
$("#txt_morning_date_end").fsrTip({
Event: 'click',
Type: "24",
SZ: {

}
});
})
});
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航