jQuery任务栏(原创)

所属分类:UI-弹出层,对话框

 2400  10  查看评论 (0)
jQuery任务栏(原创) ie兼容9

发布时间: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);
}
相关插件-弹出层,对话框

jQuery遮罩弹窗居中

jQuery遮罩弹窗始终屏幕剧中,调用简单代码少。
  弹出层
 25566  161

18种弹框特效

18种弹框特效
  弹出层
 46892  447

jQuery制作侧边悬浮折叠影藏弹窗特效

jQuery制作侧边悬浮折叠影藏弹窗特效
  弹出层
 13079  81

jquery网站功能介绍步骤

网站功能介绍步骤,可以引导用户该怎么操作,或者应该做什么
  弹出层
 16333  143

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币

取消回复