代码优化。。。
- JScript code
文件名：next.jsvar $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id;};function addEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; }};function Each(arrList, fun){ for (var i = 0, len = arrList.length; i < len; i++) { fun(arrList[i], i); }};function GetOption(val, txt) { var op = document.createElement("OPTION"); op.value = val; op.innerHTML = txt; return op;};var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } }}Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination;}var CascadeSelect = Class.create();CascadeSelect.prototype = { //select集合，菜单对象 initialize: function(arrSelects, arrMenu, options) { if(arrSelects.length <= 0 || arrMenu.lenght <= 0) return;//菜单对象 var oThis = this; this.Selects = [];//select集合 this.Menu = arrMenu;//菜单对象 this.SetOptions(options); this.Default = this.options.Default || []; this.ShowEmpty = !!this.options.ShowEmpty; this.EmptyText = this.options.EmptyText.toString(); //设置Selects集合和change事件 Each(arrSelects, function(o, i){ addEventHandler((oThis.Selects[i] = $(o)), "change", function(){ oThis.Set(i); }); }); this.ReSet(); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Default: [],//默认值(按顺序) ShowEmpty: true,//是否显示空值(位于第一个) EmptyText: "请选择"//空值显示文本(ShowEmpty为true时有效) }; Object.extend(this.options, options || {}); }, //初始化select ReSet: function() { this.SetSelect(this.Selects[0], this.Menu, this.Default.shift()); this.Set(0); }, //全部select设置 Set: function(index) { var menu = this.Menu //第一个select不需要处理所以从1开始 for(var i=1, len = this.Selects.length; i < len; i++){ if(menu.length > 0){ //获取菜单 var value = this.Selects[i-1].value; if(value!=""){ Each(menu, function(o){ if(o.val == value){ menu = o.menu || []; } }); } else { menu = []; } //设置菜单 if(i > index){ this.SetSelect(this.Selects[i], menu, this.Default.shift()); } } else { //没有数据 this.SetSelect(this.Selects[i], [], ""); } } //清空默认值 this.Default.length = 0; }, //select设置 SetSelect: function(oSel, menu, value) { oSel.options.length = 0; oSel.disabled = false; if(this.ShowEmpty){ oSel.appendChild(GetOption("", this.EmptyText)); } if(menu.length <= 0){ oSel.disabled = true; return; } Each(menu, function(o){ var op = GetOption(o.val, o.txt ? o.txt : o.val); op.selected = (value == op.value); oSel.appendChild(op); }); }};window.onload=function(){ var menu = [ {'val': 'AAA', 'menu': [ {'val': 'aaaaaaaa1'}, {'val': 'aaaaaaaa2'}, {'val': 'aaaaaaaa3'}, {'val': 'aaaaaaaa4'}, {'val': 'aaaaaaaa5'} ]}, {'val': 'BBB', 'menu': [ {'val': 'bbbbbbb1'}, {'val': 'bbbbbbb2'}, {'val': 'bbbbbbb3'}, {'val': 'bbbbbbb4'}, {'val': 'bbbbbbb5'} ]}, {'val': 'CCC', 'menu': [ {'val': 'ccccccc1'}, {'val': 'ccccccc2'}, {'val': 'ccccccc3'}, {'val': 'ccccccc4'}, {'val': 'ccccccc5'} ]} ]; var sel=["main_menu", "next_menu"]; var val=["主菜单", "子菜单"]; var cs = new CascadeSelect(sel, menu, { Default: val });}
- JScript code
文件名：ext.jswindow.onload=function(){function $(id){return document.getElementById(id)}var menu=$("topTags").getElementsByTagName("ul")[0];//顶部菜单容器var tags=menu.getElementsByTagName("li");//顶部菜单var ck=$("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");//左侧菜单var j;//点击左侧菜单增加新标签for(i=0;i<ck.length;i++){ck[i].onclick=function(){$("welcome").style.display="none"//欢迎内容隐藏clearMenu();this.style.background='url(images/tabbg02.gif)'//循环取得当前索引for(j=0;j<8;j++){if(this==ck[j]){if($("p"+j)==null){openNew(j,this.innerHTML);//设置标签显示文字 }clearStyle();$("p"+j).style.background='url(images/tabbg1.gif)';clearContent();$("c"+j).style.display="block"; } }return false; } }//增加或删除标签function openNew(id,name){var tagMenu=document.createElement("li");tagMenu.id="p"+id;tagMenu.innerHTML=name+" "+"<img src='images/off.gif' style='vertical-align:middle'/>";//标签点击事件tagMenu.onclick=function(evt){clearMenu();ck[id].style.background='url(images/tabbg02.gif)'clearStyle();tagMenu.style.background='url(images/tabbg1.gif)';clearContent();$("c"+id).style.display="block";}//标签内关闭图片点击事件tagMenu.getElementsByTagName("img")[0].onclick=function(evt){evt=(evt)?evt:((window.event)?window.event:null);if(evt.stopPropagation){evt.stopPropagation()} //取消opera和Safari冒泡行为;this.parentNode.parentNode.removeChild(tagMenu);//删除当前标签var color=tagMenu.style.backgroundColor;//设置如果关闭一个标签时，让最后一个标签得到焦点if(color=="#ffff00"||color=="yellow"){//区别浏览器对颜色解释if(tags.length-1>=0){clearStyle();tags[tags.length-1].style.background='url(images/tabbg1.gif)';clearContent();var cc=tags[tags.length-1].id.split("p");$("c"+cc[1]).style.display="block";clearMenu();ck[cc[1]].style.background='url(images/tabbg1.gif)'; }else{clearContent();clearMenu();$("welcome").style.display="block" } }}menu.appendChild(tagMenu);}//清除菜单样式function clearMenu(){for(i=0;i<ck.length;i++){ck[i].style.background='url(images/tabbg01.gif)'; }}//清除标签样式function clearStyle(){for(i=0;i<tags.length;i++){menu.getElementsByTagName("li")[i].style.background='url(images/tabbg2.gif)'; }}//清除内容function clearContent(){for(i=0;i<7;i++){$("c"+i).style.display="none"; }}}- PHP code
<?phprequire_once("../../My_SQL/_My_SQL_link_All.php");//引用数据库链接文件?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>后台管理系统</title><link href="ext.css" rel="stylesheet" type="text/css" /><script src="ext.js"></script><script src="next.js"></script></head><body><div id="top"><h2>管理菜单</h2><div class=jg></div><div id="topTags"><ul></ul></div></div><div id="main"> <div id="leftMenu"><ul><li>添加文章</li><li>删除文章</li><li>添加图片</li><li>删除图片</li><li>风格管理</li><li>系统管理</li><li>帮助信息</li></ul></div><div class=jg></div><div id="content"><div id="welcome" class="content" style="display:block;"> <div align="center"> <p> </p> <p><strong>欢迎使用用户管理系统！</strong></p> <p> </p> </div></div><div id="c0" class="content"><form name="contact" method="post" action=""> <ul> <div class="sel"><select id="main_menu"></select><select id="next_menu"></select> </div> <li>文章标题 <input name="name" type="text" onClick="this.value='';" onFocus="this.select()" onBlur="this.value=!this.value?'标题':this.value;" value="标题" id="name" /> </li> <li>文章作者 <input name="femail" type="text" onClick="this.value='';" onFocus="this.select()" onBlur="this.value=!this.value?'作者':this.value;" value="作者" id="email" /> </li> <li> <textarea name="ysubject" cols="80" rows="18" id="phone">内容</textarea> </li> <li><input name="" type="button" value="提交" class="button" /> <input name="" type="button" value="取消" class="button" /></li> </ul> </form> </div><div id="c1" class="content">aaaaaaaa</div><div id="c2" class="content">bbbbbbbb</div><div id="c3" class="content">cccccccc</div><div id="c4" class="content">dddddddd</div><div id="c5" class="content">系统管理</div><div id="c6" class="content">帮助信息</div></div></div><div id="footer">版本信息</div></body></html>
为什么我两个JS文件同时调用的话就不能正常使用下拉菜单。。
需要怎么优化代码。。。
还有。。php的这个页面里的文本框里的内容为什么写补到数据库里面。。
求解答
[解决办法]
使用addEventListener来添加事件,而不是用.onload,.onload是设置对应的事件,你第二个.onload = function覆盖了你前面的.onload
addEventListener怎么写网上大把多,一搜一个准
php那个form没有action,代码里面也没有处理接收数据和写入数据库的代码,当然写不到数据库了
[解决办法]
用JUQERY等现成类库。
[解决办法]
回复 楼主：
请原谅我，你的代码我只是粗略看一下，
就回复了。
next .js 文件。写得是全局变量漫天飞！
应该用一个“类” 把它包起来。
[解决办法]
最好做到会用的人不用看得懂你的代码。
你的代码不要 暴露在 使用页面上。