JQuery UI库 - Dialog

在网站中我们经常会做一些好看的Popup Dialog,我们前面曾经讲过用JQuery的Importo插件
来做自定义的AlertBox。
其实，我们可以利用JQuery官方提供的UI库来做。
而且，JQuery UI库效果更好，更成熟。

今天，我们就来讲一下怎么利用JQuery UI自身的UI库来做自定义的Dialog。

首先，我们需要下载到JQuery UI自身的javascript和css还有图片文件夹，把它们
放在特定的位置，我们好引用。
jquery-ui-1.7.2.custom.min.js
jquery-ui-1.7.2.custom.css

完整代码如下：

<%@ Page Language="C#"AutoEventWireup="true"CodeBehind="JqueryUIdialog.aspx.cs"Inherits="BlogNet.JQueryDemo.JqueryUIdialog"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>JQuery Dialog</title><scripttype='text/javascript'src='../JsLib/jquery-1.3.2.min.js'></script><scripttype='text/javascript'src='../JsLib/jquery-ui-1.7.2.custom.min.js'></script><linkrel='stylesheet'type='text/css'href='../CSS/jquery-ui-1.7.2.custom.css'/><linkrel='StyleSheet'href='../CSS/style.css'type='text/css'/><scripttype='text/javascript'>$.ui.dialog.defaults.bgiframe=true;
    $(function() {
      $('#myDialog').dialog({
        width:700,
        autoOpen:false,
        modal:true,
        buttons: {

        }
      });
    });functionshowDialog() {
        $('#myDialog').dialog('open');
    }functioncloseWin() {
        $('#myDialog').dialog('close');
    }</script></head><body><divid="myDialog"title="My Dialog"><divid="dialogContent"style="overflow-y: auto; height: 400px;"><spanclass="blue13">Here is your message for dialog</span></div><divstyle="text-align:right;"><imgsrc="../Images/Button_Close.gif"border="none"onMouseover="this.style.cursor='hand'"onclick="closeWin();"></div></div><formid="form1"runat="server"><div><inputtype="button"name="btnDialog"value="My Dialog"id="btnDialog"onclick="javascript:showDialog();"/></div></form></body></html>

在上面代码中，<div id="dialogContent">用于放置dialog的主体内容，
我们可以在其中放图片等一些复杂的html。将overflow-y: auto;是为了
如果内容过长时可以滚动条进行滚动。
在下面我们设置一个div用来放置自己的image按钮图片。
我们也可以采用dialog自身的关闭按钮，只需要在buttons: { 中间加入 }。
eg: Ok: $('#myDialog').dialog('close');

效果如下：

转载于:https://www.cnblogs.com/davidgu/archive/2009/08/16/1547553.html

JQuery UI库 - Dialog相关推荐

jQuery Tools：Web开发必备的 jQuery UI 库
基本介绍 jQuery Tools 是基于 jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡).Tooltip(信息提示).Overlay(遮罩.弹窗).Scrollable(滚动控制 ...
Jquery ui的dialog使用文档概述
Jquery ui的dialog使用文档概述一个浮动的窗口,包含标题和内容两部分.可以移动,调整大小,以及关闭图标'×'.如果内容长度超过了对话框内容区域的显示,则会自动出现滚动条.除此之外,还有一 ...
Jquery UI中 Dialog对象的作用及常用属性
HTML 作用? 标签主要表现的作用还是语义,表示该元素是一个对话框.而对于它的样式可能不被使用,因为人们对对话框和窗口的样式都有很高的要求.单凭这个标签的样式效果是达不到要求的,还是得使用css和J ...
解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
Drupal第三方库jQuery UI起死回生，多个漏洞影响网站、企业产品等
聚焦源代码安全,网罗国内外最新资讯! 编译:代码卫士专栏·供应链安全数字化时代,软件无处不在.软件如同社会中的"虚拟人",已经成为支撑社会正常运转的最基本元素之一,软件的安全 ...
[转]JQuery ui 实现类似于confirm的功能
本文转自:http://www.cnblogs.com/JerryWang1991/archive/2011/08/04/2127503.html 今天在改进参加一个全国比赛的项目作品时,发现使用了大 ...
jQuery UI 下载拖动组件
jQuery UI 库文件官方下载: http://jqueryui.com/download 使用时,只需在工程中将 development-bundle 文件夹下的 themes 文件夹添加到新建 ...
jquery水平垂直居中_Java Web应用程序集成的jQuery UI选项卡（水平和垂直）示例
jquery水平垂直居中 jQuery UI is built on top of jQuery JavaScript Library to help web developers in creati ...
jquery slider_使用jQuery UI Slider创建音量控制器
如果您是免费赠品猎人,那么您可能已经下载了许多PSD 用户界面 (UI). 其中一些确实很棒,可以通过原型设计来节省我们的时间. 在本文中,我们将对PSD UI进行编码,并将其转变为更具功能性的东西. ...

JQuery UI库 - Dialog

JQuery UI库 - Dialog相关推荐

最新文章

热门文章