oaoDailog开发帮助

  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的模态框使用不方便,代码冗余的问题。

效果图:

开始使用

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');
}

基于bootstarp的Dailog的更多相关文章

  1. .NET MVC 学习笔记(四)— 基于Bootstarp自定义弹出框

    .NET MVC 学习笔记(四)—— 基于Bootstarp自定义弹出框 转载自:https://www.cnblogs.com/nele/p/5327380.html (function ($) { ...

  2. 第十七篇 基于Bootstarp 仿京东多条件筛选插件的开发(展示下)

    前些时候用换了工作,本来是用的前端框架是easyui,后面用的是bootstrap.对于我来说虽然不是新东西,因为原来毕业时候用过一段时间,也不懂什么插件的开发,现在用过easyui后觉得easyui ...

  3. 第十六篇 基于Bootstarp 仿京东多条件筛选插件的开发(展示上)

    这几天学习Bootstrap,本来是两年前的用的东西,现在又重新拾起来,又有很多重新的认识,看了Bootstrap的样式偏多,插件现在还没有学习到几个,也有写几个插件自己用的想法.正好工作上也会用到, ...

  4. 一步一步实现MVC5+EF6+Bootstarp+Autofac+NoSql实现OADemo 之登陆(一) 验证码 Captcha 之大插件小用

    不知何年何月才能完成OADemo啊,总之还是一步一步来吧,这段时间开始着手了,先做登陆.  前段时间研究了一下在CentOS7下安装Mysql和Memcached服务,并测试了用C#操作,结果还行. ...

  5. 基于flask的网页聊天室(一)

    基于flask的网页聊天室(一) 基本目标 基于flask实现的web聊天室,具有基本的登录注册,多人发送消息,接受消息 扩展目标 除基本目标外添加当前在线人数,消息回复,markdown支持,历史消 ...

  6. 后台管理UI的选择

    最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容I ...

  7. jquery.validate插件在booststarp中的运用

    现在在网络上已经可以找到很多基于bootstarp的表单认证,但是验证的都不全面的,下载后,我们还要理解作者的思路然后进行修改添加,这种修改方式往往适合学习,时间很多的时候.但是我们很多时候是没有时间 ...

  8. 验证码 Captcha 之大插件

    验证码 Captcha 之大插件小用 不知何年何月才能完成OADemo啊,总之还是一步一步来吧,这段时间开始着手了,先做登陆.  前段时间研究了一下在CentOS7下安装Mysql和Memcached ...

  9. 程序员的快速开发框架:Github上 10 大优秀的开源后台控制面板

    程序员的快速开发框架:Github上 10 大优秀的开源后台控制面板 Web 开发中几乎的平台都需要一个后台管理,但是从零开发一套后台控制面板并不容易,幸运的是有很多开源免费的后台控制面板可以给开发者 ...

随机推荐

  1. 通过javascript在iframe中加载html

    在spring mvc中,虽然有时候,在控制器中设置返回值是json对象,但在拦截器出现错误的时候,仍然可能返回html(根据设置的不同),如果要展示这些html,最好把他们放入iframe中,以防这 ...

  2. 洛谷——P1759 通天之潜水

    P1759 通天之潜水   题目背景 直达通天路·小A历险记第三篇 题目描述 在猴王的帮助下,小A终于走出了这篇荒山,却发现一条波涛汹涌的河拦在了自己的面前.河面上并没有船,但好在小A有n个潜水工具. ...

  3. 7-20 Windows消息队列 (25 分)(模拟水题)

    题意: 思路: 用优先队列直接模拟就OK了,另外优先队列存pair的时候比较的是first的值,实测!! 上代码: #include <iostream> #include <que ...

  4. [POJ2104] 区间第k大数 [区间第k大数,可持久化线段树模板题]

    可持久化线段树模板题. #include <iostream> #include <algorithm> #include <cstdio> #include &l ...

  5. POJ 3304 segments 线段和直线相交

    Segments Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14178   Accepted: 4521 Descrip ...

  6. ASP.NET MVC 源码分析(二) —— 从 IRouteBuilder认识路由构建

    我们来看IRouteBuilder的定义: public interface IRouteBuilder { IRouter DefaultHandler { get; set; } IService ...

  7. sql server使用杂记(二)

    存储过程CREATE PROCEDURE [dbo].[getprofitandloss]@agentNo varchar(10),@o0 varchar(30),@source varchar(30 ...

  8. iptables防火墙原理详解+mysql pt工具

    http://seanlook.com/2014/02/23/iptables-understand/

  9. 基数排序之多keyword排序运用队列

    源码例如以下: #include <stdlib.h> #include <stdio.h> typedef struct QUEUEnode* link; struct QU ...

  10. poj和hdu部分基础算法分类及难度排序

    最近想从头开始刷点基础些的题,正好有个网站有关于各大oj的题目分类(http://www.pythontip.com/acm/problemCategory),所以写了点脚本把hdu和poj的一些题目 ...