强大的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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 Javascript
用vue写一个日历
Nov 02 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
DedeCms模板安装/制作概述
2007/03/11 PHP
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
PHP实现事件机制的方法
2015/07/10 PHP
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
Angular使用Md5加密的解决方法
2017/09/16 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
Python实现数值积分方式
2019/11/20 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
python IP地址转整数
2020/11/20 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
俄语专业毕业生推荐信
2013/10/28 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
文明旅游倡议书
2015/04/28 职场文书
素质拓展训练感想
2015/08/07 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书