强大的jquery插件jqeuryUI做网页对话框效果!简单 - Web前端
作者:98wpeu发布时间:2026-06-11分类:网页前端技术浏览:2
我们先来最简单的,网页的登录窗口;
不过开始之前,大家先下载JQuery的插件
本人习惯用了vs2008来做网页了,先添加一个空白页

这是最简单的的做法。。。先在body里面插入
<body>
<div id="div1">
<table>
<tr><td>用户名</td><td><inputtype="text" style="width:100px" /></td></tr>
<tr><td>密码</td><td><input type="text" style="width:100px" /></td></tr>
</table>
</div>
</body>
这是时候我们就要把下载的东西解压好,把其中jQuery1.4.2文件夹里的jquery-1.4.2.JS还有jquery-UI-1.8.11.custom文件夹里的js文件夹的JQuery-ui-1.8.11.custom.min.js,把这两个复制到目录下

现在我们就来添加引用了,这时候如果是装了2008的sp1的话,可以直接拖动那两个js文件到代码head标签中来,当然也可以手动添加的,看图:

下一步我们就来用它了,
<script type="text/javascript">
$(function() {
$("#div1").dialog();
});
</script>
直接调用对象的dialog()方法;好了。。。看看效果吧

不怎么好看对吧...不要紧张,这时候我们把jquery-ui-1.8.11.custom文件夹里的CSS文件夹复制进来,看图吧。。。

把这个jquery-ui-1.8.11.custom.css,css文件添加引用

好了。。。在看看效果吧

就是这么简单的几句代码。。。
复制代码 代码如下:
<!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>
<link href="../css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="StyleSheet" type="text/css" />
<script src="jquery-1.4.2.js" type="text/JavaScript"></script>
<script src="jquery-ui-1.8.11.custom.min.js" type="text/Javascript"></script>
<script type="text/javascript">
$(function() {
$("#div1").dialog();
});
</script>
</head>
<body>
<div id="div1">
<TABle>
<tr><td>用户名</td><td><input type="text" style="width:100px" /></td></tr>
<tr><td>密码</td><td><input type="text" style="width:100px" /></td></tr>
</table>
</div>
</body>
</html>
大家学习。。。有好的也告诉我哦.....
- 上一篇:jQuery的学习步骤 - Web前端
- 下一篇:已经是最后一篇了
相关推荐
- Web开发者必备的12款超赞jQuery插件 - Web前端
- Web开发者必备的12款超赞jQuery插件 - Web前端
- 在次封装easyui-Dialog插件实现代码 - Web前端
- 使用FlexiGrid实现Extjs表格效果方法分享 - Web前端
- jquery tab插件制作实现代码 - Web前端
- qTip 基于JQuery的Tooltip插件[兼容性好] - Web前端
- 基于JQuery.timer插件实现一个计时器 - Web前端
- jquery div提示框渐隐弹出与隐藏效果 - Web前端
- 基于jQuery的弹出消息插件 DivAlert之旅(一) - Web前端
- jquery 图片 上一张 下一张 链接效果(续篇) - Web前端
- 网页前端技术排行
- 最近发表
-
- WordPress随机显示特色图片插件:Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案:坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP:Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性


