强大的jquery插件jqeuryUI做网页对话框效果!简单


Posted in Javascript onApril 14, 2011

我们先来最简单的,网页的登录窗口;

不过开始之前,大家先下载jquery的插件
本人习惯用了vs2008来做网页了,先添加一个空白页

强大的jquery插件jqeuryUI做网页对话框效果!简单

这是最简单的的做法。。。先在body里面插入

<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>

这是时候我们就要把下载的东西解压好,把其中jquery1.4.2文件夹里的jquery-1.4.2.js还有jquery-ui-1.8.11.custom文件夹里的js文件夹的jquery-ui-1.8.11.custom.min.js,把这两个复制到目录下

强大的jquery插件jqeuryUI做网页对话框效果!简单

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


强大的jquery插件jqeuryUI做网页对话框效果!简单

下一步我们就来用它了,

<script type="text/javascript">
        $(function() {
            $("#div1").dialog();
        });
    </script>

直接调用对象的dialog()方法;好了。。。看看效果吧

强大的jquery插件jqeuryUI做网页对话框效果!简单

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

强大的jquery插件jqeuryUI做网页对话框效果!简单

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

强大的jquery插件jqeuryUI做网页对话框效果!简单

好了。。。在看看效果吧

强大的jquery插件jqeuryUI做网页对话框效果!简单

就是这么简单的几句代码。。。

<!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>

大家学习。。。有好的也告诉我哦.....
Javascript 相关文章推荐
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
JS删除对象中某一属性案例详解
Sep 08 Javascript
让textarea自动调整大小的js代码
Apr 12 #Javascript
javascript算法学习(直接插入排序)
Apr 12 #Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 #Javascript
jquery监控数据是否变化(修正版)
Apr 12 #Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 #Javascript
javascript 学习笔记(八)javascript对象
Apr 12 #Javascript
jQuery的初始化与对象构建之浅析
Apr 12 #Javascript
You might like
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
python中defaultdict的用法详解
2017/06/07 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
python logging模块的使用总结
2019/07/09 Python
softmax及python实现过程解析
2019/09/30 Python
python 实现list或string按指定分段
2019/12/25 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
毕业生文员求职信
2013/11/03 职场文书
资产经营总监岗位职责
2013/12/04 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
老人祝寿主持词
2014/03/28 职场文书
研究生导师推荐信
2014/09/06 职场文书
代收款委托书范本
2014/10/01 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android