JProgressBar 一个进度条组件

最近做的一个小东西，共享出来给有兴趣的朋友们

以下是组件的效果图

JProgressBar：

• 支持垂直和水平两个方向的显示
• 自定义进度条中显示文本
• 自定义进度条的大小
• 可自定义进度条样式
• 动态修改进度条进度值
• 兼容：IE6+、FireFox2+、Chrome ?、Safari ?、Opera ?

浏览完整的DEMO DEMO里的代码较乱-_-#

制作中碰到的问题：

　　进度条文字居中显示

　　参考

  
    

   
      
   
     div#wrap 
   
     {
   
     
 display
   
     :
   
     table
   
     ;
   
     
 border
   
     :
   
     1px solid #FF0099
   
     ;
   
     
 background-color
   
     :
   
     #FFCCFF
   
     ;
   
     
 width
   
     :
   
     760px
   
     ;
   
     
 height
   
     :
   
     400px
   
     ;
   
     
 *position
   
     :
   
     relative
   
     ;
   
     
 overflow
   
     :
   
     hidden
   
     ;
   
     
 
   
     }
   
     
 div#subwrap 
   
     {
   
     
 vertical-align
   
     :
   
     middle
   
     ;
   
     
 display
   
     :
   
     table-cell
   
     ;
   
     
 *position
   
     :
   
     absolute
   
     ;
   
     
 *top
   
     :
   
     50%
   
     ;
   
     
 width
   
     :
   
     100%
   
     ;
   
     
 
   
     }
   
     
 div#content 
   
     {
   
      
 *position
   
     :
   
     relative
   
     ;
   
     
 *top
   
     :
   
     -50%
   
     ;
   
     
 text-align
   
     :
   
     center
   
     ;
   
     
 
   
     }
  
    

  
    

   
      
   
     <
   
     div 
   
     id
   
     ="wrap"
   
     >
   
     
 
   
     <
   
     div 
   
     id
   
     ="subwrap"
   
     >
   
     
 
   
     <
   
     div 
   
     id
   
     ="content"
   
     ><
   
     pre
   
     >
   
     现在我们要使这段文字垂直居中显示！
 div#wrap {
 border:1px solid #FF0099;
 background-color:#FFCCFF;
 width:760px;
 height:500px;
 position:relative;
 }
 div#subwrap {
 position:absolute;
 border:1px solid #000;
 top:50%;
 }
 div#content {
 border:1px solid #000;
 position:relative;
 top:-50%;
 }
   
     </
   
     pre
   
     >
   
     
 
   
     </
   
     div
   
     >
   
     
 
   
     </
   
     div
   
     >
   
     

   
     </
   
     div
   
     >
  
    

　　进度条默认加载样式

　　最开始使用是基本的创建style标签然后将CSS样式赋上面在追加到head的最后。

　　这样带来了一个问题是，如果在那之前有定义进度条的自定义的样式时，定义的样式会由于样式的优先关系而被54了。

　　解决的办法是用document.styleSheets 提供的接口来将样式规则一条一条的添加在最前

　　详细的我不细说（其实我也说不清楚），有兴趣可以自行找找相关的资料

　　下面是JProgressBar 此方面 的实现

    JProgressBar.init = function(){

        var head,styleElement,styleSheets,addRule,styleSheet,rIndex,patt,rule,css;

        rIndex      = 0;

        css         = RES.CSS;

        patt        = /([^\{]*.*?)\{([^\}]*?)\}/g;

        styleSheets = DOM.styleSheets;

        if(!styleSheets.length){

            head                =   DOM.getElementsByTagName("HEAD")[0];

            styleElement        =   DOM.createElement('STYLE');

            styleElement.type   =   'text/css';

            (head||DOM).appendChild(styleElement);

            styleElement        =   head =  null;

        }

        styleSheet = styleSheets[0];

        addRule    = !ISIE?function(selector,css,rIndex,rule){styleSheet.insertRule(rule,rIndex)}:styleSheet.addRule;   

        var i,b;

        while((rule=patt.exec(css))){

           addRule(rule[1],rule[2],0,rule[0]);

        }

    }