jspanel创建多功能浮动层

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

引入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.sucaihuo.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 }