list.js 4.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. UE.parse.register('list',function(utils){
  2. var customCss = [],
  3. customStyle = {
  4. 'cn' : 'cn-1-',
  5. 'cn1' : 'cn-2-',
  6. 'cn2' : 'cn-3-',
  7. 'num' : 'num-1-',
  8. 'num1' : 'num-2-',
  9. 'num2' : 'num-3-',
  10. 'dash' : 'dash',
  11. 'dot' : 'dot'
  12. };
  13. utils.extend(this,{
  14. liiconpath : 'http://bs.baidu.com/listicon/',
  15. listDefaultPaddingLeft : '20'
  16. });
  17. var root = this.root,
  18. ols = root.getElementsByTagName('ol'),
  19. uls = root.getElementsByTagName('ul'),
  20. selector = this.selector;
  21. if(ols.length){
  22. applyStyle.call(this,ols);
  23. }
  24. if(uls.length){
  25. applyStyle.call(this,uls);
  26. }
  27. if(ols.length || uls.length){
  28. customCss.push(selector +' .list-paddingleft-1{padding-left:0}');
  29. customCss.push(selector +' .list-paddingleft-2{padding-left:'+ this.listDefaultPaddingLeft+'px}');
  30. customCss.push(selector +' .list-paddingleft-3{padding-left:'+ this.listDefaultPaddingLeft*2+'px}');
  31. utils.cssRule('list', selector +' ol,'+selector +' ul{margin:0;padding:0;}\n' + selector + ' li{clear:both;}\n'+customCss.join('\n'), document);
  32. }
  33. function applyStyle(nodes){
  34. var T = this;
  35. utils.each(nodes,function(list){
  36. if(list.className && /custom_/i.test(list.className)){
  37. var listStyle = list.className.match(/custom_(\w+)/)[1];
  38. if(listStyle == 'dash' || listStyle == 'dot'){
  39. utils.pushItem(customCss,selector +' li.list-' + customStyle[listStyle] + '{background-image:url(' + T.liiconpath +customStyle[listStyle]+'.gif)}');
  40. utils.pushItem(customCss,selector +' ul.custom_'+listStyle+'{list-style:none;} '+ selector +' ul.custom_'+listStyle+' li{background-position:0 3px;background-repeat:no-repeat}');
  41. }else{
  42. var index = 1;
  43. utils.each(list.childNodes,function(li){
  44. if(li.tagName == 'LI'){
  45. utils.pushItem(customCss,selector + ' li.list-' + customStyle[listStyle] + index + '{background-image:url(' + T.liiconpath + 'list-'+customStyle[listStyle] +index + '.gif)}');
  46. index++;
  47. }
  48. });
  49. utils.pushItem(customCss,selector + ' ol.custom_'+listStyle+'{list-style:none;}'+selector+' ol.custom_'+listStyle+' li{background-position:0 3px;background-repeat:no-repeat}');
  50. }
  51. switch(listStyle){
  52. case 'cn':
  53. utils.pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-1{padding-left:25px}');
  54. utils.pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-2{padding-left:40px}');
  55. utils.pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-3{padding-left:55px}');
  56. break;
  57. case 'cn1':
  58. utils.pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-1{padding-left:30px}');
  59. utils.pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-2{padding-left:40px}');
  60. utils.pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-3{padding-left:55px}');
  61. break;
  62. case 'cn2':
  63. utils.pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-1{padding-left:40px}');
  64. utils.pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-2{padding-left:55px}');
  65. utils.pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-3{padding-left:68px}');
  66. break;
  67. case 'num':
  68. case 'num1':
  69. utils.pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-1{padding-left:25px}');
  70. break;
  71. case 'num2':
  72. utils.pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-1{padding-left:35px}');
  73. utils.pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-2{padding-left:40px}');
  74. break;
  75. case 'dash':
  76. utils.pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft{padding-left:35px}');
  77. break;
  78. case 'dot':
  79. utils.pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft{padding-left:20px}');
  80. }
  81. }
  82. });
  83. }
  84. });