网页设计下拉框代码,网页设计下拉框代码是什么

http://www.itjxue.com  2023-01-21 08:12  来源:未知  点击次数: 

网页设计关于下拉列表的代码

看看这个不错:

html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

titleUntitled Document/title

script language="JavaScript" type="text/javascript"

//---------------------------------------------------------------------------

// 功能搜索选择框

// 作者:Joshua

// 创建时间:2007-02-07

// Email:JoshuaChen[at]126.com

// webSite:

//---------------------------------------------------------------------------

//省

var Data_Area_Province = new Array("安徽","北京","福建","甘肃","广东","广西","贵州","海南","河北","河南","黑龙江","湖北","湖南","吉林","江苏","江西","辽宁","内蒙古","宁夏","青海","山东","山西","陕西","上海","四川","天津","西藏","新疆","云南","浙江","重庆");

//市区

var Data_Area_City = new Array();

Data_Area_City[0] = new Array("安庆","蚌埠","马鞍山","宿州","铜陵","芜湖","宣城","亳州");

Data_Area_City[1] = new Array("北京");

Data_Area_City[2] = new Array("福州","龙岩","南平","宁德","莆田","泉州","三明","厦门","漳州");

Data_Area_City[3] = new Array("白银","定西","天水","武威","张掖");

Data_Area_City[4] = new Array("潮州","东莞","佛山","广州","肇庆","中山","珠海");

Data_Area_City[5] = new Array("百色","北海","崇左","防城港","桂林","贵港","河池","贺州","来宾","柳州","南宁","钦州","梧州","玉林");

Data_Area_City[6] = new Array("安顺","毕节","贵阳","六盘水","铜仁","遵义");

Data_Area_City[7] = new Array("白沙黎族自治县","乐东黎族自治县","万宁","文昌","五指山","儋州");

Data_Area_City[8] = new Array("保定","沧州","承德","邯郸","衡水","廊坊","秦皇岛","石家庄","唐山","邢台","张家口");

Data_Area_City[9] = new Array("安阳","鹤壁","济源","焦作","开封","洛阳","周口","驻马店","漯河","濮阳");

Data_Area_City[10]= new Array("大庆","大兴安岭","哈尔滨","鹤岗","七台河","齐齐哈尔","双鸭山","绥化","伊春");

Data_Area_City[11] = new Array("鄂州","恩施土家族苗族自治州","黄冈","襄樊","孝感","宜昌");

Data_Area_City[12] = new Array("常德","长沙","岳阳","张家界","株洲");

Data_Area_City[13] = new Array("白城","白山","长春","吉林","辽源","四平","松原","通化","延边朝鲜族自治州");

Data_Area_City[14] = new Array("常州","淮安","连云港","南京","南通","苏州","宿迁","泰州","无锡","徐州","盐城","扬州","镇江");

Data_Area_City[15] = new Array("抚州","赣州","吉安","景德镇","九江","南昌","萍乡","上饶","新余","宜春","鹰潭");

Data_Area_City[16] = new Array("鞍山","本溪","朝阳","沈阳","铁岭","营口");

Data_Area_City[17] = new Array("阿拉善盟","巴彦淖尔盟","包头","锡林郭勒盟","兴安盟");

Data_Area_City[18] = new Array("固原","石嘴山","吴忠","银川");

Data_Area_City[19] = new Array("果洛藏族自治州","西宁","玉树藏族自治州");

Data_Area_City[20] = new Array("滨州","德州","东营","菏泽","潍坊","烟台","枣庄","淄博");

Data_Area_City[21] = new Array("长治","大同","晋城","晋中","临汾","吕梁","朔州","太原","忻州","阳泉","运城");

Data_Area_City[22] = new Array("安康","宝鸡","汉中","商洛","铜川","渭南","西安","咸阳","延安","榆林");

Data_Area_City[23] = new Array("上海");

Data_Area_City[24] = new Array("阿坝藏族羌族自治州","绵阳","南充","内江","攀枝花","遂宁","雅安","宜宾","资阳","自贡","泸州");

Data_Area_City[25] = new Array("天津");

Data_Area_City[26] = new Array("阿里","昌都","拉萨","林芝","那曲","日喀则","山南");

Data_Area_City[27] = new Array("阿克苏","和田","喀什","吐鲁番","乌鲁木齐","五家渠","伊犁哈萨克自治州");

Data_Area_City[28] = new Array("保山","玉溪","昭通");

Data_Area_City[29] = new Array("杭州","湖州","嘉兴","金华","丽水","宁波","绍兴","台州","温州","舟山","衢州");

Data_Area_City[30] = new Array("重庆");

//学历

var Data_School = new Array("初中","高中","中专","大专","本科","双学位");

//行业

var Data_Industry = new Array("计算机类","金融/证券/保险类","财务类","工业/工厂类 ","技工类","机械/设备维修类","动力电气类", "轻工类 ","美容保健类");

//时间

var Data_Date = new Array("今天","三天内","一个星期内","半个月内","一个月内","三个月内","半年内","一年内","所有");

//层状态

var Date_DivState=new Array()

//鼠标焦点状态

var focusState=false

var Search = new Object();

//--------------------------------------

// 初始化Div标签事件

// Joshua 2007-02-07

//--------------------------------------

Search.Init = function(){

document.getElementById("Data_Area").onclick = Search.ShowArea.Init;

document.getElementById("Data_School").onclick = Search.ShowSchool;

document.getElementById("Data_Industry").onclick = Search.ShowIndustry;

document.getElementById("Data_Date").onclick = Search.ShowDate;

}

//-------------------------------

// 创建一个Div对象

// Joshua 2007-02-07

//-------------------------------

Search.CreateDiv = function(obj,Id,X,Y,oWidth,oHeight){

var Obj_Div = document.createElement("div");

Obj_Div.setAttribute("id",Id);

Obj_Div.style.position="absolute";

Obj_Div.style.background="#fff";

Obj_Div.style.zIndex = "10000";

Obj_Div.style.border="1px solid #CCCCCC";

Obj_Div.style.padding="3px";

Obj_Div.style.lineHeight ="120%";

Obj_Div.style.left=X+"px";

Obj_Div.style.top=Y+"px";

Obj_Div.style.whiteSpace="nowrap";

Obj_Div.style.width= oWidth + "px";

Obj_Div.style.height= oHeight + "px";

obj.appendChild(Obj_Div);

}

//------------------------------------

// 判断Div是否存在

// Joshua 2007-02-07

//------------------------------------

Search.IsDiv = function(Id){

var result = true

try{

document.getElementById(Id).a=1;

}catch(e){

result = false

}

return(result);

}

//----------------------------

// 删除Div对象

// Joshua 2007-02-07

//----------------------------

Search.RemoveDiv = function(Id){

try{

document.getElementById(Id).removeNode(true);

}catch(e){}

}

//---------------------------

// 遍历清除无用Div对象

// Joshua 2007-02-07

//---------------------------

Search.DelDiv = function(){

try{

document.getElementById("Div_Area").removeNode(true);

document.getElementById("Data_Area").innerHTML = "font face=\"webdings\" style=\"font-size:10px; color:#ff9900;\"4/font" + document.getElementById("Data_Area").innerText.substring(1,document.getElementById("Data_Area").innerText.length);

}catch(e){}

try{

document.getElementById("Div_School").removeNode(true);

document.getElementById("Data_School").innerHTML = "font face=\"webdings\" style=\"font-size:10px; color:#ff9900;\"4/font" + document.getElementById("Data_School").innerText.substring(1,document.getElementById("Data_School").innerText.length);

}catch(e){}

try{

document.getElementById("Div_Industry").removeNode(true);

document.getElementById("Data_Industry").innerHTML = "font face=\"webdings\" style=\"font-size:10px; color:#ff9900;\"4/font" + document.getElementById("Data_Industry").innerText.substring(1,document.getElementById("Data_Industry").innerText.length);

}catch(e){}

try{

document.getElementById("Div_Date").removeNode(true);

document.getElementById("Data_Date").innerHTML = "font face=\"webdings\" style=\"font-size:10px; color:#ff9900;\"4/font" + document.getElementById("Data_Date").innerText.substring(1,document.getElementById("Data_Date").innerText.length);

}catch(e){}

}

//--------------------------

// 失去焦点,清楚Div对象

// Joshua 2007-02-07

//--------------------------

Search.Lostfocus = function(){

if(!focusState){

try{

document.getElementById("Div_Area").removeNode(true);

document.getElementById("Data_Area").innerHTML = "font face=\"webdings\" style=\"font-size:10px; color:#ff9900;\"4/font" + document.getElementById("Data_Area").innerText.substring(1,document.getElementById("Data_Area").innerText.length);

}catch(e){}

try{

document.getElementById("Div_School").removeNode(true);

document.getElementById("Data_School").innerHTML = "font face=\"webdings\" style=\"font-size:10px; color:#ff9900;\"4/font" + document.getElementById("Data_School").innerText.substring(1,document.getElementById("Data_School").innerText.length);

}catch(e){}

try{

document.getElementById("Div_Industry").removeNode(true);

document.getElementById("Data_Industry").innerHTML = "font face=\"webdings\" style=\"font-size:10px; color:#ff9900;\"4/font" + document.getElementById("Data_Industry").innerText.substring(1,document.getElementById("Data_Industry").innerText.length);

}catch(e){}

try{

document.getElementById("Div_Date").removeNode(true);

document.getElementById("Data_Date").innerHTML = "font face=\"webdings\" style=\"font-size:10px; color:#ff9900;\"4/font" + document.getElementById("Data_Date").innerText.substring(1,document.getElementById("Data_Date").innerText.length);

}catch(e){}

}

}

Search.ShowArea = function(){} //空对象

//------------------------

// 显示地区一级菜单

// Joshua 2007-02-07

//------------------------

Search.ShowArea.Init = function(){

focusState = true;

Search.DelDiv()//删除其他DIV标签

if(!Search.IsDiv("Div_Area")){//判断对象是否建立,防止再次激发事件,引起的对象多次重复建立

//更改Data_Area对象内容

document.getElementById("Data_Area").innerHTML = "font face=\"webdings\" style=\"font-size:10px; color:#ff9900;\"6/font" + document.getElementById("Data_Area").innerText.substring(1,document.getElementById("Data_Area").innerText.length);

//显示层

Search.CreateDiv(document.body,"Div_Area",Search.getSelectPosition(document.getElementById("Data_Area"))[0],Search.getSelectPosition(document.getElementById("Data_Area"))[1]+12,80,0);

//创建省级分类

for(var i=0;iData_Area_Province.length;i++){

var Obj_Span = document.createElement("div");

Obj_Span.setAttribute("id","Div_Area_Province_"+i);

Obj_Span.setAttribute("value",i);

Obj_Span.style.cursor="pointer";

Obj_Span.onmouseover = function(){

focusState = true;

this.style.border="1px solid #827C5F";

this.style.background="#CEC497";

}

Obj_Span.onmouseout = function(){

focusState = false;

if (!Date_DivState[this.getAttribute("value")]){

this.style.border="0px solid #ffffff";

this.style.background="#fff";}

}

Obj_Span.onclick = function(){

focusState = true;

//恢复非本对象的其他一级菜单项目样式

for(var i=0;iDate_DivState.length;i++){

if(Date_DivState[i]==truethis.value!=document.getElementById("Div_Area_Province_"+i).value){

document.getElementById("Div_Area_Province_"+i).style.border="0px solid #ffffff";

document.getElementById("Div_Area_Province_"+i).style.background="#fff";

}

}

//设置层状态

Date_DivState[this.getAttribute("value")] = true;

//生成二级菜单

Search.ShowArea.InitCity(this.getAttribute("value"),this)

}

Obj_Span.innerHTML = Data_Area_Province[i] + "font face=\"webdings\" style=\"font-size:10px; color:#000;position:absolute;right:3px; \"4/font";

document.getElementById("Div_Area").appendChild(Obj_Span);

}

}

}

//----------------------

// 显示地区二级菜单

// Joshua 2007-02-07

//----------------------

Search.ShowArea.InitCity = function(oId,obj){

if(!Search.IsDiv("Div_Area_City_"+oId)){//判断对象是否建立,防止再次激发事件,引起的对象多次重复建立

//删除除对象外存在的二级菜单对象

for(var i=0;iDate_DivState.length;i++){

if(Date_DivState[i]==truei!=oId){

Search.RemoveDiv("Div_Area_City_"+i);

Date_DivState[i]=null;

}

}

//生成指定的二级菜单对象

Search.CreateDiv(obj,"Div_Area_City_"+oId,obj.offsetWidth,obj.offsetTop,50,0);

if(oIdData_Area_Province.length){

for(var i=0;iData_Area_City[oId].length;i++){

var Obj_Span = document.createElement("div");

Obj_Span.setAttribute("id","Div_Area_City"+i);

Obj_Span.style.cursor="pointer";

Obj_Span.innerText = Data_Area_City[oId][i];

Obj_Span.setAttribute("value",oId);

Obj_Span.onmouseover = function(){

focusState = true;

this.style.border="1px solid #827C5F";

this.style.background="#CEC497";

}

Obj_Span.onmouseout = function(){

focusState = false;

this.style.border="0px solid #ffffff";

this.style.background="#fff";

}

Obj_Span.onclick = function(){

//设置Data_Area的对象为选择的职

document.getElementById("Data_Area").innerHTML = "font face=\"webdings\" style=\"font-size:10px; color:#ff9900;\"4/font" + this.innerText;

//删除Div对象

Search.RemoveDiv("Div_Area");

//恢复状态数组

Date_DivState.length=0;

}

document.getElementById("Div_Area_City_"+oId).appendChild(Obj_Span);

}

}

}

}

//-------------------

// 学历Div操作

// Joshua 2007-02-07

//-------------------

Search.ShowSchool=function(){

focusState = true;

Search.DelDiv();//删除其他DIV标签

if(!Search.IsDiv("Div_School")){//判断对象是否建立,防止再次激发事件,引起的对象多次重复建立

document.getElementById("Data_School").innerHTML = "font face=\"webdings\" style=\"font-size:10px; color:#ff9900;\"6/font" + document.getElementById("Data_School").innerText.substring(1,document.getElementById("Data_School").innerText.length);

Search.CreateDiv(document.body,"Div_School",Search.getSelectPosition(document.getElementById("Data_School"))[0],Search.getSelectPosition(document.getElementById("Data_School"))[1]+12,60,0);

for(var i=0;iData_School.length;i++){

var Obj_Span = document.createElement("div");

Obj_Span.setAttribute("id","Div_School_"+i);

Obj_Span.setAttribute("value",i);

Obj_Span.style.cursor="pointer";

Obj_Span.onmouseover = function(){

focusState = true;

this.style.border="1px solid #827C5F";

this.style.background="#CEC497";

}

Obj_Span.onmouseout = function(){

focusState = false;

this.style.border="0px solid #ffffff";

this.style.background="#fff";

}

Obj_Span.onclick = function(){

document.getElementById("Data_School").innerHTML = "font face=\"webdings\" style=\"font-size:10px; color:#ff9900;\"4/font" + this.innerText;

Search.RemoveDiv("Div_School");

}

Obj_Span.innerHTML = Data_School[i];

document.getElementById("Div_School").appendChild(Obj_Span);

}

}

}

//----------------------

// 行业Div操作

// Joshua 2007-02-07

//----------------------

Search.ShowIndustry = function(){

focusState = true;

Search.DelDiv();//删除其他DIV标签

if(!Search.IsDiv("Div_Industry")){//判断对象是否建立,防止再次激发事件,引起的对象多次重复建立

document.getElementById("Data_Industry").innerHTML = "font face=\"webdings\" style=\"font-size:10px; color:#ff9900;\"6/font" + document.getElementById("Data_Industry").innerText.substring(1,document.getElementById("Data_Industry").innerText.length);

Search.CreateDiv(document.body,"Div_Industry",Search.getSelectPosition(document.getElementById("Data_Industry"))[0],Search.getSelectPosition(document.getElementById("Data_Industry"))[1]+12,160,0);

for(var i=0;iData_Industry.length;i++){

var Obj_Span = document.createElement("div");

Obj_Span.setAttribute("id","Div_Industry_"+i);

Obj_Span.setAttribute("value",i);

Obj_Span.style.cursor="pointer";

Obj_Span.onmouseover = function(){

focusState = true;

this.style.border="1px solid #827C5F";

this.style.background="#CEC497";

}

Obj_Span.onmouseout = function(){

focusState = false;

this.style.border="0px solid #ffffff";

this.style.background="#fff";

}

Obj_Span.onclick = function(){

document.getElementById("Data_Industry").innerHTML = "font face=\"webdings\" style=\"font-size:10px; color:#ff9900;\"4/font" + this.innerText;

Search.RemoveDiv("Div_Industry");

}

Obj_Span.innerHTML = Data_Industry[i];

document.getElementById("Div_Industry").appendChild(Obj_Span);

}

}

}

//-----------------------------

// 时间Div操作

// Joshua 2007-02-07

//-----------------------------

Search.ShowDate = function(){

focusState = true;

Search.DelDiv();//删除其他DIV标签

if(!Search.IsDiv("Div_Date")){//判断对象是否建立,防止再次激发事件,引起的对象多次重复建立

document.getElementById("Data_Date").innerHTML = "font face=\"webdings\" style=\"font-size:10px; color:#ff9900;\"6/font" + document.getElementById("Data_Date").innerText.substring(1,document.getElementById("Data_Date").innerText.length);

Search.CreateDiv(document.body,"Div_Date",Search.getSelectPosition(document.getElementById("Data_Date"))[0],Search.getSelectPosition(document.getElementById("Data_Date"))[1]+12,60,0);

for(var i=0;iData_Date.length;i++){

var Obj_Span = document.createElement("div");

Obj_Span.setAttribute("id","Div_Date_"+i);

Obj_Span.setAttribute("value",i);

Obj_Span.style.cursor="pointer";

Obj_Span.onmouseover = function(){

focusState = true;

this.style.border="1px solid #827C5F";

this.style.background="#CEC497";

}

Obj_Span.onmouseout = function(){

focusState = false;

this.style.border="0px solid #ffffff";

this.style.background="#fff";

}

Obj_Span.onclick = function(){

document.getElementById("Data_Date").innerHTML = "font face=\"webdings\" style=\"font-size:10px; color:#ff9900;\"4/font" + this.innerText;

Search.RemoveDiv("Div_Date");

}

Obj_Span.innerHTML = Data_Date[i];

document.getElementById("Div_Date").appendChild(Obj_Span);

}

}

}

//-----------------------

// 获取一个对象的坐标

//------------------------

Search.getSelectPosition = function(Gobj) {

var objLeft = Gobj.offsetLeft;

var objTop = Gobj.offsetTop;

var objParent = Gobj.offsetParent;

while (objParent!= null) {

objLeft += objParent.offsetLeft;

objTop += objParent.offsetTop;

objParent = objParent.offsetParent;

}

return([objLeft,objTop]);

}

//------------------------

// 页面初始化

//------------------------

window.onload=function(){

Search.Init();

}

window.document.onclick=function (){

Search.Lostfocus();

}

/script

style

BODY{FONT-SIZE: 12px;}

/style

/head

body

span id="Data_Area" style="cursor:pointer;"font face="webdings" style="font-size:10px; color:#ff9900;"4/font地区/span

span id="Data_School" style="cursor:pointer;"font face="webdings\" style="font-size:10px; color:#ff9900;"4/font学历/span

span id="Data_Industry" style="cursor:pointer;"font face="webdings" style="font-size:10px; color:#ff9900;"4/font行业/span

span id="Data_Date" style="cursor:pointer;"font face="webdings" style="font-size:10px; color:#ff9900;"4/font时间/span

/body

/html

制作网页下拉菜单的代码是什么

第1步:将下列代码复制到网页的标签之间:

第2步:将下面的代码复制到标签的右边,位置紧挨着标签:

第3步:添加菜单的内容。编辑menucontext.js文件,所有的菜单选项都在这里设置。默认的menucontext.js里面的内容,比较复杂我现在把代码精简出来。给大家做一个说明。整个代码如下: function showToolbar()

{

// AddItem(id, text, hint, location, alternativeLocation);

// AddSubItem(idParent, text, hint, location);

//主菜单定义

menu = new Menu();

menu.addItem("multimedia", "多媒体", "多媒体软件", null, null);

menu.addItem("image", "图像处理", "图像处理软件", null, null);

//多媒体子菜单定义

menu.addSubItem("multimedia", "凡人网络", "凡人网络", "");

menu.addSubItem("multimedia", "我要网上开店", "我要网上开店", "");

//图像处理子菜单定义

menu.addSubItem("image", "开店系统", "开店系统", "");

menu.addSubItem("image", "网上开店系统", "网上开店系统", "");

menu.addSubItem("image", "网上购物系统", "网上购物系统", "");

//结束菜单定义

menu.showMenu();

}

上面的例子中制作的是一个有两个主菜单的菜单。一个主菜单为多媒体,一个主菜单为图像处理。主要靠两个命令来制作Additem为添加主菜单项目。格式为AddItem(菜单标记, 文本说明, 文本提示, 位置,替换位置)。AddSubItem为添加子菜单项目,idparent为主菜单的菜单标记,其余同前。

第4步:上传菜单文件。将 menu.js和menucontext.js文件上传到和网页文件同一目录下。这样就完成了所有的操作。

菜单安装的一些善后工作:

安装了菜单之后,如果需要将菜单完全与网页顶部和左边紧密结合的话,你可以把标签修改成为。

或许大家会对菜单里的文字感到不满意。你可以把制作菜单第一步的CSS代码进行修改。比如

将里面的字体大小换成了10.5磅的话,中文字就会简洁干净多了。

同样如果对菜单的表格感到不满意的话,可以修改menu.js文件中的代码例如:

function Menu()

{

this.bgColor = "#008080";

if (ie) this.menuFont = "bold xx-small Verdana";

if (n) this.menuFont = "bold x-small Verdana";

// this.fontColor = "white";

this.addItem = addItem;

this.addSubItem = addSubItem;

this.showMenu = showMenu;

this.mainPaneBorder = 0;

this.subMenuPaneBorder = 0;

this.bgcolor 修改的是菜单属性

this.mainPaneBorder 修改的是主菜单的边框宽度

this.subMenuPaneBorder 修改的是子菜单的边框宽度。

文本框在网页设计里面的代码是什么啊!还有下拉菜单,说详细点,谢谢

文本框

是input

type="text"

/

下拉框是selectoption

value="1"1/option/select

LZ应该买一本HTML的教程,回家没事就翻翻看看.

(责任编辑:IT教学网)

更多

推荐Fireworks教程文章