一个加载css文件的jquery插件

sanders_yao

首发phpx了 为的是解决在ie下无法通过js实时加载css文件的问题
执行速度不要有什么期待 毕竟是通过jquery的选择器来执行 大家看看有没有bug 发现请跟帖告知下

1. /**
   
2. * 为当前整篇文档应用CSS文件样式
   
3. *
   
4. * @author  Sanders Yao
   
5. * @example JQuery.getCSS('CSSFilePath');
   
6. * @example JQuery.getCSS('CSSFilePath', function (css) {
   
7. *              //do something after all style applied
   
8. *          });
   
9. * @example JQuery.getCSS('CSSFilePath', {
   
10. *              beforeApp           : function (css) {
    
11. *                  //do something before all style apply
    
12. *              }
    
13. *              beforeSelectorApp   : function (selector, cssObject) {
    
14. *                  //do something before a style apply
    
15. *              }
    
16. *              afterSelectorApp    : function (selector, cssObject) {
    
17. *                  //do something after a style applied
    
18. *              }
    
19. *              afterApp            : function (css) {
    
20. *                  //do something after all style applied
    
21. *              }
    
22. *          });
    
23. */
    
24. $.extend({
    
25.     getCSS  : function (url, option) {
    
26.         $.get(url, function (css) {
    
27.             var clip    = css.match(/[^{]+\{[^}]+?\}/g);
    
28. 
    
29.             if ('object' == typeof option && 'function' == typeof option.beforeApp) {
    
30.                 if (false === option.beforeApp(css)) {
    
31.                     return  null;
    
32.                 }
    
33.             }
    
34.             for(var i = 0;i < clip.length;i ++) {
    
35.                 //删除注释
    
36.                 var styleCode   = clip[i].replace(/\/\*(.|\s)*?\*\//g, '');
    
37.                 //获取选择器
    
38.                 var selector    = styleCode.replace(/^([^{]+)(.|\s)+$/g, "$1").replace(/(^[^;]*;\s*|^\s+|\s+$)/g, '');
    
39.                 //获取样式定义
    
40.                 var attrList    = styleCode.replace(/^[^{]+\{([^}]+)\}[^}]*$/g, "$1").split(';');
    
41.                 var cssObject   = {};
    
42.                 for (var j = 0;j < attrList.length;j ++) {
    
43.                     var attr    = attrList[j].split(':');
    
44.                     if (2 == attr.length) {
    
45.                         var tmpVarName  = attr[0].replace(/(^\s+|\s+$)/g, '');
    
46.                         var varName     = '';
    
47.                         for (var k = 0;k < tmpVarName.length;k ++) {
    
48.                             if ('-' == tmpVarName.charAt(k)) {
    
49.                                 ++ k;
    
50.                                 varName += tmpVarName.charAt(k).toUpperCase();
    
51.                             } else {
    
52.                                 varName += tmpVarName.charAt(k);
    
53.                             }
    
54.                         }
    
55.                         cssObject[varName]  = attr[1].replace(/(^\s+|\s+$)/g, '');
    
56.                     }
    
57.                 }
    
58.                 if ('object' == typeof option && 'function' == typeof option.beforeSelectorApp) {
    
59.                     if (false === option.beforeSelectorApp(selector, cssObject)) {
    
60.                         continue;
    
61.                     }
    
62.                 }
    
63.                 $(selector).css(cssObject);
    
64.                 if ('object' == typeof option && 'function' == typeof option.afterSelectorApp) {
    
65.                     option.afterSelectorApp(selector, cssObject);
    
66.                 }
    
67.             }
    
68.             if ('function' == typeof option) {
    
69.                 option(css);
    
70.             }
    
71.             if ('object' == typeof option && 'function' == typeof option.afterApp) {
    
72.                 option.afterApp(css);
    
73.             }
    
74.         });
    
75.     }
    
76. });

复制代码

notion001

1. JQuery.getCSS('CSSFilePath', {
   
2. 
   
3.               beforeApp           : function (css) {
   
4. 
   
5.                   //do something before all style apply
   
6. 
   
7.               }
   
8. 
   
9.               beforeSelectorApp   : function (selector, cssObject) {
   
10. 
    
11.                   //do something before a style apply
    
12. 
    
13.               }
    
14. 
    
15.               afterSelectorApp    : function (selector, cssObject) {
    
16. 
    
17.                   //do something after a style applied
    
18. 
    
19.               }
    
20. 
    
21.               afterApp            : function (css) {
    
22. 
    
23.                   //do something after all style applied
    
24. 
    
25.               }
    
26. 
    

复制代码

surpass_li

帮顶...