| 仿QQ折叠菜单生成器 |
| 作者：flashsoft200 来源：不详 整理日期：2007-7-14 |
这个不必说明，看看就知道了。这个是flashsoft2000编写的，伟COOL改编。傻瓜式操作，菜鸟和懒人的福音 注意：改高度的时候 “菜单体高度-2"/"菜单题头高度-2" =整数 才行。 其中2是上下边框。
<!--版权归flashsoft2000所有，伟COOL改编-->
<html>
<head>
<title>CreateCode</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
//生成代码
function createCode()
{
totalheight = parseInt(fcreate.bodyheight.value) + fcreate.headheight.value * (fcreate.itemcount.value - 1);
textCode.value = text1.value +
"var headHeight = " + fcreate.headheight.value + ";" +
"var bodyHeight = " + fcreate.bodyheight.value + ";" +
"var objcount = " + fcreate.itemcount.value + ";" +
"var step = " + fcreate.mspeed.value + ";" +
text2.value +
".headtd1 { background: #" + fcreate.headcolorn.value + "; border: 2px outset; border-color: #" + fcreate.lbordern.value + " #" + fcreate.dbordern.value + " #" + fcreate.dbordern.value + " #" + fcreate.lbordern.value + "; cursor: hand; font-size: 9pt}" +
".headtd2 { background: #" + fcreate.headcolora.value + "; border: 2px outset; border-color: #" + fcreate.lbordera.value + " #" + fcreate.dbordera.value + " #" + fcreate.dbordera.value + " #" + fcreate.lbordera.value + "; cursor: hand; font-size: 9pt}" +
".bodytd { background: #" + fcreate.bodycolor.value + "; border: 2px outset; border-color: #" + fcreate.lborderb.value + " #" + fcreate.dborderb.value + " #" + fcreate.dborderb.value + " #" + fcreate.lborderb.value + "; font-size: 9pt}" +
text3.value +
"<div id=mainboard style=position:absolute; left:2px; top:2px; width:120px; height:" + totalheight + "px; z-index:1; overflow: hidden; background: #" + fcreate.bodycolor.value + ";> ";
itemtop = 0;
for (i = 1; i <= parseInt(fcreate.itemcount.value); i++)
{
textCode.value += "<div id=item" + i + "body style=position:absolute; left:0; top:" + itemtop + "; width:120px; height:" + fcreate.bodyheight.value + "px; z-index:" + (i+1) +"; overflow: hidden>" +
"<table width=100% border=0 height=100% cellpadding=2 cellspacing=0>" +
"<tr>" +
"<td id=item" + i + "head height=" + (fcreate.headheight.value-2) + " class=";
if (i == 1)
textCode.value += "headtd2";
else textCode.value += "headtd1";
textCode.value += " onclick=showme(item" + i + "body,this) align=center>";
//textCode.value += getValue("fcreate.item" + i);
textCode.value +=document.all["item"+i].value+"</td>"+
"</tr>" +
"<tr>" +
"<td class=bodytd align=center>" +
"test" +
"</td>" +
"</tr>" +
"</table>" +
"</div>";
if (i == 1)
itemtop += parseInt(fcreate.bodyheight.value);
else itemtop += parseInt(fcreate.headheight.value);
}
textCode.value += "</div></body></html>"
}
//获取对象的值
function getValue(obj)
{
//obj = Object(obj);
return obj.value;
}
//清空代码
function clearCode()
{
textCode.value = "";
}
//预览代码
function prevCode()
{
createCode();
open().document.write(textCode.value);
}
//选择代码
function selectCode()
{
textCode.select();
}
//根据输入的数字，自动生成子菜单的填写项
function checkItems()
{
if ((fcreate.itemcount.value.length > 0 && isNaN(fcreate.itemcount.value)) || fcreate.itemcount.value.length == 0)
{
alert("请输入数字！");
fcreate.itemcount.focus();
}
else
{
if (fcreate.itemcount.value > 50)
{
alert("太夸张了吧，小一点呀，不用这么玩命吧！（50以下，含50）")
fcreate.itemcount.focus();
return;
}
if (fcreate.itemcount.value < 1)
{
alert("太夸张了吧，一个不要你要做什么！（1以上，含1）")
fcreate.itemcount.focus();
return;
}
itemtext = "<table width=700 border=0 align=center cellpadding=1 cellspacing=1>";
for (i = 1; i <= fcreate.itemcount.value; i++)
{
itemtext += "<tr>"+
"<td class=td2 width=76>菜单项目"+i+"</td>" +
"<td colspan=2 class=td2>" +
" <input type=text name=item" + i + " class=back2 style=width:200 value=菜单" + i + ">" +
"</td>" +
"<td class=td2 width=173>菜 单 项 目 内 容 网 页</td>" +
"<td colspan=2 class=td2>" +
" <input type=file name=itemsrc" + i + " class=back2 style=width:200>" +
"</td>" +
"</tr>";
}
itemtext+="</table>"
document.all.itemmenu.innerHTML = itemtext;
}
}
//检查是否是一个合法的颜色数值
function changebkclr(obj)
{
hexv = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
flag = false;
if (obj.value.length != 6)
{
alert("请用正确填写！（六位数）");
obj.focus();
}
else
{
for (i = 0; i < 6; i++)
{
for (j = 0; j <16; j++)
if (obj.value.charAt(i).toLowerCase() == hexv[j])
flag = true;
if (!flag)
{
alert("请用十六进制填写。（0-9，a-f）");
obj.focus();
return;
}
flag = false;
}
obj.style.background=obj.value;
}
}
//检查是否是一个合法的数字
function checknum(obj)
{
if (isNaN(obj.value))
{
alert("请输入数字！");
obj.focus();
return;
}
}
//检查改变数值的速度合法性
function changespd(obj)
{
fcreate.mspeed.value = 1;
}
//检查是否是一个合法的速度
function checkspeed(obj)
{
if (isNaN(obj.value))
{
alert("请输入数字！");
obj.focus();
}
else
{
if ((obj.form.bodyheight.value - obj.form.headheight.value)%obj.value != 0)
{
alert("请确认可以被 “菜单体高度 - 菜单题头高度” 整除");
obj.focus();
}
}
}
//控制总题目的填写
function ctrltitle(obj)
{
if (obj.value == "有")
obj.form.titlename.disabled = false;
else
obj.form.titlename.disabled = true;
}
</script>
<style type="text/css">
<!--
.td1{ font-size: 9pt; background: #66CCFF}
.td2{ font-size: 9pt; background: #66aaFF}
.back1 { font-size: 9pt; width:100}
.back2 { font-size: 9pt; background: #BECFEE}
-->
</style>
</head>
<body bgcolor=#FFFFFF text=#000000>
<div align="center">
<textarea name="textCode" rows="28" style="width:700" class="back2" readonly></textarea>
<br>
<input type="button" name="btnCreate" value="<- 生成代码 (ALT+M)" class="back2" style="width:150" onClick="createCode()" accessKey="m">
<input type="button" name="btnClear" value="#= 清空代码 (ALT+C)" class="back2" style="width:150" onClick="clearCode()" accessKey="c">
<input type="button" name="btnPrev" value="O- 预览效果 (ALT+P)" class="back2" style="width:150" onClick="prevCode()" accessKey="p">
<input type="button" name="btnSelect" value="@@ 全选代码 (ALT+A)" class="back2" style="width:150" onClick="selectCode()" accessKey="a">
</div>
<form name="fcreate" method="post" action="">
<table width="700" border="0" align="center" cellpadding="2" cellspacing="1">
<tr>
<td class="td1" width="13%" height="13">菜单项目个数</td>
<td class="td1" width="12%" height="13">
<input type="text" name="itemcount" style="width:40" class="back2" onBlur="checkItems()" value="2">
</td>
<td class="td1" width="13%" height="13">菜单题头高度</td>
<td class="td1" width="12%" height="13">
<input type="text" name="headheight" class="back2" value="22" style="width:50" onBlur="checknum(this)" onChange="checkspeed(fcreate.mspeed)">
</td>
<td class="td1" width="13%" height="13">菜单体高度</td>
<td class="td1" width="12%" height="13">
<input type="text" name="bodyheight" class="back2" value="202" style="width:50" onBlur="checknum(this)" onChange="checkspeed(fcreate.mspeed)">
</td>
<td class="td1" width="13%" height="13">填写移动速度</td>
<td class="td1" width="12%" height="13">
<input type="text" name="mspeed" class="back2" value="10" style="width:50" onBlur="checkspeed(this)">
</td>
</tr>
<tr>
<td class="td1" colspan="8" height="55">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" dwcopytype="CopyTableRow">
<tr>
<td class="td1" width="20%">一 般 题 头 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="headcolorn" class="back1" style="background:#00A4E1" value="00A4E1" onBlur="changebkclr(this)" maxlength="6">
</td>
<td class="td1" width="16%">亮 边 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="lbordern" class="back1" style="background:#00BBFF" value="00BBFF" onBlur="changebkclr(this)" maxlength="6">
</td>
<td class="td1" width="16%">暗 边 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="dbordern" class="back1" style="background:#0077FF" value="0077FF" onBlur="changebkclr(this)" maxlength="6">
</td>
</tr>
<tr>
<td class="td1" width="20%">当 前 题 头 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="headcolora" class="back1" style="background:#20C1FF" value="20C1FF" onBlur="changebkclr(this)" maxlength="6">
</td>
<td width="16%" class="td1">亮 边 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="lbordera" class="back1" style="background:#60D3FF" value="60D3FF" onBlur="changebkclr(this)" maxlength="6">
</td>
<td class="td1" width="16%">暗 边 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="dbordera" class="back1" style="background:#0077FF" value="0077FF" onBlur="changebkclr(this)" maxlength="6">
</td>
</tr>
<tr>
<td class="td1" width="20%">菜 单 主 体 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="bodycolor" class="back1" style="background:#99CCFF" value="99CCFF" onBlur="changebkclr(this)" maxlength="6">
</td>
<td width="16%" class="td1">亮 边 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="lborderb" class="back1" style="background:#B0D8FF" value="B0D8FF" onBlur="changebkclr(this)" maxlength="6">
</td>
<td class="td1" width="16%">暗 边 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="dborderb" class="back1" style="background:#0077FF" value="0077FF" onBlur="changebkclr(this)">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="td1" width="80">菜单 总题目</td>
<td class="td1" width="85">
<select name="title" style="width:40" class="back2" onChange="ctrltitle(this)">
<option value="有">有</option>
<option value="无" selected>无</option>
</select>
</td>
<td width="95" class="td1">题目名称</td>
<td colspan="5" class="td1">
<input type="text" name="titlename" class="back2" value="填写总题目" disabled>
</td>
</tr>
</table>
<div id="itemmenu">
<table width=700 border=0 align=center cellpadding=1 cellspacing=1>
<tr>
<td class=td2 width=76>菜单项目1</td>
<td colspan=2 class=td2>
<input type=text name=item1 class=back2 style=width:200 value="菜单1">
</td>
<td class=td2 width=173>菜 单 项 目 内 容 网 页</td><td colspan=2 class=td2>
<input type=file name=itemsrc1 class=back2 style=width:200>
</td>
</tr>
<tr>
<td class=td2 width=76>菜单项目2</td>
<td colspan=2 class=td2>
<input type=text name=item2 class=back2 style=width:200 value="菜单2">
</td>
<td class=td2 width=173>菜 单 项 目 内 容 网 页</td><td colspan=2 class=td2>
<input type=file name=itemsrc2 class=back2 style=width:200>
</td>
</tr>
</table>
</div>
</form>
<div style="display:none">
<textarea name="text1" rows="5" style="width:700" class="back1" readonly>
<html>
<head>
<title>QQ菜单</title>
<meta http-equiv=Content-Type content=text/html; charset=gb2312>
<script language=JavaScript>
</textarea>
<textarea name="text2" rows="5" style="width:700" class="back1" readonly>
var moving = false;
function showme(obj1, obj2)
{
if (moving)
return;
moving = true;
for(i=0;i<document.all.tags(td).length;i++)
if (document.all.tags(td)[i].className.indexOf(headtd) == 0)
document.all.tags(td)[i].className = headtd1;
obj2.className = headtd2;
moveme(obj1);
}
function moveme(obj)
{
idnumber = parseInt(obj.id.substr(4));
objtop = headHeight * (idnumber - 1);
objbuttom = bodyHeight + headHeight * (idnumber - 2);
currenttop = parseInt(obj.style.top);
if (currenttop >= objbuttom)
{
countid = 1;
for(i=0;i<document.all.tags(div).length;i++)
if (document.all.tags(div)[i].id == item+countid+body)
{
obj = document.all.tags(div)[i];
objtop = headHeight * (countid - 1);
if (countid == idnumber)
{
moveup(obj,objtop,false);
break;
}
else
moveup(obj,objtop,true);
countid++;
}
}
else if ((currenttop <= objtop) && (idnumber < objcount))
{
idnumber++;
countid = objcount;
for(i=document.all.tags(div).length-1;i>=0;i--)
if (document.all.tags(div)[i].id == item+countid+body)
{
obj = document.all.tags(div)[i];
objbuttom = bodyHeight + headHeight * (countid - 2);
if (countid == idnumber)
{
movedown(obj,objbuttom,false);
break;
}
else
movedown(obj,objbuttom,true);
countid--;
}
}
}
function moveup(obj,objtop,ismove)
{
currenttop = parseInt(obj.style.top);
if (currenttop > objtop)
{
obj.style.top = currenttop - step;
setTimeout(moveup(+obj.id+,+objtop+,+ismove+),1)
return;
}
moving = ismove;
}
function movedown(obj,objbuttom,ismove)
{
currenttop = parseInt(obj.style.top);
if (currenttop < objbuttom)
{
obj.style.top = currenttop + step;
setTimeout(movedown(+obj.id+,+objbuttom+,+ismove+),1)
return;
}
moving = ismove;
}
</script>
</script>
<style type=text/css>
</textarea>
<textarea name="text3" rows="5" style="width:700" class="back1" readonly>
</style>
</head>
<body bgcolor=#FFFFFF text=#000000>
</textarea>
</div>
</body>
</html> |
|
|
