wind 弹窗组件开放下载

原创作品，版权归 windKe 所有，使用请保留出处.

localhost-blog-blog-index-html

组件信息


this.widgetInfo = {
   fileName   : "window",
   version    : "1.0.0",
   author     : "windKe",
   createTime : "2016 10 5",
   updateTime : "2016 11 2"
};

版本记录

2016-10-5 1.0.0 创建版本这一版修复了连续滚动切换多页的 bug，新增了滚动后回调接口，开放了上一屏（moveDown），下一屏（moveUp）,以及滚动到指定索引位置（moveTo）三个接口，内置了 swipeEvents 用来对触屏的支持。重写了样式定义，不再依赖 absolute 定位，添加了浏览器对 CSS3 支持的判断，以便于支持 Css3 的浏览器使用 css3 Translate 渲染，而不支持的浏览器使用 Jquery 的 animate 方法渲染。对 DOM 结构进行了缓存，提高了性能。

参数配置

参数名

类型

默认值

可选值

说明

width

Number

350

自定义

弹窗宽度

height

Number

400

自定义

弹窗高度

title

String

提示信息

自定义

弹窗标题

content

String

弹出框内容

自定义

弹窗内容

skinClassName

String

window_skin_a

自定义

弹窗样式

maxlenth

Number

自定义

confirm 弹出框的时候能够输入的最大字数

inputype

String

text

text,image,submit,radio,checkbox

confirm 弹出框输入框的类型

hasCloseBtn

Boolean

true

true,false

是否显示关闭按钮

okText

String

确定

自定义

确定按钮的文字

cancleText

String

取消

自定义

取消按钮的文字

showBtns

Boolean

true

true,false

是否显示按钮

hasMask

Boolean

true

true,false

是否显示遮罩

dragHandler

String

.window_box_title

自定义

拖动区域类名

Function

function(){}

自定义

默认 close 回调函数

Function

function(){}

自定义

点击确定后的回调函数

cancel

Function

function(){}

自定义

点击取消后的回调函数

confirm

Function

function(){}

自定义

prompt 框以后执行的回调函数

minsize

Number

当敞口这个宽度的时候会进行 80%显示窗口

callback

Function

function(){}

自定义

默认关闭窗口后执行的处理函数

基础属性和方法

参数名

类型

默认值

示例

说明

widgetInfo

Object

组件信息

alert

Function

继承组件 cfg

{width:100,height:100}

警告框

prompt

Function

继承组件 cfg

{width:100,height:100}

输入框确认

confirm

Function

继承组件 cfg

{width:100,height:100}

确认框

CSS 样式

                                `/*box pop up*/
                                    .window_box{
                                      background-color: #fff;
                                      box-shadow:0 0 25px rgba(0,0,0,0.3);
                                      position: fixed;
                                      top:100px;
                                      left: 500px;
                                      z-index: 999;
                                      padding:10px;
                                    }
                                    .window_box_content{
                                      width:100%;
                                      padding:10px 0;
                                      position: relative;
                                    }
                                    .window_box_title{

                                    }
                                    .window_box_close{
                                      display: block;
                                      position: absolute;
                                      right:10px;
                                      top:10px;
                                      z-index: 3;
                                      width:20px;
                                      height:20px;
                                      line-height: 20px;
                                      text-align: center;
                                      font-size:20px;
                                      color:#6ccc62;
                                      cursor: pointer;
                                      opacity: 1;
                                      transition: all .3s linear;
                                      &:hover{
                                        opacity: 0.6;
                                      }
                                    }
                                    .window_skin_a.window_box{
                                      border:10px solid rgba(0,0,0,0.3);
                                    }
                                    .window_skin_a {
                                      .window_box_content{
                                        input{
                                           max-width:100%;
                                        }
                                        p{
                                          line-height: 50px;
                                          font-family: "Microsoft Yahei", "Helvetica Neue", "Hiragino Sans GB", Helvetica, Tahoma, sans-serif;
                                          font-size: 14px;
                                          text-align: center;
                                        }

                                      }
                                      .window_box_title{

                                      }
                                      .window_box_close{

                                      }
                                      .window_box_footer{
                                         display: flex;
                                         justify-content: space-around;
                                         .btn{
                                           width:150px;
                                         }
                                      }
                                    }
                                    .window_box_mask{
                                      background-color: rgba(0,0,0,0.2);
                                      width:100%;
                                      height:100%;
                                      position: fixed;
                                      left:0;
                                      top:0;
                                      z-index: 99;
                                    }`

HTML 结构

无需 html 结构，只需给 dom 元素绑定事件

页面调用


require(['jquery', 'underscore', 'backbone',"window"],function ($, _, Backbone, w,){
                var pop = new w.Window();
                //调用警告框
                pop.alert({title:'警告框',content:'我是一个警告框！',width:200,height:150}).on('ok',function(){
                    alert('ok');
                }).on('cancel',function(){
                    alert('cancel');
                });
                //调用确认警告框
                pop.confirm({title:'确认警告框',content:'我是一个确认警告框！',width:200,height:150}).on('ok',function(){
                    alert('ok');
                }).on('cancel',function(){
                    alert('cancel');
                });
                //调用输入弹出框
                pop.prompt({title:'输入弹出框',content:'我是一个输入弹出框！',width:200,height:150}).on('ok',function(){
                    alert('ok');
                }).on('cancel',function(){
                    alert('cancel');
                });
});