强大的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 相关文章推荐
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
vue组件实例解析
Jan 10 Javascript
如何编写jquery插件
Mar 29 jQuery
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
在angular 6中使用 less 的实例代码
May 13 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 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
图形数字验证代码
2006/10/09 PHP
php结合飞信 免费天气预报短信
2009/05/07 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
python文本数据处理学习笔记详解
2019/06/17 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
python中property和setter装饰器用法
2019/12/19 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
三个儿子教学反思
2014/02/03 职场文书
小学生安全责任书
2014/07/25 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
初中毕业生感言
2015/07/31 职场文书
劳动模范获奖感言
2015/07/31 职场文书
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫