强大的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 相关文章推荐
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
JavaScript 基于原型的对象(创建、调用)
Oct 16 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
JS setTimeout与setInterval的区别
Apr 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
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
PHP 翻页 实例代码
2009/08/07 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
python实现倒计时的示例
2014/02/14 Python
解读Python编程中的命名空间与作用域
2015/10/16 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Python给图像添加噪声具体操作
2019/03/03 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
Python 项目转化为so文件实例
2019/12/23 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
一份Java笔试题
2012/02/21 面试题
简历中自我评价怎么写
2014/02/12 职场文书
关于诚信的活动方案
2014/08/18 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
golang 语言中错误处理机制
2021/08/30 Golang