jQuery任务栏（原创）

所属分类： JQ特效 UI 弹出层

查看演示立即下载

插件描述：基于jQueryUI动画效果与拖动方法实现任务栏放大、缩小、可拖动

发布时间：2018-5-29 1:36

1.思路来源：

插件开发源于近期项目中需要有个供系统全局使用的弹窗，一时就联想到类似浏览器广告弹窗的东西，在右下角弹出一个小窗口，使窗口能够放大缩小或者关闭。

2.插件功能分析：

①任务栏需要有个标题，可根据实际情况定义；

②需要有缩放按钮、关闭按钮，并提供缩放、打开关闭接口；

③任务栏内容必须可自定义；大致上就是以上3点

3.插件代码讲解

3.1 引入插件，实例化TaskBar对象即可创建一个简单的任务栏

/**
* 初始化任务栏
* @param container 可有可无，任务栏所在容器（默认body）
* @param options配置 可有可无
* options: {
* position: 'right-bottom', // 可选值['left-top', 'right-top', 'right-bottom', 'left-bottom']，默认值'right-bottom'
* title: '任务栏标题',
* width: 400, // 任务栏宽度，默认400
* height: 200, // 任务栏高度，默认200,
* showCallback: function(){}, // 初始化任务栏显示后回调
* closeCallback: function(){}, // 点击关闭后回调
* content: $('<div>Hello World!</div>') // 任务栏内容，可为dom结点或字符串数据,
* contentStyle: 任务栏内容样式
* }
*
*/
function TaskBar($container, options);

3.2 插件提供几个简单的方法可供外部使用

例：taskBar.maximize(function(){})

/**
* 显示最大化任务栏
* @param  {Function} callback 回调函数
*/
maximize: function(callback){
    maximize(callback);
},
/**
* 最小化任务栏
* @param  {Function} callback 回调函数
*/
minimize: function(callback){
    minimize(callback);
},
/**
* 关闭任务栏
* @param  {Function} callback 回调函数
*/
close: function(callback){
close(callback);
},
/**
* 获取当前任务栏
* @return {[type]} [description] 返回当前任务栏dom
*/
getTaskBar: function(){
    return $container.find('#' + _id);
}

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：百度地图插件
下一个特效： jquery.photoClip图片裁剪添加旋转缩放按钮功能