<script src="https://www.jb51.net/calendar2008.js" type="text/javascript" language="javascript"></script>
<link media="all" type="text/css" href="https://www.jb51.net/rightbar.css" />
b.再写如下代码
复制代码 代码如下:
var c = new Calendar("c");
document.write(c);
//下面两个用为微调定位
c.offsetTop =22;
c.offsetLeft = 25;
html代码：
复制代码 代码如下:
<input type="text" size="21" onfocus="c.showMoreDay = false;c.show(this);" value=""/>
可以看得出，他class="required dateISO" 自动验证时间格式
7.拖拽
a.先引用这个： <script src="https://www.jb51.net/jquery-ui.min.js" type="text/javascript" language="javascript"></script>
b.再写这个$("xxx").draggable();实现拖拽
8.滑入显示：
插件提供了扩展：
复制代码 代码如下:
$(document).ready(function() {
$.fn.extend({
dropIn: function(speed, callback){
var $t = $(this);
if($t.css("display") == "none"){
eltop = $t.css('top');
elouterHeight = $t.outerHeight(true);
$t.css({ top: -elouterHeight, display: 'block' })
.animate({ top: eltop },speed,'swing', callback);
}
}
});
});
调用$.prompt("mes",{show:'dropIn'}即可实现滑入。
9.圆角边框。
a.先引用这个 <script src="https://www.jb51.net/jquery.corner.js" type="text/javascript" language="javascript"></script>
b.调用$.("xxx").corner("cc:#d1c7b7");
c.注意事项：四个角所缺的地方的颜色也是可设置的，一般都和背景色一致。
【四】总结
一般命名插件的CSS和脚本命名都很规范，所以难得出现冲突。只要CSS和Js不冲突，就可以 放心用，随便用，乱着用。
【五】求助（已解决）
本来想清一色的JQuery插件的，结果JQuery日历插件浮不到弹出层的上面，所以换了另外一个日历控件。气得我把z-index设成10000000000000000，结果可想而知----依然浮不上。找不到哪里CSS冲突了，哪个发现了告诉我一下。
复制代码 代码如下:
table.jCalendar {
border: 1px solid #000;
background: #aaa;
border-collapse: separate;
border-spacing: 2px;
z-index: 100000000000000000000000000000000;
position:absolute;
}
解决办法：
方法一：
在你的页面开始出定义下面的样式
.ui-datepicker {z-index:1200;}
当调用dialog时用下面的代码
jQuery("#midialog").dialog({zIndex:900});
方法二：
[code]
.datepicker({
beforeShow: function (i, e) {
var z = jQuery(i).closest(".ui-dialog").css("z-index") + 4;
e.dpDiv.css('z-index', z);
}
})
代码打包下载
作者：张磊(zhanglei's Blog)
您可能感兴趣的文章: