jspanel创建多功能浮动层

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

分类：悬浮层/弹出层 > 拖动难易：中级

查看演示下载资源下载积分： 20 积分

引入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	自定义头部、底部和内容的样式。 `addClass: {header: "custonHeaderClass", content: "custonContentClass", footer: "custonFooterClass" }`	-
ajax	`ajax: {url: ‘http://www.sucaihuo.com/js' }`	-
autoclose	自动关闭毫秒 `autoclose: 4000`	-
bootstrap	主题有default, primary, info, success, warning and danger。 `bootstrap: 'danger'`	-
callback	回调函数： `callback: [function() { this.title('Callback example').content.load('http://jspanel.de/files/loremipsum.html'); }, function(panel) { panel.content.css('background', '#FFEBCD'); }]`	-
controls	控制按钮： `"controls": { buttons: true, iconfont: 'jsglyph', close: false, confirmClose: false, maximize: false, minimize: false, normalize: false, smallify: false, maxtoScreen: false }`	-
selector	选择器	-
title	标题	-
content	内容	-

jspanel创建多功能浮动层

引入jspanel插件

演示一：默认效果

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

选项