老师的代码风格好乱啊,写可复用的组件居然不用oop,随意就定全局变量。如果我需要把组件写成可以在项目中复用的,要怎么重新包装?
lizzz
2014-09-21
3 回答
风格的确值得吐槽。如果做成项目中复用的话,建议直接写成 Jquery的插件。这样调用就行了 $('#div').resizeable();
代码如下:
$.fn.resizeable = function(){ $(this).each(function(){ Resizable( $(this).attr('id') ) }) } // 设置某个面板支持调整大小 function Resizable(panelId) { if (!window.__resizable_var) { with (window) { // ctrl :控制元素,panel :面板 , type 类型 m_panel = 1, m_ctrl = 1 , m_type = 1 // move: 是否侦听鼠标移动, // m_start_x: 鼠标相对ctrl元素的left、right // m_to_x: 鼠标的新位置 moving = 0 , m_start_x = 0 , m_start_y = 0 , m_to_x = 0 , m_to_y = 0; // 面板最小尺寸 m_min_w = 100, m_min_h = 40; } } var panel = document.getElementById(panelId); // 插入调整控制元素 var r = document.createElement("div"); var b = document.createElement("div"); var rb = document.createElement("div"); r.class = r.className = 'ui-Resizable-r ui-Resizable-ctrl'; b.class = b.className = 'ui-Resizable-b ui-Resizable-ctrl'; rb.class = rb.className = 'ui-Resizable-rb ui-Resizable-ctrl'; panel.appendChild(r); panel.appendChild(b); panel.appendChild(rb); // 鼠标移动处理 function on_move() { if (moving) { // 计算最小的 left 和 top (使panel的新大小不能小于自身的位置) var min_left = 0 var min_top = 0 var to_x = Math.max(min_left + m_min_w, m_to_x - m_start_x); var to_y = Math.max(min_top + m_min_h, m_to_y - m_start_y); // 元素的新位置 = 鼠标新位置 - 鼠标相对元素的位置s switch (m_type) { case 'r' : m_ctrl.style.left = to_x + "px"; m_panel.style.width = to_x + 10 + 'px'; break; case 'b' : m_ctrl.style.top = to_y + "px"; m_panel.style.height = to_y + 10 + 'px'; break; case 'rb' : m_ctrl.style.left = to_x + "px"; m_ctrl.style.top = to_y + "px"; m_panel.style.width = to_x + 20 + 'px'; m_panel.style.height = to_y + 20 + 'px'; break; } } } // 在控制元素中按下 function on_mousedown(e, panel, ctrl, type) { var e = e || window.event; // 计算出鼠标页面位置 和 当前元素位置的差 = 鼠标相对元素的位置 m_start_x = e.pageX - ctrl.offsetLeft; m_start_y = e.pageY - ctrl.offsetTop; m_panel = panel; m_ctrl = ctrl; m_type = type; // 开始处理移动事件 moving = setInterval(on_move, 10); } // 为调整控制元素设置拖拽处理 r.addEventListener('mousedown', function (e) { on_mousedown(e, panel, r, 'r'); }) b.addEventListener('mousedown', function (e) { on_mousedown(e, panel, b, 'b'); }) rb.addEventListener('mousedown', function (e) { on_mousedown(e, panel, rb, 'rb'); }); if (!window.__resizable_var) { // 页面鼠标移动侦听处理 document.addEventListener('mousemove', function (e) { var e = window.event || e; m_to_x = e.pageX; m_to_y = e.pageY; }) // 鼠标弹起处理 document.addEventListener('mouseup', function (e) { clearInterval(moving); var cls = document.getElementsByClassName('ui-Resizable-ctrl'); for (var i = 0; i < cls.length; i++) { cls[i].style.left = ''; cls[i].style.top = ''; } }) window.__resizable_var = true; } }
举报
0/150
提交
取消