强大的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窗口功能指南之在窗口中书写内容
Jul 21 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
js判断密码强度的方法
Mar 18 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
让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
PHP与javascript的两种交互方式
2006/10/09 PHP
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
php递归创建目录的方法
2015/02/02 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
php blowfish加密解密算法
2016/07/02 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
JQuery操作元素的css样式
2015/03/09 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
使用Python的内建模块collections的教程
2015/04/28 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
编程输出如下图形
2013/11/24 面试题
环境保护建议书
2014/08/26 职场文书
企业介绍信范文
2015/01/30 职场文书
2015年电教工作总结
2015/05/26 职场文书