JQuery插件jqModal应用详解（十二）
JqModal 是jQuery的一个插件，用来在web浏览器中显示自定义通告，而且它为通用窗口框架奠定了基础。
<link href="css/jqModal.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jqModal.js" type="text/javascript"></script>
<script src="scripts/jqDnR.js" type="text/javascript"></script>
<a href="#" class="jqModal">view</a>
...
<div class="jqmWindow" id="dialog">
<a href="#" class="jqmClose">Close</a>
<hr>
<em>READ ME</em> -->
This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this.
The demonstrations on this page will show off a few possibilites. I recommend walking
through each one to get an understanding of jqModal <em>before</em> using it.
</div>
<script type="text/javascript">
$().ready(function() {
$('#dialog').jqm();
});
</script>
<a href="#" class="ex3bTrigger">view</a> (alert)
...
<div class="jqmAlert" id="ex3b">
<div id="ex3b" class="jqmAlertWindow">
<div class="jqmAlertTitle clearfix">
<h1>Did you know?</h1><a href="#" class="jqmClose"><em>Close</em></a>
</div>
<div class="jqmAlertContent">
<p>Please wait... <img src="inc/busy.gif" alt="loading" /></p>
</div>
</div>
</div>
$().ready(function() {
var triggers = $('a.ex3bTrigger')[0];
$('#ex3b').jqm({
trigger: triggers,
ajax: 'html/2.htm',
target: 'div.jqmAlertContent',
overlay: 0
});
// Close Button Highlighting. IE doesn't support :hover. Surprise?
if ($.browser.msie) {
$('div.jqmAlert .jqmClose')
.hover(
function() { $(this).addClass('jqmCloseHover'); },
function() { $(this).removeClass('jqmCloseHover'); });
}
});
<body>
<a href="#" id="ex3aTrigger">view</a> (dialog)
...
<div id="ex3a" class="jqmDialog">
<div class="jqmdTL"><div class="jqmdTR"><div class="jqmdTC jqDrag">Dialog Title</div></div></div>
<div class="jqmdBL"><div class="jqmdBR"><div class="jqmdBC">
<div class="jqmdMSG">
Styled windows or dialogs are easy!
<br /><br />
This particular theme was done for <a href="http://www.pommo.org">poMMo</a> --
</div>
</div></div></div>
<input type="image" src="dialog/close.gif" class="jqmdX jqmClose" />
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#ex3a').jqm({
trigger: '#ex3aTrigger',
overlay: 30, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
overlayClass: 'whiteOverlay'
})
.jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
$('input.jqmdX')
.hover(
function() { $(this).addClass('jqmdXFocus'); },
function() { $(this).removeClass('jqmdXFocus'); })
.focus(
function() { this.hideFocus = true; $(this).addClass('jqmdXFocus'); })
.blur(
function() { $(this).removeClass('jqmdXFocus'); });
});
</script>
<body>
<a href="#" id="ex3cTrigger">view</a> (notice)
...
<div style="position: absolute; margin: 10px 0 0 100px;">
<div id="ex3c" class="jqmNotice">
<div class="jqmnTitle jqDrag">
<h1>Did you know?</h1>
</div>
<div class="jqmnContent">
<p>Pine, spruce, or other evergreen wood should never be used in barbecues. These woods, </p>
</div>
<img src="css/notice/close_icon.png" alt="close" class="jqmClose" />
<img src="css/notice/resize.gif" alt="resize" class="jqResize" />
</div>
</div>
</body>
$().ready(function() {
$('#ex3c')
.jqDrag('.jqDrag')
.jqResize('.jqResize')
.jqm({
trigger: '#ex3cTrigger',
overlay: 0,
onShow: function(h) {
/* callback executed when a trigger click. Show notice */
h.w.css('opacity', 0.92).slideDown();
},
onHide: function(h) {
/* callback executed on window hide. Hide notice, overlay. */
h.w.slideUp("slow", function() { if (h.o) h.o.remove(); });
}
});
});
<body>
<a href="#" class="ex2trigger">View</a>
...
<div class="jqmWindow" id="ex2">
Please wait... <img src="inc/busy.gif" alt="loading" />
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#ex2').jqm({ ajax: 'html/1.htm', trigger: 'a.ex2trigger' });
});
</script>
<body>
<a href="#" class="alert">view</a> (alert)
<a href="#" class="confirm">view</a> (confirm)
...
<!-- Alert Dialog -->
<div class="jqmAlert" id="alert">
<div id="ex3b" class="jqmAlertWindow">
<div class="jqmAlertTitle clearfix">
<h1>Warning!</h1><a href="#" class="jqmClose"><em>Close</em></a>
</div>
<div class="jqmAlertContent"></div>
</div>
</div>
<div class="jqmConfirm" id="confirm">
<div id="ex3b" class="jqmConfirmWindow">
<div class="jqmConfirmTitle clearfix">
<h1>Confirmation por favor...</h1><a href="#" class="jqmClose"><em>Close</em></a>
</div>
<div class="jqmConfirmContent">
<p class="jqmConfirmMsg"></p>
<p>Continue?</p>
</div>
<input type="submit" value="no" />
<input type="submit" value="yes" />
</p>
</div>
</div>
</body>
/* Overriding Javascript's Alert Dialog */
function alert(msg) {
$('#alert')
.jqmShow()
.find('div.jqmAlertContent')
.html(msg);
}
$().ready(function() {
$('#alert').jqm({ overlay: 0, modal: true, trigger: false });
// trigger an alert whenever links of class alert are pressed.
$('a.alert').click(function() {
alert('You Have triggered an alert!');
return false;
});
});
$('#confirm')
.jqmShow()
.find('p.jqmConfirmMsg')
.html(msg)
.end()
.find(':submit:visible')
.click(function() {
if (this.value == 'yes')
(typeof callback == 'string') ?
window.location.href = callback :
callback();
$('#confirm').jqmHide();
});
}
$().ready(function() {
$('#confirm').jqm({ overlay: 88, modal: true, trigger: false });
// trigger a confirm whenever links of class alert are pressed.
$('a.confirm').click(function() {
confirm('About to visit: ' + this.href + ' !', this.href);
return false;
});
});
</script>
JQuery插件jqModal应用详解（十二）的更多相关文章
- jQuery插件制作方法详解
jQuery插件制作方法详解 jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...
- jQuery插件编写步骤详解
如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...
- jQuery插件- Autocomplete应用详解
项目中有时会用到自动补全查询,就像Google搜索框.淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能. auto ...
- jQuery插件autoComplete使用详解
安装/需要引入的文件 <script type="text/javascript" src="../js/jquery-1.8.3.min.js.js"& ...
- jQuery的deferred对象详解（二）
Deferred对象是由$.Deferred构造的,$.Deferred被实现为简单的工厂模式. $.Deferred的实现 创建三个$.Callbacks对象,分别表示成功done,失败fail,处 ...
- Nginx详解十二：Nginx场景实践篇之跨站访问相关
跨站访问 浏览器请求一个页面的时候,发送了两个域名的请求 此情况不安全,容易出现CSRF攻击,所以浏览器禁止跨域访问 Nginx设置打开跨站访问 配置语法:add_header name value ...
- Linux 网络编程详解十二
UDP的特点 --无连接 --基于消息的数据传输服务 --不可靠 --UDP更加高效 UDP注意点 --UDP报文可能会丢失,重复 --UDP报文可能会乱序 --UDP缺乏流量控制(UDP缓冲区写满之 ...
- 【转】JQuery上传插件Uploadify使用详解及错误处理
转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错 ...
- CMake 手册详解（二十）
SirDigit CMake 手册详解(二十) CMD#51: list 列表操作命令. list(LENGTH <list> <output variable>) list( ...
随机推荐
- Swift学习笔记4
1.延迟存储属性是指当第一次被调用的时候才会计算其初始值的属性.在属性声明前使用lazy来标示一个延迟存储属性. 必须将延迟存储属性声明成变量(使用var关键字),因为属性的初始值可能在实例构造完成之 ...
- 在O(N)时间内求解 正数数组中 两个数相加的 最大值
一,问题描述 给定一个正数数组arr(即数组元素全是正数),找出该数组中,两个元素相加的最大值,其中被加数的下标大于加数的下标.由加法运算的可逆性,j >i 这个条件可以去掉. 即求出: max ...
- Vue.js入门系列教程（二）
过滤器:filter 全局过滤器 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- C# 窗体最大化（自适应任务栏位置）
this.FormBorderStyle = FormBorderStyle.None; this.Location=Screen.PrimaryScreen.WorkingArea.Location ...
- Guava Immutable 不可变集合
Immutable是为了创建不可变集合使用,不可变集合在很多情况下能提高系统性能.一般使用 .of()或者.builder()<>().put().build()初始化创建不可变集合
- C++中模板的使用
为什么使用模板: C++重载(overloading),重载函数一般含有不同的参数个数或不同的参数类型.如果使用MAX函数对不同类型的求最大值,就要定义不同的重载函数: int max(int x,i ...
- Java SE之基本程序设计结构
概述: 0.注释 1.基本数据类型(有且仅有8个): 1.1 整型:int,short,long,byte(表示一个字节,[-128,127]) 1.2 ...
- shell 终端常用插件
参考链接: http://get.ftqq.com/992.get 1.zsh 2.autojump 3.apt-get install lamp-server^ 4.tldr 5.tree (显示目 ...
- tidb 架构 ~Tidb学习系列(5)
一 简介:今天我们继续学习tidb的增量传输 二 说明: tidb高度兼容mysql,可以仿照mysql的主从同步复制机制实现mysql->tidb的增量传输 三 实验: 1 下载tidb官方工 ...
- 【API】检查进程是否存在 - CreateToolhelp32Snapshot
1 学习目标 今天静态逆向mydocument病毒时,看到病毒代码为了防止自身被调试会先检测杀毒软件和调试工具的进程是否存在.如果没有杀毒软件则释放真正的病毒文件,提前熟悉一下枚举进程的反汇编代码. ...