强大的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 相关文章推荐
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
js实现3D照片墙效果
Oct 28 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
原生js实现弹窗消息动画
Nov 20 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
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
PHP常用数组函数介绍
2014/07/28 PHP
PHP中的替代语法介绍
2015/01/09 PHP
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
深入理解React高阶组件
2017/09/28 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
python hash每次调用结果不同的原因
2019/11/21 Python
英国医生在线预约:Top Doctors
2019/10/30 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
What is view? why do we have view?
2012/06/22 面试题
工商管理专业实习生自我鉴定
2013/09/29 职场文书
护士实习自我鉴定
2013/10/22 职场文书
家长会主持词
2014/03/26 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
数学教师求职信范文
2015/03/20 职场文书
2015年宣传工作总结
2015/04/08 职场文书
详解python字符串驻留技术
2021/05/21 Python
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电