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 相关文章推荐
js AspxButton的客户端操作
Jun 26 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 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
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
angular中的cookie读写方法
2017/08/02 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
跟老齐学Python之总结参数的传递
2014/10/10 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
python ---lambda匿名函数介绍
2019/03/13 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
普通员工辞职信
2014/01/17 职场文书
课外科技活动总结
2014/08/27 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
疾病证明书
2015/06/19 职场文书
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android