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

jQuery插件ccdialog 功能齐全的对话框效果【原创】

2011-10-27 14:30 337 查看

ccdialog是一个jQuery插件，实现弹出层模式的对话框效果，由于不满足于jQuery本身的dialog插件功能和效果，所有参考了众多dialog插件的效果和实现方式写了ccdialog，功能和效果不逊于其他类似的对话框；压缩前大小：37k，压缩后大小：28k
[注：采用一般压缩方法]。兼容IE6.0+、chrome、FF等多种主流浏览器，适用于网站前后台开发，可取代原生态js的alert或者confirm等对话框以获取更好的UI效果。网址：http://www.5dcode.com/?page_id=373

[图片] 1.jpg

[图片] 2.jpg

[图片] 3.jpg

[图片] 4.jpg

[图片] 5.jpg

[代码] [HTML]代码

01	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02	< html xmlns = "http://www.w3.org/1999/xhtml" >

head

04	< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />

05	< title >jQuery.ccdialog</ title >

06	< script type = "text/javascript" src = "js/jquery-1.6.4.min.js" ></ script >

07	< script type = "text/javascript" src = "js/jquery.ccdialog-1.0.min.js" ></ script >

08	< script type = "text/javascript" >

09	$(function(){

10	//jQuery.ccdialog

11	$("#hello-ccdialog").click(function(){

12	$("#test").ccdialog({

13	width: 200,

14	height: 'auto'

});

});

});

18	</ script >

</

head

body

21	< a href = "#hello-ccdialog" id = "hello-ccdialog" style = "color:red;" >点击看看效果</ a >

22	< div id = "test" style = "display:none;" >-----ccdialog-----< br />< br />***hello　world***</ div >

</

body

</

html

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

标签：

相关文章推荐

新的分享

章节导航