jspanel创建多功能浮动层

jspanel是一个jQuery多功能浮动面板,允许动态ajax、自动关闭、自定义内容里样式、拖动、改变大小、自定义主题样式、标题、工具栏内容、工具栏按钮、模态窗口、最大化、最小化等等。

淘建站为您提供更多_悬浮层/弹出层_拖动_浮动_浮动层，在此特别感谢您对我们的支持与厚爱！

引入jspanel插件

<link rel="stylesheet" type="text/css" href="jspanel/jquery.jspanel.min.css" />
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui/jquery-ui.min.js"></script>
<script src="jspanel/jquery.jspanel.min.js"></script>

演示一：默认效果

$('#sample-basic').click(function() {
    $.jsPanel();
});

演示二：自定义选择器、标题、位置、内容和主题

<div id="content" style="position: relative"></div>

$('#sample-select').click(function() {
    $.jsPanel({
        selector: "#content", //试试选择器body,记得父标签设置postion:relative
        title: "标题",
        position: "center",
        theme: "success",
        content: "内容..."
    });
});

jspanel中文API

addClass: {header: "custonHeaderClass", content: "custonContentClass", footer: "custonFooterClass" }

ajax: {url: ‘http://www..com/js'   }

autoclose: 4000 

bootstrap: 'danger'

callback: [function() {     this.title('Callback example').content.load('http://jspanel.de/files/loremipsum.html'); }, function(panel) {     panel.content.css('background', '#FFEBCD'); }]

"controls": {     buttons: true,     iconfont: 'jsglyph',     close: false,     confirmClose: false,     maximize: false,     minimize: false,     normalize: false,     smallify: false,     maxtoScreen: false }