强大的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 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
Vue中 key keep-alive的实现原理
Sep 18 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 Javascript
JS常用跨域方法实现原理解析
Dec 09 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
无线电广播的开始
2002/01/30 无线电
PHP 定界符 使用技巧
2009/06/14 PHP
discuz7 phpMysql操作类
2009/06/21 PHP
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
基于jquery库的tab新形式使用
2012/11/16 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
js获取页面description的方法
2015/05/21 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
python生成IP段的方法
2015/07/07 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
python删除文本中行数标签的方法
2018/05/31 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
PHP面试题集
2016/12/18 面试题
优秀教师主要事迹
2014/02/01 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
踏青活动策划方案
2014/08/19 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
初中生毕业评语
2014/12/29 职场文书
邀请函模板
2015/02/02 职场文书