强大的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 相关文章推荐
IE bug table元素的innerHTML
Jan 11 Javascript
可以将word转成html的js代码
Apr 11 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
详解Angular2响应式表单
Jun 14 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
一文搞懂redux在react中的初步用法
Jun 09 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
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
透析PHP的配置文件php.ini
2006/10/09 PHP
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
php生成word并下载代码实例
2019/03/15 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
深入理解Django中内置的用户认证
2017/10/06 Python
python+os根据文件名自动生成文本
2019/03/21 Python
Python Celery多队列配置代码实例
2019/11/22 Python
请介绍一下WSDL的文档结构
2013/03/17 面试题
大学生村官工作感言
2014/01/10 职场文书
校园安全检查制度
2014/02/03 职场文书
中文教师求职信
2014/02/22 职场文书
洗发水广告词
2014/03/13 职场文书
银行求职信怎么写
2019/06/20 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
详解Java实现数据结构之并查集
2021/06/23 Java/Android
mysql insert 存在即不插入语法说明
2022/03/25 MySQL