强大的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堆排序算法详解
Dec 03 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
详解jquery选择器的原理
Aug 01 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
VUE脚手架具体使用方法
May 20 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
python实现统计代码行数的小工具
2019/09/19 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
英国工具中心:UK Tool Centre
2017/07/10 全球购物
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
公证委托书
2014/08/01 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电