jquery插件整合，A:拖拽dialog的jq插件 B:进度条的jq插件 C:锁屏的jq插件 D:回顶部的jq插件 E:简单可控提示仿alert的js插件...
jquery插件整合
A:拖拽dialog，B:进度条，C:锁屏，D:回顶部
A:拖拽dialog：common_drag_div.js
;(function($) {
/**
* 拖拽dialog
*/
$.drag_div = function(options) {};
$.extend($.drag_div.prototype, {
defaults: {
classes: {
"my_ui_widget_content": "my_ui_widget_content",
"ui_widget_header": "ui_widget_header",
"ui_widget_header_close": "ui_widget_header_close",
"stable_div": "stable_div",
"my_ui_widget_content_info": "my_ui_widget_content_info"
},
styles:{
my_ui_widget_content :{
'position':'absolute',
'left':'10%',
'top':'5%',
'z-index':'9991',
'border': '1px solid #c5c5c5',
'background': '#ffffff',
'padding':'10px',
'overflow-x':'hidden',
'overflow-y':'auto',
'max-width':'500px',
'_width':'expression(document.body.clientWidth > 500? "500px": "auto" )',
'max-height':'320px',
'_height':'expression(document.body.clientHeight > 320 ? "320px" : "auto")',
'filter': 'alpha(opacity=90)',
'-moz-opacity':'0.9',
'opacity': '0.9'
},
my_ui_widget_content_info:{
'overflow-y':'auto',
'border': '1px solid #c5c5c5',
'max-height':'180px',
'_height':'expression(document.body.clientHeight > 180 ? "180px" : "auto")'
},
ui_widget_header :{
'display':'inline-block',
'width':'85%',
'text-align':'center',
'padding':'5px',
'border': '1px solid #dddddd',
'background': '#e9e9e9',
'color': '#333333',
'font-size':'20px',
'font-weight': 'bold',
'cursor': 'move'
},
ui_widget_header_close:{
'display':'inline-block',
'width':'10%',
'text-align':'center',
'padding':'5px',
'border': '1px solid #c5c5c5',
'background': '#f6f6f6',
'color': '#333333',
'font-size':'20px',
'font-weight': 'bold',
'cursor': 'pointer'
},
stable_div:{
}
}
}
});
/**
* jquery封装功能
*/
$.fn.dragDiv = function(divWrap,callback) {
if(!divWrap){
divWrap = ".my_ui_widget_content";
}
return this.each(function() {
var $divMove = $(this);//鼠标可拖拽区域
var $divWrap = divWrap ? $divMove.parents(divWrap) : $divMove;//整个移动区域
var mX = 0, mY = 0;//定义鼠标X轴Y轴
var dX = 0, dY = 0;//定义div左、上位置
var isDown = false;//mousedown标记
if(document.attachEvent) {//ie的事件监听，拖拽div时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
$divMove[0].attachEvent('onselectstart', function() {
return false;
});
}
$divMove.mousedown(function(event) {
var event = event || window.event;
mX = event.clientX;
mY = event.clientY;
dX = $divWrap.offset().left;
dY = $divWrap.offset().top;
isDown = true;//鼠标拖拽启动
});
$(document).mousemove(function(event) {
var event = event || window.event;
var x = event.clientX;//鼠标滑动时的X轴
var y = event.clientY;//鼠标滑动时的Y轴
if(isDown) {
$divWrap.css({"left": x - mX + dX, "top": y - mY + dY});//div动态位置赋值
}
});
$divMove.mouseup(function() {
isDown = false;//鼠标拖拽结束
});
//绑定关闭事件
var $closeBtn = $divWrap.find(".ui_widget_header_close");
if($closeBtn && $closeBtn.length > 0){
$closeBtn.bind("click",function(){
$divWrap.remove();
//执行回调
if(callback && typeof(callback) === "function"){
var args = [];
callback.apply(this,args);//回调函数
}
});
}
});
};
})(jQuery);
/**
* 设置dialog数据变化html
参数：
{
"id":"xx",//dialog id
"my-ui-widget-content-info":"xx"//变更html
}
*/
var my_drag_div_operator_object = {
//数据类型
__getClass :function(object){
return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
},
//css对象转style串
_getStyleStr : function(item){
var styleStr = '';
if(this.__getClass(item) == 'Object'){
for ( var p in item ){
var objVal = item[p];
styleStr += p + ":" +objVal + ";";
}
}
return styleStr;
},
_initDragDivStyle:function(){
//加载样式,暂时style中不支持 filter ,就往head中加style FIXEDME
var defaults = $.drag_div.prototype.defaults;
var drag_style = '<style type="text/css">';
drag_style += '.'+defaults.classes.my_ui_widget_content+'{';
drag_style += this._getStyleStr(defaults.styles.my_ui_widget_content);
drag_style += '}';
drag_style += '.'+defaults.classes.ui_widget_header+'{';
drag_style += this._getStyleStr(defaults.styles.ui_widget_header);
drag_style += '}';
drag_style += '.'+defaults.classes.ui_widget_header_close+'{';
drag_style += this._getStyleStr(defaults.styles.ui_widget_header_close);
drag_style += '}';
drag_style += '.'+defaults.classes.stable_div+'{';
drag_style += this._getStyleStr(defaults.styles.stable_div);
drag_style += '}';
drag_style += '.'+defaults.classes.my_ui_widget_content_info+'{';
drag_style += this._getStyleStr(defaults.styles.my_ui_widget_content_info);
drag_style += '}';
drag_style += '</style>';
var headHtml = $("head").html();
if(!(headHtml && headHtml.indexOf('.'+defaults.classes.my_ui_widget_content) > -1)){
$("head").append(drag_style);
}
},
/**
获得drag DIV html代码，默认html根为body
参数：
{
"id":"xx",//id
"ui-widget-header-info": "xx",//dialog标题信息(可覆盖)
"my-ui-widget-content-info":"xx",//dialog内容信息html(可覆盖，经常变动的html)
"stable_div":""//dialog内容信息html((可覆盖，不经常变动的html)
}
调用：
showDragDivHtml({"id":"xx","ui_widget_header": "合同基础信息导入进度详情","my_ui_widget_content_info":"处理中，请稍好。。。","stable_div":dialogProgressBar1Html});//展示拖拽
*/
showDragDivHtml:function(options){
var defaults = {"id":"","ui_widget_header": "title info is null!","my_ui_widget_content_info":"content is null!","stable_div":""};
var options = $.extend({},defaults, options);
if(options.id){
this._initDragDivStyle();//初始化样式
var dragDivHtml = '';
dragDivHtml += '<div class="my_ui_widget_content" id="my_ui_widget_content'+options.id+'">';
dragDivHtml += '<span id="'+options.id+'" class="ui_widget_header">'+options.ui_widget_header+'</span><span class="ui_widget_header_close" title="\u5173\u95ed">x</span>';
dragDivHtml += '<div class="stable_div">'+options.stable_div+'</div>';//dialog稳定区域（暂时放进度条）
dragDivHtml += '<div class="my_ui_widget_content_info">';
dragDivHtml += options.my_ui_widget_content_info;//展示内容
dragDivHtml += '</div>';
dragDivHtml += '</div>';
$("body").prepend(dragDivHtml);
$("#"+options.id).dragDiv(".my_ui_widget_content",options.callback);
}
},
setDragDivContentInfo:function(options){
var defaults = {"id":"","my_ui_widget_content_info":"请指定内容"};
var options = $.extend(defaults, options);
if(options.id){
var my_ui_widget_content_info_obj = $("#my_ui_widget_content"+options.id+" .my_ui_widget_content_info");
my_ui_widget_content_info_obj.html(options.my_ui_widget_content_info);
try{
var my_ui_widget_content_info_scroll_height = (my_ui_widget_content_info_obj.get(0)).scrollHeight;
my_ui_widget_content_info_obj.scrollTop(my_ui_widget_content_info_scroll_height);
}
catch(err) {
console.info("setDragDivContentInfo failed,because dragDivContent has removed."+err);
}
}
},
hideDragDivContent:function(options){
var defaults = {"id":""};
var options = $.extend(defaults, options);
if(options.id){
$("#my_ui_widget_content"+options.id).remove();
}
}
//alert信息
,showDragAlert:function(options){
var defaults = {"alert_info":"\u8f93\u5165\u63d0\u793a\u4fe1\u606f"};
var options = $.extend(defaults, options);
var _rootEl=document.compatMode=="CSS1Compat"?document.documentElement:document.body;
var top = "30%";
if(_rootEl){
top = _rootEl.scrollTop + _rootEl.clientHeight/2 - _rootEl.clientHeight/4 ;
top += "px";
}
var my_alert_html = '';
my_alert_html += '<div id="';
if(options.id){
my_alert_html += options.id;
}
my_alert_html += '" class="my_alert_info" style="border:1px solid #c5c5c5;background:#ffffff;padding:5px;width:210px;heigth:200px;position:absolute;left:50%;top:'+top+';z-index:9991">';
my_alert_html += ' <span class="my_alert_info_head" style="display:inline-block;width:90%;text-align:left;padding:3px;border: 1px solid #dddddd;background: #e9e9e9;color: #333333;font-weight: bold;cursor: move;">';
my_alert_html += ' \u7f51\u9875\u4fe1\u606f';
my_alert_html += ' </span>';
my_alert_html += ' <span class="ui_widget_header_close" title="\u5173\u95ed" style="display:inline-block;width:10%;text-align:center;border:1px solid #c5c5c5;background:#e9e9e9;color:#333333;font-weight:bold;cursor:pointer;padding:3px;">X</span>';
my_alert_html += ' <div class="alert_info" style="margin-top:5px;padding:3px;">';
my_alert_html += options.alert_info;
my_alert_html += ' </div>';
my_alert_html += ' <div class="ui_widget_header_close" style="margin-top:10px;border:1px solid #c5c5c5;padding:3px;cursor:pointer;margin-left:30%;text-align:center;width:50px;">\u786e\u5b9a</div>';
my_alert_html += '</div>';
$("body").prepend(my_alert_html);
$(".my_alert_info_head").dragDiv(".my_alert_info",function(){
});
}
,hideDragAlert:function(options){
$(".my_alert_info").remove();
}
};
document.onkeydown = function(e) {
//回车关闭my_alert_info
if($(".my_alert_info").length > 0){
var ev = (typeof event!= 'undefined') ? window.event : e;
if(ev.keyCode == 13) {
$(".my_alert_info").remove();
}
}
}
B:进度条：common_plug_progressbar.js
/**
* 仿jquery ui progressbar,div自动转进度条
* 使用：引入本插件
*/
;(function($) {
/**
* 进度条构造
*
调用：
<div id="myprogressbarxxx" style="height:20px;width:100px;"></div>
$( function() {
$("#myprogressbarxxx").progressbar();//初始化进度
$("#myprogressbarxxx").setProgressbarValue(2);//设置进度比0-100
var per = $("#myprogressbarxxx").getProgressbarValue();//获得进度值
alert(per);
} );
*/
var progressbar = function(this_progressbar,options) {
return this._init_progressbar(this_progressbar,options);
};
$.extend(progressbar.prototype, {
defaults: {
classes: {
"ui_progressbar_content": "ui_progressbar_content",
"ui_progressbar_percent": "ui_progressbar_percent",
"ui_progressbar": "ui_progressbar",
"ui_out_progressbar_percent": "ui_out_progressbar_percent"
},
styles:{
ui_progressbar_content :{
"border": "1px solid #c5c5c5",
"background": "#ffffff",
"color": "#333333",
"display":"inline"
},
ui_progressbar :{
"position":"relative",
"height": "100%",
"cursor":"pointer",
"background": "#e9e9e9",
"overflow": "hidden"
},
ui_progressbar_percent:{
"position":"absolute",
"right":"3px"
},
ui_out_progressbar_percent:{
}
},
min: 0,
max: 100,
value: 0
},
//构造html
_init_progressbar: function(this_progressbar,options) {
var options = $.extend({},this.defaults, options);
var per_info = options.value+"%";
var this_ui_progressbar_content = $(this_progressbar).css(options.styles.ui_progressbar_content).attr("title",per_info);
var this_ui_progressbar_percent = $("<div>").addClass(options.classes.ui_progressbar_percent).css(options.styles.ui_progressbar_percent).html(per_info);
var this_ui_progressbar = $("<div>").addClass(options.classes.ui_progressbar).css(options.styles.ui_progressbar).css({"width":per_info});
this_ui_progressbar_percent.appendTo(this_ui_progressbar);
this_ui_progressbar.appendTo(this_ui_progressbar_content);
return this_ui_progressbar_content;
}
});
//包装jquery div进度对象
$.fn.progressbar = $.prototype.progressbar = function(options) {
return this.each(function() {
if (this.tagName. toLowerCase() == "div"){
new progressbar(this, options);//要的话存在data中
}
});
};
/**
* jquery 设置/获得进度值
*
* 调用：
* $("#myprogressbarxxx").setProgressbarValue(2);//设置进度比0-100
* var per = $("#myprogressbarxxx").getProgressbarValue();//获得进度值
alert(per);
*
*/
$.fn.extend({
//设置进度值
'setProgressbarValue':function(value){
if(value > 100){
value = 100;
}
var per_info = value+"%";
$(this).attr("title",per_info);
$(this).find("."+progressbar.prototype.defaults.classes.ui_progressbar_percent).html(per_info);
$(this).find("."+progressbar.prototype.defaults.classes.ui_progressbar).css({"width":per_info});
$(this).next("."+progressbar.prototype.defaults.classes.ui_out_progressbar_percent).html(per_info);
},
//获得进度值
'getProgressbarValue':function(value){
return $(this).attr("title");
}
});
/**
* 精确计算
*/
var MY_MATH = {
//除法
_accDiv:function(arg1, arg2) {
var t1 = 0, t2 = 0, r1, r2;
try {
t1 = arg1.toString().split(".")[1].length;
}
catch (e) {
}
try {
t2 = arg2.toString().split(".")[1].length;
}
catch (e) {
}
with (Math) {
r1 = Number(arg1.toString().replace(".", ""));
r2 = Number(arg2.toString().replace(".", ""));
return (r1 / r2) * pow(10, t2 - t1);
}
}
};
/**
* 1.获得进度条html
* 2.启动进度条
*
* 调用：
* var my_progressbar_operator = new $.my_progressbar_operator ();
* var html = my_progressbar_operator.getProgressBarInstance({});
* my_progressbar_operator.startProgressBar({"id":"xx"});
*
*/
$.my_progressbar_operator = function(options) { };
$.extend($.my_progressbar_operator.prototype, {
//数据类型
__getClass :function(object){
return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
},
//css对象转style串
_getStyleStr : function(item){
var styleStr = '';
if(this.__getClass(item) == 'Object'){
for ( var p in item ){
var objVal = item[p];
styleStr += p + ":" +objVal + ";";
}
}
return styleStr;
},
/**
* 构建progressbar html
*
* 参数说明：
{
id:"",//进度id(必须指定)
value: 0,//进度完成比例(可覆盖)
styles:{
width:"200px",//进度条宽(可覆盖)
height:"20px"//进图调高度(可覆盖)
}
};
*/
_construct_progressbar_html:function(outer_options){
var defaults = progressbar.prototype.defaults;
var $this_ui_progressbar_content = $.extend(defaults.styles.ui_progressbar_content, outer_options.styles);
var ui_progressbar_content_style = this._getStyleStr($this_ui_progressbar_content);
var ui_progressbar_percent_style = this._getStyleStr(defaults.styles.ui_progressbar_percent);
var ui_progressbar_style = this._getStyleStr(defaults.styles.ui_progressbar);
var pro_html = '<div class="'+defaults.classes.ui_progressbar_content+'" id= "'+outer_options.id+'" title="'+outer_options.value+'%" style="'+ui_progressbar_content_style+'">';
pro_html += '<div class="'+defaults.classes.ui_progressbar+'" style="'+ui_progressbar_style+'width:'+outer_options.value+'%">';
pro_html += '<div class="'+defaults.classes.ui_progressbar_percent+'" style="'+ui_progressbar_percent_style+'">'+outer_options.value+'%</div>';
pro_html += '</div>';
pro_html += '</div>';
pro_html += '<span class="'+defaults.classes.ui_out_progressbar_percent+'">'+outer_options.value+'%</span>';
//console.info("pro_html is:"+pro_html);
return pro_html;
},
/**
* 构造进度html
*
参数说明：
defaults = {
id:"",//进度id(必须)
value: 0,//进度完成比例(可覆盖)
styles:{
width:"200px",//进度条宽(可覆盖)
height:"20px"//进图调高度(可覆盖)
}
};
*
*/
getProgressBarInstance:function(options){
var defaults = {
id:"",
value: 0,
styles:{
width:"200px",
height:"20px"
}
};
var options = $.extend({},defaults, options);
if(!options.id){
alert("init progress need args : id !");
return "";
}
return this._construct_progressbar_html(options);
},
/**
* 开启进度
*
* 参数说明：
defaults = {
id:"",//进度id(必须)
start_value: 0,//起始值(可覆盖)
end_value:100,//完成值(可覆盖)
time_cost:10//耗时(s)(可覆盖)
};
*/
startProgressBar: function (options){
var defaults = {
id:"",
start_value: 0,
end_value:100,
time_cost:10
};
var options = $.extend({},defaults, options);
if(!options.id){
alert("startProgressBar need args : id !");
return;
}
var distance_value = Number(options.end_value) - Number(options.start_value);
var increase_per = MY_MATH._accDiv(distance_value,Number(options.time_cost));//每秒的增量
var progress_init = Number(options.start_value);//起始值
var interval_temp = setInterval(function(){
//
if(progress_init >= 100){
if(interval_temp){
window.clearInterval(interval_temp);
}
progress_init = 100;
}else{
progress_init = progress_init + increase_per;
}
progress_init = Math.round(progress_init*100)/100;
$("#"+options.id).setProgressbarValue(progress_init);//设置进度
//console.info("progress bar id:"+progress_init+" is:"+progress_init);
//
},1000);
}
});
})(jQuery);
C:锁屏：common_lock_screen.js
/**
* 锁屏
*/
;(function($) {
$.lock_screen = function(options) {};
$.extend($.lock_screen.prototype, {
defaults: {
classes: {
"ie_fixed_lock_screen": "ie_fixed_lock_screen",
"ie_fixed_lock_screen_center_position": "ie_fixed_lock_screen_center_position"
},
styles:{
ie_fixed_lock_screen :{
'display':'none',
'z-index':'9990',
'width':'100%',
'height':'100%',
'filter': 'alpha(opacity=50)',
'-moz-opacity':'0.5',
'opacity': '0.5',
'background':'#DDD',
'_position': 'absolute',
'_clear': 'both',
'_top':'expression(eval(document.compatMode && document.compatMode=="CSS1Compat") ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) - 8 : document.body.scrollTop +(document.body.clientHeight-this.clientHeight) - 8)'
}
,ie_fixed_lock_screen_center_position:{
'position':'absolute',
'top':'40%',
'left':'30%',
'scroll':'auto'
}
}
}
});
})(jQuery);
var my_lock_screen_operator_object = {
//数据类型
__getClass :function(object){
return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
},
//css对象转style串
_getStyleStr : function(item){
var styleStr = '';
if(this.__getClass(item) == 'Object'){
for ( var p in item ){
var objVal = item[p];
styleStr += p + ":" +objVal + ";";
}
}
return styleStr;
},
_init_lock_screen_style:function(){
//加载样式,暂时style中不支持 filter ,就往head中加style FIXEDME
var defaults = $.lock_screen.prototype.defaults;
var drag_style = '<style type="text/css">';
drag_style += '.'+defaults.classes.ie_fixed_lock_screen+'{';
drag_style += this._getStyleStr(defaults.styles.ie_fixed_lock_screen);
drag_style += '}';
drag_style += '.'+defaults.classes.ie_fixed_lock_screen_center_position+'{';
drag_style += this._getStyleStr(defaults.styles.ie_fixed_lock_screen_center_position);
drag_style += '}';
drag_style += '</style>';
var headHtml = $("head").html();
if(!(headHtml && headHtml.indexOf('.'+defaults.classes.my_ui_widget_content) > -1)){
$("head").append(drag_style);
//console.info("dary_style:"+drag_style);
}
},
showLockScreen:function(){
this._init_lock_screen_style();
$("body").append('<div class="ie_fixed_lock_screen"><div class="ie_fixed_lock_screen_center_position">\u5904\u7406\u4e2d\uff0c\u8bf7\u7a0d\u540e\u3002\u3002\u3002</div></div>');
$(".ie_fixed_lock_screen").show();
},
setLockScreenInfo:function(lockScreenInfo){
if(lockScreenInfo){
$(".ie_fixed_lock_screen_center_position").html(lockScreenInfo);
}
},
hideLockScreen:function(){
$(".ie_fixed_lock_screen").remove();
}
}
D:回顶部：common_scroll.js
/**
*回到顶部 auto scroll 页面引入生效
*/
;(function($) {
/**
* dialog配置
*/
$.auto_scroll = function(options) {};
$.extend($.auto_scroll.prototype, {
defaults: {
classes: {
"scroll_fixed_": "scroll_fixed_",
"ie_scroll_fixed_": "ie_scroll_fixed_",
"x_scroll_goto_top": "x_scroll_goto_top"
},
styles:{
scroll_fixed_ :{
'position':'fixed',
'right':'8px',
'bottom':'8px',
'width':'30px',
'height':'30px',
'cursor':'pointer',
'border-radius':'2px'
},
ie_scroll_fixed_ :{
'_position': 'absolute',
'_clear': 'both',
'_top':'expression(eval(document.compatMode && document.compatMode=="CSS1Compat") ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) - 8 : document.body.scrollTop +(document.body.clientHeight-this.clientHeight) - 8)'
},
x_scroll_goto_top:{
'border': '1px solid #DDD',
'font':'25px',
'color':'#4e736e',
'line-height':'30px',
'font-color':'#DBF1EE',
'text-align':'center'
}
}
}
});
})(jQuery);
var my_scroll_operator_object = {
//数据类型
__getClass :function(object){
return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
},
//css对象转style串
_getStyleStr : function(item){
var styleStr = '';
if(this.__getClass(item) == 'Object'){
for ( var p in item ){
var objVal = item[p];
styleStr += p + ":" +objVal + ";";
}
}
return styleStr;
},
_initScrollStyle:function(){
//加载样式,暂时style中不支持 filter ,就往head中加style FIXEDME
var defaults = $.auto_scroll.prototype.defaults;
var drag_style = '<style type="text/css">';
drag_style += '.'+defaults.classes.scroll_fixed_+'{';
drag_style += this._getStyleStr(defaults.styles.scroll_fixed_);
drag_style += '}';
drag_style += '.'+defaults.classes.ie_scroll_fixed_+'{';
drag_style += this._getStyleStr(defaults.styles.ie_scroll_fixed_);
drag_style += '}';
drag_style += '.'+defaults.classes.x_scroll_goto_top+'{';
drag_style += this._getStyleStr(defaults.styles.x_scroll_goto_top);
drag_style += '}';
drag_style += '</style>';
var headHtml = $("head").html();
if(!(headHtml && headHtml.indexOf('.'+defaults.classes.scroll_fixed_) > -1)){
$("head").append(drag_style);
}
}
}
$(document).ready(function () {
my_scroll_operator_object._initScrollStyle();
$("body").append('<div class="scroll_fixed_ ie_scroll_fixed_ x_scroll_goto_top" title="\u56de\u9876\u90e8">\u2191</div>');
$(window).scroll(function() {
var sctop = $(document).scrollTop();
if(sctop > 10){
$(".x_scroll_goto_top").fadeIn("middle");
}else{
$(".x_scroll_goto_top").fadeOut("middle");
}
});
//回到頂部
$('.x_scroll_goto_top').click(function(){
$('html, body').animate({scrollTop:0}, 'middle');
});
});
转载于:https://my.oschina.net/u/1052786/blog/892151