简要教程
popupWindow.js是一款jQuery弹出层窗口插件。该插件能够轻松的制作弹出层模态窗口效果。弹出的窗口支持最大化、最小化、拖拽、改变尺寸等功能。
使用方法
安装：
npminstallgasparesganga-jquery-popup-window
bowerinstallgasparesganga-jquery-popup-window
在HTML文件中引入。
<linkhref="src/popupwindow.css"rel="stylesheet">
<scriptsrc="//code.jquery.com/jquery.min.js"></script>
<scriptsrc="src/popupwindow.js"></script>
HTML结构
<buttonid="basic-demo_button"class="btnbtn-primary">单窗口示例</button>
<divid="basic-demo"class="example_content">这是一个模态窗口</div>
CSS样式
初始化时隐藏窗口内容。
.example_content{
display:none;
}
初始化插件
然后通过下面的代码来初始化插件。
$("#basic-demo").PopupWindow({
//optionshere
});
配置参数
$("#basic-demo").PopupWindow({
//popuptitle
title:"PopupWindow",
//modalmode
modal:true,
//autoopenonpageload
autoOpen:true,
//anmationspeed
animationTime:300,
//customcssclasses
customClass:"",
//customactionbuttons
buttons:{
close:true,
maximize:true,
collapse:true,
minimize:true
},
//button'sposition
buttonsPosition:"right",
//custombuttontext
buttonsTexts:{
close:"Close",
maximize:"Maximize",
unmaximize:"Restore",
minimize:"Minimize",
unminimize:"Show",
collapse:"Collapse",
uncollapse:"Expand"
},
//draggableoptions
draggable:true,
nativeDrag:true,
dragOpacity:0.6,
//resizableoptions
resizable:true,
resizeOpacity:0.6,
//enablestatusbar
statusBar:true,
//topposition
top:"auto",
//leftposition
left:"auto",
//height/width
height:200,
width:400,
maxHeight:undefined,
maxWidth:undefined,
minHeight:100,
minWidth:200,
collapsedWidth:undefined,
//alwayskeepinviewport
keepInViewport:true,
//enablemousehmoveevents
mouseMoveEvents:true
});
API
//open
$('#selector').PopupWindow("open")
//close
$('#selector').PopupWindow("close")
//maximize
$('#selector').PopupWindow("maximize")
//unmaximize
$('#selector').PopupWindow("unmaximize")
//minimize
$('#selector').PopupWindow("minimize")
//unminimize
$('#selector').PopupWindow("unminimize")
//collapse
$('#selector').PopupWindow("collapse")
//uncollapse
$('#selector').PopupWindow("uncollapse")
//getthecurrentpositionofthefirsetpopupwindow
//returnanobjectwithnumerictopandleftvalues.
$('#selector').PopupWindow("getposition")
//setthepoisition
$('#selector').PopupWindow("setposition",position)
//getthecurrentsizeofthefirsetpopupwindow
//returnanobjectwithnumericwidthandheightvalues.
$('#selector').PopupWindow("getsize")
//setthesize
$('#selector').PopupWindow("setsize",size)
//getthecurrentstateofthefirsetpopupwindow
//returnastringrepresentingthestate:normal,closed,collapsed,minimizedormaximized
$('#selector').PopupWindow("getstate")
//setthestate
$('#selector').PopupWindow("setstate",state)
//setthetitle
$('#selector').PopupWindow("settitle",title)
//setthecontentinthestatusbar
$('#selector').PopupWindow("statusbar",content)
//destroytheplugin
$('#selector').PopupWindow("destroy")
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery