强大的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 相关文章推荐
Javascript delete 引用类型对象
Nov 01 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
理解javascript中的with关键字
Feb 15 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
让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的方法
2007/03/16 PHP
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
两款万能的php分页类
2015/11/12 PHP
PHP强制转化的形式整理
2020/05/22 PHP
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
python单线程实现多个定时器示例
2014/03/30 Python
Python中max函数用法实例分析
2015/07/17 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
Python Celery多队列配置代码实例
2019/11/22 Python
Python实现打印实心和空心菱形
2019/11/23 Python
python add_argument()用法解析
2020/01/29 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
PHP两种查询函数array/row的区别
2013/06/03 面试题
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
计算机网络及管理学专业求职信
2014/06/05 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
入团介绍人意见范文
2015/06/04 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书