jQuery弹出层窗口插件popupWindow.js
源码介绍
popupWindow.js是一款jQuery弹出层窗口插件。该插件能够轻松的制作弹出层模态窗口效果。弹出的窗口支持最大化、最小化、拖拽、改变尺寸等功能。 安装: 在HTML文件中引入。 初始化时隐藏窗口内容。 然后通过下面的代码来初始化插件。 popupWindow.js-jQuery弹出层窗口插件的github网址为:https://github.com/gasparesganga/jquery-popup-window简要教程
使用方法
npm install gasparesganga-jquery-popup-window
bower install gasparesganga-jquery-popup-window
<link href="src/popupwindow.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/popupwindow.js"></script>
HTML结构
<button id="basic-demo_button" class="btn btn-primary">单窗口示例</button>
<div id="basic-demo" class="example_content">这是一个模态窗口</div>
CSS样式
.example_content {
display : none;
}
初始化插件
$("#basic-demo").PopupWindow({
// options here
});
配置参数
$("#basic-demo").PopupWindow({
// popup title
title : "Popup Window",
// modal mode
modal : true,
// auto open on page load
autoOpen : true,
// anmation speed
animationTime : 300,
// custom css classes
customClass : "",
// custom action buttons
buttons : {
close : true,
maximize : true,
collapse : true,
minimize : true
},
// button's position
buttonsPosition : "right",
// custom button text
buttonsTexts : {
close : "Close",
maximize : "Maximize",
unmaximize : "Restore",
minimize : "Minimize",
unminimize : "Show",
collapse : "Collapse",
uncollapse : "Expand"
},
// draggable options
draggable : true,
nativeDrag : true,
dragOpacity : 0.6,
// resizable options
resizable : true,
resizeOpacity : 0.6,
// enable status bar
statusBar : true,
// top position
top : "auto",
// left position
left : "auto",
// height / width
height : 200,
width : 400,
maxHeight : undefined,
maxWidth : undefined,
minHeight : 100,
minWidth : 200,
collapsedWidth : undefined,
// always keep in viewport
keepInViewport : true,
// enable mouseh move events
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")
// get the current position of the firset popup window
// return an object with numeric top and left values.
$('#selector').PopupWindow("getposition")
// set the poisition
$('#selector').PopupWindow("setposition", position)
// get the current size of the firset popup window
// return an object with numeric width and height values.
$('#selector').PopupWindow("getsize")
// set the size
$('#selector').PopupWindow("setsize", size)
// get the current state of the firset popup window
// return a string representing the state: normal, closed, collapsed, minimized or maximized
$('#selector').PopupWindow("getstate")
// set the state
$('#selector').PopupWindow("setstate", state)
// set the title
$('#selector').PopupWindow("settitle", title)
// set the content in the status bar
$('#selector').PopupWindow("statusbar", content)
// destroy the plugin
$('#selector').PopupWindow("destroy")
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » jQuery弹出层窗口插件popupWindow.js
发表评论 取消回复