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 相关文章推荐
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
js之ajax文件上传
May 13 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
德生S2000电路分析
2021/03/02 无线电
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
一分钟理解js闭包
2016/05/04 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
django框架forms组件用法实例详解
2019/12/10 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
股票投资建议书
2014/05/19 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
兵马俑的导游词
2015/02/02 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
Nginx内网单机反向代理的实现
2021/11/07 Servers
MYSQL 运算符总结
2021/11/11 MySQL
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android