JProgressBar 一个进度条组件

时间：2011-05-23 来源：毛狮子

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

以下是组件的效果图

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;
  
  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]);
        }
    }