学习jQuery之旅－－使用炫酷的jQuery插件

核心提示：其中的jquery.corner.js，这样就能够实现Div的圆角效果，学习jQuery之旅－－使用炫酷的jQuery插件(7)，Dialog简单的实现在网页中弹出对话框，效果：点击这里查看效果Html代码：<div id='basicModal'><h2>jQuery对话框&l

其中的jquery.corner.js。这样就能够实现Div的圆角效果。

Dialog

简单的实现在网页中弹出对话框。

效果：点击这里查看效果

Html代码：

<div id='basicModal'><h2>jQuery对话框</h2>
<input type='button' name='basic' value='Demo' class='basic demo'/><br />
 </div>
<div id="basicModalContent" style='display:none'>
<p>Hello,这就是简单的jQuery Demo.可以做一个登陆界面。注册界面..</p>

<input id="Text1" type="text" /><br/>
<input id="Text2" type="text" /><br/>
<input id="Text3" type="text" /><br/>
<input id="Button1" type="button" value="button" />
<input id="Button2" type="button" value="button" />
</div>

css和jQuery代码：

<script type="text/javascript" src='http://files.cnblogs.com/gaoweipeng/jquery-latest.pack.js'></script>
<script type="text/javascript" src='http://files.cnblogs.com/gaoweipeng/jquery.simplemodal.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$('#basicModal input.basic, #basicModal a.basic').click(function(e) {
e.preventDefault();
$('#basicModalContent').modal();
});
});
</script>
<style>
#simplemodal-overlay {background-color:#000; cursor:wait;}

#simplemodal-container {height:400px; width:600px; background-color:#fff; border:3px solid #ccc;}
#simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; background-color:Red; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-18px; cursor:pointer;}
#simplemodal-container #basicModalContent {padding:8px;}
</style>

其中的jquery.simplemodal.js，在Dialog中我们能做很多事情，类似的场景很多：百度的登录....

ok，就先写到这。

小结：就先简单的介绍这些。jQuery的插件深受大家的喜爱和好评，的确给我们的开发带来了不少便捷和绚丽的效果，这里就不多介绍了，大家可以到下面的地址中去继续体验。