微软菜单speedmenu.js

精选转载

追梦人_java 2011-05-03 13:33:08 博主文章分类：javascript

/*
* function ：急速菜单
* @author :(greentea_lll@)
* @version : 1.0.3
* @date : 2007-3-21
* @modifydate : 2007-3-23

微软菜单speedmenu.js _职场

原理
写成类的形式
1.总的初始化，使用统一的css类名称
2.初始化形成表格
3.建立一个空对象，
4.在空对象上面增加第一个节点，第二个节点
5.给第一个节点增加子节点
6.2层关系
7.把所有的美化都放在css文件内
8.主要文件主要是写调用菜单
使用例子:
<script src="speedmenu.js"   language="JavaScript" type="">
var m_no=0;
var url="";
var prompt = "";
var text = "";
var mid_text =".";// 数字标题+标题中间符号
var menu_css_up;   //主菜单：鼠标放在上面的字体颜色变化
var menu_css_down; //主菜单：鼠标离开字体颜色变化
var submenu_css; //子菜单的css设置
var pic_show; //主菜单显示了子菜单的背景图片
var pic_hide; //主菜单隐藏了子菜单的背景图片

menu_css_mouseover = "menu_mouseover";
menu_css_mouseout = "menu_mouseout";
submenu_css="sub_menu";
pic_show="menu_p_w_picpaths/title_bg_show.gif";
pic_hide="menu_p_w_picpaths/title_bg_hide.gif";

var menu=new speedmenu(menu_css_mouseover,menu_css_mouseout,pic_show,pic_hide,submenu_css,"m_tree_right");
menu.menu_table_border(0); //设置菜单的边
menu.submenu_table_border(1); //设置子菜单的边
menu.submenu_mouseover_css("submenu_mouseover"); //设置子菜单鼠标经过的颜色
menu.submenu_mouseout_css("submenu_mouseout"); //设置子菜单鼠标经过的颜色

//系统管理
menu.start;
menu.addmenu("系统管理");
menu.start_submenu();

url = "../super_manager/manager_Function_Action.do?type=11&id=0";
prompt = "设置用户登录的管理功能基本信息";
text ="管理功能";
m_no=get_no(m_no);
menu.addsubmenu(m_no+mid_text+text,prompt,url);

url = "../super_manager/manager_Part_Action.do?p=view";
prompt = "设置用户登录的管理功能基本信息";
text ="管理部门";
m_no=get_no(m_no);
menu.addsubmenu(m_no+mid_text+text,prompt,url);
menu.end;
</script>
*/

   //定义公有变量
   var mouseover_css ; //主菜单鼠标经过的css
   var mouseout_css ;   //主菜单鼠标离开的css

var SubMenuMouseOver_css ; //子菜单鼠标经过的css
var SubMenuMouseOut_css ; //子菜单鼠标离开的css

   var pic_hide ;       //主菜单隐藏背景图片
   var pic_show;        //主菜单显示背景图片
   var m_element_index ;
   var menu_name;      //主菜单 ID名称
   var submenu_name;   //子菜单 ID名称
   var submenu_css;    //子菜单 CSS
   var m_link_target_window; //子菜单打开的目标连接窗口
   var m_submenu_table_border=1; //子菜单边据
   var m_menu_table_border=1;     //主菜单border
   /*
   初始化类函数接口
   参数:
   m_mouseover_css : 当鼠标放在上面后的css类
   m_mouseout_css : 当鼠标点后放在上面的css类
   m_pic_hide ：当鼠标放在上面显示的背景图片
   m_submenu_css:子菜单的css名称
   target_window:子节点打开的目标显示窗口
   */

function speedmenu(m_mouseover_css,m_mouseout_css,menu_pic_hide,menu_pic_show,m_submenu_css,target_window) //整个类的接口
{

    //初始化一些变量
    mouseover_css =   m_mouseover_css   ;
    mouseout_css =   m_mouseout_css ;
    submenu_css = m_submenu_css;
    m_element_index = 0;
    menu_name = "menu";
    submenu_name ="submenu";

    pic_show = menu_pic_show;
    pic_hide = menu_pic_hide;

m_link_target_window=target_window;//打开目标窗口

    //主菜单边据
    this.submenu_table_border = function(border)
    {
        m_submenu_table_border = border;
    }
    //子菜单边据
    this.menu_table_border = function(border)
    {
        m_menu_table_border = border;
    }
    //子菜单背景颜色变化
    this.submenu_mouseover_css = function(css)
    {
        SubMenuMouseOver_css = css;
    }
    this.submenu_mouseout_css = function(css)
    {
        SubMenuMouseOut_css = css;
    }

    /*菜单开始*/
    this.start = function()
   {
var str;
     str = "<table   border="+m_menu_table_border+"   cellspacing='0' bordercolor='#CCCCCC' cellpadding='0'   align='left'>";
document.write(str);
   }

     /*菜单开始*/
   this.end=function()
   {
var str;
     str = "</table>";
document.write(str);
   }

   /*增加第一级菜单，输入菜单名称即可*/
   this.addmenu = function(menu_text)
   {
m_element_index = m_element_index + 1; //元素位置++

var str;
var id =menu_name + m_element_index;

str = "<tr>";
str +="<td class='"+mouseout_css+"'";
str +=" id='" +id+"'";
str +=" onmouseover=\"this.className='"+mouseover_css+"';\"";
str +=" onmouseout=\"this.className='"+mouseout_css+"';\"";

str +=" onclick='onShowSubMenu("+m_element_index+")'";
str +=" style='cursor:hand' ";
str +=" background= '"+pic_hide+"'   >";
     str += "<span>"+menu_text+"</span>";
str += "</td>";
str += "</tr>";
document.write(str);
   }

   /*开始增加子节点*/
    this.start_submenu = function()
   {
var str;
var id=submenu_name+m_element_index;
     str =   "<TR>";
str += "<td id='"+id+"' style='DISPLAY: none' >";
str += "<div class='"+m_submenu_css+"' >";
str += "<table border="+m_submenu_table_border+" cellspacing='0' cellpadding='0' bordercolor='#CCCCCC' align='left'>";
document.write(str);
   }

/*结束增加自节点*/
    this.end_submenu = function()
   {
var str;
     var black_line;       //增加一个空白行

black_line = "<div> ";
black_line += "<table border=0 cellspacing='0' cellpadding='0' bordercolor='#CCCCCC' align='center'>";
black_line += " <TR> ";
black_line += "<td height=20> </td></tr>";
black_line += "</table>";
black_line += "</div>";

str = "</table></div>" + "" +"</td></tr>";
document.write(str);
}

   /*
   增加第一级菜单，输入菜单名称即可
   submenu_text=""
   submenu_title="" 显示的提示标题
   URL=""
   */
   this.addsubmenu = function(submenu_text,submenu_title,URL)
   {
var str;
var link_title;
var len;
len=0;

len=submenu_title.length;//获得标题的长度

if(len==0)
{
   link_title = "";
}
else
{
   link_title = " title='" + submenu_title + "' ";
}
str = "<tr>";
    str += "<td   ";
str += " height=22>"; //这是另外一种方法
//str +=" onmouseover=\"this.className='"+SubMenuMouseOver_css+"';\"";
//str +=" onmouseout=\"this.className='"+SubMenuMouseOut_css+"';\"";

str += " <a href='" + URL + "' ";
str += link_title;
str += " target='" + m_link_target_window + "'>   ";
str += submenu_text + "</a>";
str += "</td>";
str += "</tr>";
document.write(str);
}
} //文件的最后结束

//显示子菜单，当鼠标点击主菜单后
function onShowSubMenu(index)
{

var m_submenu;
var m_main_menu;

m_submenu = eval（submenu_name+index);
m_main_menu = eval（menu_name+index);

if (m_submenu.style.display == "none")
{
   eval（submenu_name + index + ".style.display=\"\";");
   m_main_menu.background=pic_show;
}
else
{
   eval（submenu_name + index + ".style.display=\"none\";");
   m_main_menu.background=pic_hide;
}
}

//鼠标经过行，显示淡淡的灰色
function mouse_over(obj)
{
obj.style.backgroundColor = '#ececec';
}
//鼠标离开行，显示白色
function mouse_out(obj)
{
obj.style.backgroundColor = 'white';
}

//菜单标题的数字标题
function get_no(no) //直接调用，get_no(m_no)即可
{
   var count;
    count = no+1;   //公有变量++
    return count ; //返回累加的值
}