FoldingMenu.js 3.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. //折叠菜单命名空间
  2. Namespace.register("U.Control.FoldMenu");
  3. /*
  4. //创建控件函数
  5. //data 自定义折叠菜单控件数据
  6. /*
  7. // var data = [
  8. // { text: '菜单1', submenu: { text: ['子菜单1', '子菜单2', '子菜单3', '子菜单4', '子菜单5']} },
  9. // { text: '菜单2', submenu: { text: ['子菜单1', '子菜单2', '子菜单3', '子菜单4', '子菜单5']} }
  10. // {......}
  11. // ];
  12. // text 菜单名字
  13. // submenu 是否有子菜单,没有可不写
  14. */
  15. //container容器
  16. //*/
  17. U.Control.FoldMenu.CreateElement = function (data, container) {
  18. if (!data) {
  19. var data = [
  20. { text: '菜单1', submenu: { text: ['子菜单1', '子菜单2', '子菜单3', '子菜单4', '子菜单5']} },
  21. { text: '菜单2', submenu: { text: ['子菜单1', '子菜单2', '子菜单3', '子菜单4', '子菜单5']} }
  22. ];
  23. }
  24. if (data.length) {
  25. var nav = $$("div", { "class": "U_Control_FoldMenu_nav" }, container); //创建控件最外层元素
  26. var ul = $$("ul", { "class": "U_Control_FoldMenu_main_menu" }, nav); //创建控件ul元素
  27. for (var i = 0; i < data.length; i++) {//循环判断
  28. var li = $$("li", {}, ul); //创建li元素
  29. var a_menu_title = $$("a", { "class": "U_Control_FoldMenu_menu_title" }, li); //创建ayuans
  30. a_menu_title.onclick = function () { U.Control.FoldMenu.Lishow(this); } //赋值a元素点击事件
  31. var img = $$("img", { "class": "U_Control_FoldMenu_Icon", 'src': 'http://d.1473.cn/controls/pc/FoldingMenu/Demo1/img/JT.png' }, a_menu_title); //创建控件菜单箭头元素
  32. var spna = $$("span", { "innerHTML": data[i].text }, a_menu_title); //创建控件菜单名字
  33. if (data[i].submenu.text.length) {//判断是否有子菜单
  34. var sub_menu_ul = $$("ul", { "class": "U_Control_FoldMenu_sub_menu", "style": { "height": "0"} }, li); //创建子菜单ul元素
  35. for (var j = 0; j < data[i].submenu.text.length; j++) {
  36. var li = $$("li", {}, sub_menu_ul);
  37. var a = $$("a", { "innerHTML": data[i].submenu.text[j] }, li);
  38. }
  39. }
  40. }
  41. }
  42. return nav;
  43. }
  44. /*
  45. //子菜单显示函数
  46. //e 事件源元素(event对象)
  47. */
  48. U.Control.FoldMenu.Lishow = function (e) {
  49. var menu = e.parentNode.getElementsByTagName("ul")[0];
  50. if (menu) {
  51. if (menu.style.height=="0px") {
  52. for (var i = 0; i < $(".U_Control_FoldMenu_main_menu ul").length; i++) {
  53. $(".U_Control_FoldMenu_main_menu ul")[i].style.height = "0px";
  54. U.Control.FoldMenu.TS($(".U_Control_FoldMenu_menu_title")[i],0);
  55. $(".U_Control_FoldMenu_menu_title")[i].className = "U_Control_FoldMenu_menu_title";
  56. }
  57. menu.style.height = menu.getElementsByTagName("li").length * 30 + 'px';
  58. e.className +=" U_Control_FoldMenu_menu_title_active";
  59. U.Control.FoldMenu.TS(e,90);
  60. }
  61. else {
  62. menu.style.height = 0;
  63. U.Control.FoldMenu.TS(e,0);
  64. //$(".U_Control_FoldMenu_menu_title")[i].className = "U_Control_FoldMenu_menu_title";
  65. e.className = "U_Control_FoldMenu_menu_title";
  66. }
  67. }
  68. }
  69. /*
  70. //图片旋转样式改变函数
  71. //目标对象
  72. //n 旋转度数
  73. */
  74. U.Control.FoldMenu.TS=function(e,n){
  75. e.getElementsByTagName("img")[0].style.webkitTransform="rotate("+n+"deg)";
  76. e.getElementsByTagName("img")[0].style.MozTransform="rotate("+n+"deg)";
  77. e.getElementsByTagName("img")[0].style.msTransform="rotate("+n+"deg)";
  78. e.getElementsByTagName("img")[0].style.OTransform="rotate("+n+"deg)";
  79. e.getElementsByTagName("img")[0].style.transform="rotate("+n+"deg)";
  80. }