强大的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 代码也可以变得优美的实现方法
Jun 22 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
详解JS ES6编码规范
May 07 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
php在字符串中查找另一个字符串
2008/11/19 PHP
php str_pad 函数用法简介
2009/07/11 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
php计算十二星座的函数代码
2012/08/21 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
应聘医药代表职位求职信
2013/10/21 职场文书
心理健康活动总结
2014/04/30 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
大学军训心得体会800字
2016/01/11 职场文书
怎样写好工作计划
2019/04/10 职场文书
Python3 类型标注支持操作
2021/06/02 Python
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript