安信娱乐谁是老板

拼图开发文档

对话框

对话框为弹出对话窗口,可用于提示信息、警告信息、确认信息等作用。

对话框样式

安信娱乐谁是老板框架定义的对话框,可用默认对话框样式,也可用警告框、面板等框架已定义的样式,同时也可自定义对话框样式。

内置样式

配置对象属性有{"title":"选择框","text":"请选择确定或取消?","confirm":"确定","cancel":"取消"},显示如下:

选择框
请选择确定或取消?
确定
取消

按钮块显示

配置参数{"break":true}时,确定和取消按钮分开显示。

选择框
请选择确定或取消?
确定
取消

可选内容

text参数外,其余参数均为可选,下列三示例分别移除了标题、确认、取消的效果,在应用中根据需要配置参数。

请选择确定或取消?
确定
取消
请点击确定
确定
信息框
信息框文本内容
信息框文本内容

深色样式

深色样式效果,配置darktrue,内置对话框显示为深色模式。

选择框
请选择确定或取消?
确定
取消

参数说明

参数类型默认值参数值说明
targetobject(对象)//#id或.class对象
json
(内置对话框)
/ "id":"id",
"title":"标题",
"text":"文本内容",
"confirm":"确定",
"cancel":"取消",
"close":true/false,
"break":true/false,
"dark":true/false,
显示内置的对话框,id、text为必须
maskjson "bg":"bg-black",
"opacity":"50",
{"bg":"bg-main","opacity":"20"}
false:不显示遮罩层
是否显示遮罩,bg为定义背景色,opacity为不透明度
ajaxjson/ "url":"异步的URL",
"data":{"var":"var"},
"callback":function(data){console.log(data);},
采用POST方式提交,url为必须,data为json类型,callback为函数类型。
showstring/ fixed-top:顶部
fixed-right:右侧
fixed-bottom:底部
fixed-left:左侧
fixed-top-center:顶部居中
fixed-right-center:右侧居中
fixed-bottom-center:底部居中
fixed-left-center:左侧居中
fixed-left-top:左侧顶部
fixed-left-bottom:左侧底部
fixed-right-top:右侧顶部
fixed-right-bottom:右侧底部
显示的位置
mousestringclickclick:点击
mouseenter:悬浮
ready:就绪
触发显示的鼠标行为
dismissbooltruetrue:点击关闭
false:点击不关闭
点击外部关闭对话框
timernumber//限时关闭
sizeclassw10 mini-w7 small-w5 big-w4 large-w3dialog-small:小屏
dialog-middle:中屏
dialog-big:大屏
dialog-full:全屏
对话框的宽度,所有定义尺寸的样式均可使用。
styleclass//对话框添加的样式
coverbooltruetrue:覆盖
false:不覆盖
对话框是否覆盖下方内容,覆盖时下方内容不可操作
closeobject//调用关闭对话框,如"close":"#id"
onconfirmfunction//确认时执行的函数
oncancelfunction//取消时执行的函数
onclosefunction//关闭时执行的函数

弹出对象

根据参数说明,弹出的对象有3种方式,第1种是自定义的对象,第2种是内置的对话框,第3种是iframe框架。

自定义对象

请选择确定或取消?
确定
取消
    <button class="button" id="dialog-object">点击弹出内置对话框</button>
    <div class="dialog" id="dialogobject">
      <div class="dialog-body dialog-content">
        <div class="dialog-text">请选择确定或取消?</div>
        <div data-dismiss="dialog" class="dialog-confirm">确定</div>
        <div data-dismiss="dialog" class="dialog-cancel">取消</div>
      </div>
    </div>
    <script>
      $(function(){
        $("#dialog-object").dialog({
          "target":"#dialogobject",
        });
      })
    </script>
  

内置对象

    <button class="button" id="dialog-set">点击弹出内置对话框</button>
    <script>
      $(function(){
        $("#dialog-set").dialog({
          "target":{
            "id":"hellodialog",
            "title":"Hello Dialog",
            "text":"Hello World.",
            "confirm":"Confirm",
            "cancel":"Cancel",
            "break":true,
            "close":true
          }
        });
      })
    </script>
  

遮罩

安信娱乐谁是老板默认的对话框,包含遮罩,也可通过配置不显示遮罩或改变遮罩的颜色和透明度。

不显示遮罩

    <button class="button" id="dialog-unmask">不显示遮罩</button>
    <script>
      $(function(){
        $("#dialog-unmask").dialog({
          "target":{
            "id":"dialogunmask",
            "title":"Hello Dialog",
            "text":"Hello World.",
            "confirm":"Confirm",
            "cancel":"Cancel",
            "dark":true,
          },
          "mask":false,
          "style":"shadow-big"
        });
      });
    </script>
  

遮罩样式

警告:这是一条警告信息。
    <button class="button" id="dialog-mask">遮罩样式</button>
    <div class="dialog" id="dialogmask">
      <div class="dialog-body alert">
        <i class="icon-close" data-dismiss="dialog"></i>
        <strong>警告:</strong>这是一条警告信息。
      </div>
    </div>
    <script>
      $(function(){
        $("#dialog-mask").dialog({
          "target":"#dialogmask",
          "mask":{
            "bg":"bg-main",
            "opacity":90
          },
        });
      })
    </script>
  

不遮挡

默认的对话框,开启后有遮罩及无法操作其他页面内容,设置coverfalse后,即可操作其他页面内容。

不遮挡内容

    <button class="button" id="dialog-uncover">不遮挡内容</button>
    <script>
      $(function(){
        $("#dialog-uncover").dialog({
          "target":{
            "id":"dialoguncover",
            "title":"不遮挡",
            "text":"可操作其他页面内容",
            "confirm":"确定",
            "dark":true
          },
          "cover":false,
        });
      });
    </script>
  

异步

配置ajax参数,可传data参数,并用callback回调函数。

异步处理

异步加载
请选择确定或取消?
确定
取消
    <button class="button" id="dialog-ajax">异步加载</button>
    <div class="dialog" id="ajaxdialog">
      <div class="dialog-body dialog-content">
        <div class="dialog-title">异步加载</div>
        <div class="dialog-text">请选择确定或取消?</div>
        <div data-dismiss="dialog" class="dialog-confirm">确定</div>
        <div data-dismiss="dialog" class="dialog-cancel">取消</div>
      </div>
    </div>
    <script>
      $(function(){
        $("#dialog-ajax").dialog({
          "target":"#ajaxdialog",
          "ajax":{
            "url":"/2.0/data/dialog-ajax.php",
            "data":{"title":"标题","text":"文本"},
            "callback":function(data){
              $("#ajaxdialog>.dialog-body>.dialog-text").html(data["text"]);
            }
          },
        });
      })
    </script>
  

显示位置

配置show参数,可让对话框显示在不同的位置。

侧方显示

侧方show值包含上方.fixed-top、右侧.fixed-right、下方.fixed-bottom、左侧.fixed-left四个位置。

上方显示
右侧显示
下方显示
左侧显示
    <div class="dialog" id="dialog_top">
      <div class="dialog-body" align="center" data-dismiss="dialog">上方显示</div>
    </div>
    <button class="button" id="dialog-top">上方显示</button>
    <script>
      $(function(){
        $("#dialog-top").dialog({
          "target":"#dialog_top",
          "show":"fixed-top",
          "size":"w12 y2",
          "style":"bg-main"
        });
      });
    </script>

    <div class="dialog" id="dialog_right">
      <div class="dialog-body" align="center" data-dismiss="dialog">右侧显示</div>
    </div>
    <button class="button" id="dialog-right">右侧显示</button>
    <script>
      $(function(){
      $("#dialog-right").dialog({
        "target":"#dialog_right",
        "show":"fixed-right",
        "size":"w3 y12",
        "style":"bg-main"
      });
      });
    </script>

    <div class="dialog" id="dialog_bottom">
      <div class="dialog-body" align="center" data-dismiss="dialog">下方显示</div>
    </div>
    <button class="button" id="dialog-bottom">下方显示</button>
    <script>
      $(function(){
        $("#dialog-bottom").dialog({
          "target":"#dialog_bottom",
          "show":"fixed-bottom",
          "size":"w12 y2",
          "style":"bg-main"
        });
      });
    </script>

    <div class="dialog" id="dialog_left">
      <div class="dialog-body" align="center" data-dismiss="dialog">左侧显示</div>
    </div>
    <button class="button" id="dialog-left">左侧显示</button>
    <script>
    $(function(){
      $("#dialog-left").dialog({
        "target":"#dialog_left",
        "show":"fixed-left",
        "size":"w3 y12",
        "style":"bg-main"
      });
    });
    </script>
  

中间显示

中间显示show值包含顶部居中.fixed-top-center、右侧居中.fixed-right-cente、底部居中.fixed-bottom-center、左侧居中.fixed-left-center四个位置;同时可通过style值设置对应的边距。

    <button class="button" id="dialog-center-top">顶部居中</button>
    <script>
      $(function(){
        $("#dialog-center-top").dialog({
          "target":{
            "id":"dialog_center_top",
            "text":"顶部居中",
            "confirm":"确定"
          },
          "show":"fixed-top-center",
          "style":"margin-top",
        });
      });
    </script>

    <button class="button" id="dialog-center-right">右侧居中</button>
    <script>
      $(function(){
        $("#dialog-center-right").dialog({
          "target":{
            "id":"dialog_center_right",
            "text":"右侧居中",
            "confirm":"确定"
          },
          "show":"fixed-right-center",
          "style":"margin-right",
        });
      });
    </script>

    <button class="button" id="dialog-center-bottom">底部居中</button>
    <script>
      $(function(){
        $("#dialog-center-bottom").dialog({
          "target":{
            "id":"dialog_center_bottom",
            "text":"底部居中",
            "confirm":"确定"
          },
          "show":"fixed-bottom-center",
          "style":"margin-bottom",
        });
      });
    </script>

    <button class="button" id="dialog-center-left">左侧居中</button>
    <script>
      $(function(){
        $("#dialog-center-left").dialog({
          "target":{
            "id":"dialog_center_left",
            "text":"左侧居中",
            "confirm":"确定"
          },
          "show":"fixed-left-center",
          "style":"margin-left",
        });
      });
    </script>
  

四角显示

四边角显示show值包含左上角.fixed-left-top、左下角.fixed-left-bottom、右上角.fixed-right-top、右下角.fixed-right-bottom四个位置。

    <button class="button" id="dialog-left-top">左上角</button>
    <script>
      $(function(){
        $("#dialog-left-top").dialog({
          "target":{
            "id":"dialog_left_top",
            "text":"左上角",
            "confirm":"确定"
          },
          "show":"fixed-left-top margin-top",
          "style":"margin-left",
        });
      });
    </script>

    <button class="button" id="dialog-left-bottom">左下角</button>
    <script>
      $(function(){
        $("#dialog-left-bottom").dialog({
          "target":{
            "id":"dialog_left_bottom",
            "text":"左下角",
            "confirm":"确定"
          },
          "show":"fixed-left-bottom margin-bottom",
          "style":"margin-left",
        });
      });
    </script>

    <button class="button" id="dialog-right-top">右上角</button>
    <script>
      $(function(){
        $("#dialog-right-top").dialog({
          "target":{
            "id":"dialog_right_top",
            "text":"右上角",
            "confirm":"确定"
          },
          "show":"fixed-right-top margin-top",
          "style":"margin-right",
        });
      });
    </script>

    <button class="button" id="dialog-right-bottom">右下角</button>
    <script>
      $(function(){
        $("#dialog-right-bottom").dialog({
          "target":{
            "id":"dialog_right_bottom",
            "text":"右下角",
            "confirm":"确定"
          },
          "show":"fixed-right-bottom margin-bottom",
          "style":"margin-right",
        });
      });
    </script>
  

显示方式

默认的显示方式为点击元素后显示对话框,除此之外,也可以是鼠标经过显示,或直接调用显示。显示的大小可以通过size属性设置,也可以用style额外设置对话框的样式,极其灵活。

触发行为

    <button class="button" id="dialog-mouse">鼠标经过显示对话框</button>
    <script>
      $(function(){
        $("#dialog-mouse").dialog({
          "target":{
            "id":"dialogmouse",
            "title":"显示对话框",
            "text":"当鼠标经过显示此对话框",
            "confirm":"确定",
          },
          "mouse":"mouseenter",
        });
      })
    </script>
  

调用显示

在无任何触发行为的情况下,直接调用显示对话框,方法为:

    <script>
      $(function(){
        $().dialog({
          "target":{
            "id":"dialoguntarget",
            "title":"对话框显示",
            "text":"加载或直接调用显示对话框",
            "confirm":"确定",
          },
        });
      })
    </script>
  

尺寸样式

属性sizestyle可分别设置对话框的大小及样式,已定义的size有小.dialog-small、中.dialog-middle、大.dialog-big、全屏.dialog-full安信娱乐谁是老板四个,也可自定义相关的样式类。

对话框尺寸样式
    <div class="dialog" id="dialog_size">
      <div class="dialog-body" align="center" data-dismiss="dialog">对话框尺寸样式</div>
    </div>
    <button class="button" id="dialog-size">对话框尺寸样式</button>
    <script>
      $(function(){
        $("#dialog-size").dialog({
          "target":"#dialog_size",
          "size":"dialog-middle",
          "style":"bg-white radius-big shadow"
        });
      });
    </script>
  

关闭对话框

安信娱乐谁是老板有3种方式可关闭对话框,只需满足其中一个条件即可关闭,分别为:

  1. 在需要关闭的元素上添加data-dismiss="dialog",点击元素后即可关闭;
  2. 当属性dismiss值为true时,点击对话框外部可关闭;
  3. 当设置属性timer值时,单位为秒,可在限定的时间内自动关闭对话框。

关闭对话框

请选择确定或关闭?
确定
关闭
    <button class="button" id="dialog-close">关闭对话框</button>
    <div class="dialog" id="dialogclose">
      <div class="dialog-body dialog-content">
        <div class="dialog-text">请选择确定或关闭?</div>
        <div class="dialog-confirm">确定</div>
        <div data-dismiss="dialog" class="dialog-cancel">关闭</div>
      </div>
    </div>
    <script>
      $(function(){
        $("#dialog-close").dialog({
          "target":"#dialogclose",
          "dismiss":true,
          "timer":3
        });
      })
    </script>
  

禁止关闭

上述的3个条件均不满足时,即无法关闭对话框。

    <button class="button" id="dialog-unclose">禁止关闭</button>
    <script>
      $(function(){
        $("#dialog-unclose").dialog({
          "target":{
            "id":"dialogunclose",
            "text":"此对话框无法关闭,请刷新页面。",
          },
          "dismiss":false,
        });
      })
    </script>
  

调用关闭

当一个已显示的对话框,其id为dialog-close,也可以通过JS调用关闭。

    <script>
      $(function(){
        $().dialog({
          "close":"#dialog-close",
        });
      })
    </script>
  

回调函数

在确认按钮处添加data-confirm="dialog"属性及设置onconfirm参数,即可执行点击确认时的回调函数;同样在取消按钮添加data-cancel="dialog"属性及设置oncancel参数,即可执行点击取消时的回调函数。

请选择确定或取消?
点我确定
点我取消
    <button class="button" id="dialog-function">回调函数</button>
    <div class="dialog" id="dialogfunction">
      <div class="dialog-body dialog-content">
        <div class="dialog-text">请选择确定或取消?</div>
        <div class="dialog-confirm" data-confirm="dialog">点我确定</div>
        <div class="dialog-cancel" data-cancel="dialog">点我取消</div>
      </div>
    </div>
    <script>
      $(function(){
        $("#dialog-function").dialog({
          "target":"#dialogfunction",
          "onconfirm":function(){
            $().dialog({
              "target":{
                "id":"confirmdialog",
                "text":"确认框",
                "confirm":"点击确认后显示",
              },
              "timer":2
            });
          },
          "oncancel":function(){
            alert("点击取消后出现");
          }
        });
      })
    </script>