jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架


Posted in Javascript onApril 08, 2013

     好久以来就想实现一个模态的框框,找了很多的jquery插件,都没有碰到自己满意的,这次碰到了一个,但是由于还处于开发阶段吧,连个文档API都没有,自己摸索了好长一段时间才搞定。

     先来看看代码,本人看着源代码定制了自己想要的效果:

<%@ page language="java"contentType="text/html; charset=utf-8" 
pageEncoding="utf-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8"> 
<title>JQueryMagicDialog 的基本使用</title> 
<link href="./css/default.css"type="text/css" rel="stylesheet"> 
<link href="./css/default(1).css"type="text/css" rel="stylesheet"> 
<script type="text/javascript"src="./js/jquery.js"></script> 
<script type="text/javascript"src="./js/cn.js"></script> 
<script type="text/javascript"src="./js/magicDialog/core.js"></script> 
<script type="text/javascript"src="./js/ui.js"></script> 
<script type="text/javascript"src="./js/global.js"></script> 
<script type="text/javascript"src="./js/magicDialog/dialog.js"></script> 
<script type="text/javascript"src="./js/ga.js"></script> 
<style type="text/css"> 
#btn{ 
position:absolute; 
top: 50px; 
left: 250px; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
$('.dlgDemoBtn').click(function(){ 
var el = $(this), act = el.attr('action'); 
switch(act){ 
case 'basic': 
$('<div></div>').mac('dialog',{ 
title: '提示', 
model: true, 
autoOpen: true, 
width: 200, 
draggable: true, 
el: '<p>你点击了我!</p>' 
}); 
break; 
case 'extended': 
mac.opendlg({ 
title: '提示', 
message: '按下 {0} 可关闭窗口.', 
params: ['<b>ESC/Enter</b>'], 
buttons: [{ 
text: '确认', 
click: function(d){ 
d.close(); 
} 
}] 
}); 
break; 
case 'wait': 
var h = mac.wait('3秒后此窗口自动关闭'); 
window.setTimeout(function(){ 
h.close(); 
}, 3000); 
break; 
case 'alert': 
mac.alert('Hello!'); 
break; 
case 'confirm': 
mac.confirm('<p>你确认吗?</p>', function(){ 
alert('You clickedyes!'); 
}, null); 
break; 
case 'customize': 
mac.confirm('<p>你确认吗?</p>', null, null, [{ 
text: '关闭', 
click: function(d){ 
d.close(); 
} 
},{ 
text: '确认', 
click: function(d){ 
d.close(); 
} 
}]); 
break; 
} 
}); 
}); 
</script> 
</head> 
<body> 
<div id="btn"> 
<button class="dlgDemoBtn"action="basic">Basic</button> 
<button class="dlgDemoBtn"action="extended">Extended</button> 
<button class="dlgDemoBtn"action="wait">Spinner</button> 
<button class="dlgDemoBtn"action="alert">Alert</button> 
<button class="dlgDemoBtn"action="confirm">Confirm</button> 
<button class="dlgDemoBtn"action="customize">Customize</button> 
</div> 
</body> 
</html>

     整个项目构架如下图所示:

jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架

        其中,css文件夹,images文件夹下放着所需要的css文件与图片,而js文件夹下放着所需要的js文件,别看这么多,后续还有很多功能需要这些文件,实现模态提示框只是其中的一个小功能,即magicDialog文件夹下的文件。

     好了,运行dialogDemo.jsp文件,页面如下所示:

jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架

       贴出几个效果吧!

       点击“Basic”:

jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架

       点击“Spinner”:

jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架

       点击“Customize”:

jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架

       总体来说,还是挺不错的一个插件,在IE9与Chrome浏览器下测试均没问题,只不过弹出框在Chrome浏览器下支持拖动,在IE9下却不支持。

       具体源文件请参考官网:http://boarsoft.com/cn/,里面有很多其他的例子,后续本人会一一尝试下。

       这是本人学习的结果,允许转载,欢迎交流,但转载务必给出本文章的链接地址

Javascript 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
js异步编程小技巧详解
Aug 14 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
JavaScript将数组转换为链表的方法
Feb 16 Javascript
js实现九宫格抽奖
Mar 19 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 #Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 #Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 #Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 #Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 #Javascript
JS继承--原型链继承和类式继承
Apr 08 #Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 #Javascript
You might like
php配合jquery实现增删操作具体实例
2013/12/12 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
Javascript注入技巧
2007/06/22 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
js实现二级导航功能
2017/03/03 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
Python实现批量下载图片的方法
2015/07/08 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
python append、extend与insert的区别
2016/10/13 Python
对numpy中shape的深入理解
2018/06/15 Python
超简单的Python HTTP服务
2019/07/22 Python
Python利用命名空间解析XML文档
2020/08/10 Python
python 获取计算机的网卡信息
2021/02/18 Python
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
会计专业个人求职信范文
2014/01/08 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
农业项目建议书
2014/08/25 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
运动会宣传稿100字
2015/07/23 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
法制主题班会教案
2015/08/13 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
Redis的字符串是如何实现的
2021/10/24 Redis