基于BootStarp的Dailog


Posted in Javascript onApril 28, 2016

BootStrip简介

Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。

Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。  国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

1.1. 帮助文档关键字

boostrap模态框oaoDailog

1.2. 使用场景

当网页上点击某个按钮需要给予用户提示确认,用户点击确认按钮才能继续执行,或者用户点击取消按钮则取消执行操作;

当网页上点击查看,展示的数据需要使用弹出框展示的情况下,可以使用oaoDailog

1.3. 原理图

基于boostrap3.0的modal,jquery1.9

1.4. 使用说明

为什么需要oaoDailog?

a.由于boostrap3.0提供的modal,必须要在页面上先定义一个modal的div隐藏代码,用户将需要展示的内容写到该div中,如果一个页面有多种模态框,则需要写多个隐藏的模态框div隐藏代码,无疑这是多余的。

b.由于默认的modal是没有确认和取消按钮的,当然我们可以写两个button在模态框的隐藏div中,但是我们同时需要写js去监控确认按钮点击后执行的操作,同时确认按钮执行的操作,跟弹出时用户点击的数据有关系,数据如何传递,bootstrap没有给我们提供。

c. oaoDailog1.0.0版本主要就是解决bootstrap的模态框使用不方便,代码冗余的问题。

效果图:

基于BootStarp的Dailog

开始使用

1、 引入oaoDailog.js

Code:

<script type="text/javascript" src="${ctx}/static/jquery/jqueryApi/oaoDialog/oao.dialog.js" charset="UTF-8"></script>

2、 调用展示弹出框的代码

Code:

oao.dialog({
title:"删除提示框",
content:"请确认是否真的删除,删除后将无法恢复!",
ok:function(){
oao.dialog.close();
}
});

这就是一个基本也是使用最常见的确认弹出框的使用方法。

1.5. API

oao.dialog():这个方法是生成弹出框的方法,传入的参数是一个json对象,当然你也可以什么都不传,那样会弹出一个空白的弹出框,这是没有问题的。下面分别介绍每个参数的意思以及默认值。

属性名 属性类型 说明 默认值
title String 弹出框标题 提示
content String 弹出框的主要内容,可以是文本和html代码
okVal String 确认按钮的自定义文字 确认
ok Function/boolean 点击确认执行的方法 关闭功能
cancelVal String 取消按钮的自定义文字 取消
cancal Function/boolean 点击取消执行的方法 关闭功能

•oao.dialog.close():关闭模态框

1.6. 待支持的功能 1.目前弹出框的内容只支持文字和静态html,不支持url请求

2.目前最多只能显示两个按钮,不支持自定义按钮,后续支持

3.目前弹出框的位置和大小不支持自定义

4.目前的弹出框一次只能弹出一个,不支持弹出框中再弹出一个模态框(bootstrap modal底层不支持)

敬请期待,下个版本见。

/*!
* oaoDialog 1.0.0
* author:xufei
* Date: 2015-7-9 1:32
* http://www.oaoera.com
* Copyright © 2014 www.oaoera.com Inc. All Rights Reserved. 沪ICP备13024515号-1 上海义信电子商务有限公司 
*
* This is licensed under the GNU LGPL, version 2.1 or later.
* For details, see: http://creativecommons.org/licenses/LGPL/2.1/
*/
//oao命名空间
oao = {};
oao.init = function(settings){
var defaultSettings ={
title : "提示",
content:"",
okVal:"确认",
cancalVal:"取消",
ok:function(){
$("#oaoModal").modal('hide');
},
cancel:function(){
$("#oaoModal").modal('hide');
},
close:false
}
oao.settings = $.extend({}, defaultSettings, settings || {});
return oao.settings;
}
oao.initContent = function(){
var modelHtml = 
"<div id=\"oaoModal\" class=\"modal fade delete_modal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\" >"+
" <div class=\"modal-dialog\">"+
" <div class=\"modal-content\">"+
" <div class=\"modal-header\">"+
" <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button>"+
" <h4 class=\"modal-title\"></h4>"+
" </div>"+
" <div class=\"modal-body\" style=\"text-align:center;\">"+
" </div>"+
" <div class=\"modal-footer\">"+
" <button type=\"button\" class=\"btn btn-default modalCancel\"></button>"+
" <button type=\"button\" class=\"btn btn-primary modalOK\"></button>"+
" </div>"+
" </div>"+
" </div>"+
" </div>";
var $modelHtml = $(modelHtml);
$(".modalOK",$modelHtml).text(oao.settings.okVal);
$(".modalCancel",$modelHtml).text(oao.settings.cancalVal);
$(".modal-title",$modelHtml).text(oao.settings.title);
$(".modal-body",$modelHtml).html(oao.settings.content);
if(!oao.settings.ok){
$(".modalOK",$modelHtml).remove();
}
if(!oao.settings.cancel){
$(".modalCancel",$modelHtml).remove();
}
$("body").append($modelHtml);
}
//弹出对话框的方法
oao.dialog = function(settings){
settings = oao.init(settings);
oao.initContent();
//关闭的时候调用方法
$('#oaoModal').on('hidden.bs.modal', function (e) {
if(oao.settings.close){
oao.settings.close();
}
$("#oaoModal").remove();
})
if(oao.settings.ok){
$("#oaoModal .modalOK").click(settings.ok);
}
if(oao.settings.cancel){
$("#oaoModal .modalCancel").click(settings.cancel);
}
$("#oaoModal").modal('show')
.css({
"margin-top": function () {
return ($(this).height() / 2-200);
}
});;
}
//关闭对话框的方法
oao.dialog.close = function(){
$("#oaoModal").modal('hide');
}
Javascript 相关文章推荐
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
浅析jquery与checkbox的checked属性的问题
Apr 27 #Javascript
JavaScript 消息框效果【实现代码】
Apr 27 #Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 #Javascript
js实现人民币大写金额形式转换
Apr 27 #Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 #Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 #Javascript
JavaScript弹窗基础篇
Apr 27 #Javascript
You might like
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
jQuery1.6 使用方法一
2011/11/23 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
python关键字and和or用法实例
2015/05/28 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
django站点管理详解
2017/12/12 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
python3爬虫之设计签名小程序
2018/06/19 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
python处理RSTP视频流过程解析
2020/01/11 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
python Gabor滤波器讲解
2020/10/26 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
师范大学毕业自我鉴定
2013/11/21 职场文书
运动会跳远加油稿
2014/02/20 职场文书
广告语设计及教案
2014/03/21 职场文书
2014年班干部工作总结
2014/11/25 职场文书
投诉书格式范本
2015/07/02 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python