最终对象暴露版：css
/**
* 仿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 = options.end_value - options.start_value;
var increase_per = MY_MATH._accDiv(distance_value,options.time_cost);//每秒的增量
var progress_init = 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;
}
$("#"+options.id).setProgressbarValue(progress_init);//设置进度
console.info("progress bar id:"+progress_init+" is:"+progress_init);
//
},1000);
}
});
})(jQuery);
html
下面是其余进度版： jquery
/**
* 仿jquery ui progressbar,div自动转进度条
* 使用：引入本插件
* 调用示例：
*
$( function() {
$("#myprogressbarxxx").progressbar();//初始化进度
$("#myprogressbarxxx").setProgressbarValue(2);//设置进度比0-100
var per = $("#myprogressbarxxx").getProgressbarValue();//得到进度值
alert(per);
} );
页面(自定义height/width)：
<div id="myprogressbarxxx" style="height:20px;width:100px;"></div>
*/
;(function($) {
//init progressbar
$.progressbar = function(this_progressbar,options) {
debugger;
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
},
//构造元素（这个浏览器不一样，兼容性不稳定）
init_progressbar_element: 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;
},
//构造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;
},
//数据类型
__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){
debugger;
var $this_ui_progressbar_content = $.extend(this.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(this.defaults.styles.ui_progressbar_percent);
var ui_progressbar_style = this._getStyleStr(this.defaults.styles.ui_progressbar);
var pro_html = '<div class="'+this.defaults.classes.ui_progressbar_content+'" id= "'+outer_options.id+'" title="'+outer_options.value+'%" style="'+ui_progressbar_content_style+'">';
pro_html += '<div class="'+this.defaults.classes.ui_progressbar+'" style="'+ui_progressbar_style+'width:'+outer_options.value+'%">';
pro_html += '<div class="'+this.defaults.classes.ui_progressbar_percent+'" style="'+ui_progressbar_percent_style+'">'+outer_options.value+'%</div>';
pro_html += '</div>';
pro_html += '</div>';
pro_html += '<span class="'+this.defaults.classes.ui_out_progressbar_percent+'">'+outer_options.value+'%</span>';
return pro_html;
}
});
//暴露公共方法
$.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");
}
});
$.fn.progressbar = $.prototype.progressbar = function(options) {
return this.each(function() {
if (this.tagName. toLowerCase() == "div"){
new $.progressbar(this, options);//要的话存在data中
}
});
};
})(jQuery);
//得到进度实例 FIXME 上面返回对象格式有点问题
/**
* 在dialog中显示进度条时，得到进度条对象html源码
参数说明：
defaults = {
id:"",//进度id(必须指定)
value: 0,//进度完成比例(可覆盖)
styles:{
width:"200px",//进度条宽(可覆盖)
height:"20px"//进图调高度(可覆盖)
}
};
dialog中显示比例：浏览器
var dialogProgressBar1 = "dialogProgressBar1";
var dialogProgressBar1Html = "<br/>"+getProgressBarInstance({"id":dialogProgressBar1});//得到进度信息
showDragDivHtml({"id":"xx","ui_widget_header_info": "合同基础信息导入进度详情","my_ui_widget_content_info":"处理中，请稍好。。。","stable_div":dialogProgressBar1Html});//展现拖拽
$("#"+dialogProgressBar1).setProgressbarValue(20);//设置进度比0-100
var per = $("#"+dialogProgressBar1).getProgressbarValue();//得到进度值
alert(per);
*
*/
function getProgressBarInstance(outer_options){
debugger;
//必要参数
this.defaults = {
id:"",
value: 0,
styles:{
width:"200px",
height:"20px"
}
};
var outer_options = $.extend({},this.defaults, outer_options);
if(!outer_options.id){
alert("init progress need args : id !");
return "";
}
return $.progressbar.prototype.construct_progressbar_html(outer_options);
}app
对象封装方式，版本二：函数
/**
* 仿jquery ui progressbar,div自动转进度条
* 使用：引入本插件
* 调用示例：
*
$( function() {
$("#myprogressbarxxx").progressbar();//初始化进度
$("#myprogressbarxxx").setProgressbarValue(2);//设置进度比0-100
var per = $("#myprogressbarxxx").getProgressbarValue();//得到进度值
alert(per);
} );
页面(自定义height/width)：
<div id="myprogressbarxxx" style="height:20px;width:100px;"></div>
*/
;(function($) {
/**
* 进度条构造
*/
$.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;
},
//数据类型
__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 $this_ui_progressbar_content = $.extend(this.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(this.defaults.styles.ui_progressbar_percent);
var ui_progressbar_style = this._getStyleStr(this.defaults.styles.ui_progressbar);
var pro_html = '<div class="'+this.defaults.classes.ui_progressbar_content+'" id= "'+outer_options.id+'" title="'+outer_options.value+'%" style="'+ui_progressbar_content_style+'">';
pro_html += '<div class="'+this.defaults.classes.ui_progressbar+'" style="'+ui_progressbar_style+'width:'+outer_options.value+'%">';
pro_html += '<div class="'+this.defaults.classes.ui_progressbar_percent+'" style="'+ui_progressbar_percent_style+'">'+outer_options.value+'%</div>';
pro_html += '</div>';
pro_html += '</div>';
pro_html += '<span class="'+this.defaults.classes.ui_out_progressbar_percent+'">'+outer_options.value+'%</span>';
console.info("pro_html is:"+pro_html);
return pro_html;
}
});
//暴露公共方法
$.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");
}
});
$.fn.progressbar = $.prototype.progressbar = function(options) {
return this.each(function() {
if (this.tagName. toLowerCase() == "div"){
new $.progressbar(this, options);//要的话存在data中
}
});
};
/**
* 数学精确计算
*/
$.my_math = function(options) {};
$.extend($.my_math.prototype, {
//除法函数
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);
}
}
});
/**
* 初始化进度条 类方法
*/
$.my_progressbar_oper = function(options) { };
$.extend($.my_progressbar_oper.prototype, {
/**
* 在dialog中显示进度条时，得到进度条对象html源码
参数说明：
defaults = {
id:"",//进度id(必须指定)
value: 0,//进度完成比例(可覆盖)
styles:{
width:"200px",//进度条宽(可覆盖)
height:"20px"//进图调高度(可覆盖)
}
};
dialog中显示比例：
var dialogProgressBar1 = "dialogProgressBar1";
var dialogProgressBar1Html = "<br/>"+getProgressBarInstance({"id":dialogProgressBar1});//得到进度信息
showDragDivHtml({"id":"xx","ui_widget_header_info": "合同基础信息导入进度详情","my_ui_widget_content_info":"处理中，请稍好。。。","stable_div":dialogProgressBar1Html});//展现拖拽
$("#"+dialogProgressBar1).setProgressbarValue(20);//设置进度比0-100
var per = $("#"+dialogProgressBar1).getProgressbarValue();//得到进度值
alert(per);
*
*/
getProgressBarInstance:function(options){
//必要参数
this.defaults = {
id:"",
value: 0,
styles:{
width:"200px",
height:"20px"
}
};
var options = $.extend({},this.defaults, options);
if(!options.id){
alert("init progress need args : id !");
return "";
}
return $.progressbar.prototype.construct_progressbar_html(options);
},
startProgressBar: function (options){
defaults = {
id:"",//进度id
start_value: 0,//起始值
end_value:100,//完成值
time_cost:10//耗时(s)
};
var options = $.extend({},defaults, options);
if(!options.id){
alert("startProgressBar need args : id !");
return;
}
var distance_value = options.end_value - options.start_value;
var increase_per = $.my_math.prototype.accDiv(distance_value,options.time_cost);//每秒的增量
var progress_init = 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;
}
$("#"+options.id).setProgressbarValue(progress_init);//设置进度
console.info("progress bar id:"+progress_init+" is:"+progress_init);
//
},1000);
}
});
})(jQuery);
ui
对象封装简化，版本三：this