基于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 相关文章推荐
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
详解Angular 4 表单快速入门
Jun 05 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
浅析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
解析CodeIgniter自定义配置文件
2013/06/18 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
跟老齐学Python之用Python计算
2014/09/12 Python
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
Python selenium如何设置等待时间
2016/09/15 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
python3转换code128条形码的方法
2019/04/17 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
行政总监岗位职责
2013/12/05 职场文书
医院总经理岗位职责
2014/02/04 职场文书
电气工程自动化求职信
2014/03/14 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
青春雷锋观后感
2015/06/10 职场文书
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL