强大的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 相关文章推荐
jQuery ready函数滥用分析
Feb 16 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
xml+php动态载入与分页
2006/10/09 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
jQuery 使用个人心得
2009/02/26 Javascript
Cookie 注入是怎样产生的
2009/04/08 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
Python中文编码那些事
2014/06/25 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
python3 反射的四种基本方法解析
2019/08/26 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
linux面试题参考答案(8)
2016/04/19 面试题
理货员的岗位职责
2013/11/23 职场文书
迟到检讨书500字
2014/02/05 职场文书
幼儿园家长评语
2014/02/10 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
工会主席事迹材料
2014/06/03 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
Python中glob库实现文件名的匹配
2021/06/18 Python
详解Java实践之建造者模式
2021/06/18 Java/Android
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers
Python循环之while无限迭代
2022/04/30 Python