BlogJava-JAVA涂鸦-文章分类-JavaScript

QQ树形8

千山鸟飞绝 — Sun, 01 Apr 2007 08:46:00 GMT

摘要: < HTML >< HEAD > < META content ="text/html; charset=gb2312" http-equiv =Content-Type > ... 阅读全文

千山鸟飞绝 2007-04-01 16:46 发表评论

QQ树形6

千山鸟飞绝 — Sun, 01 Apr 2007 08:45:00 GMT

摘要: < html > ... 阅读全文

千山鸟飞绝 2007-04-01 16:45 发表评论

QQ树形7

千山鸟飞绝 — Sun, 01 Apr 2007 08:45:00 GMT

摘要: < html > < head > < metdiv http-equiv ="Content-Type" content ="text/htm... 阅读全文

千山鸟飞绝 2007-04-01 16:45 发表评论

QQ树形5

千山鸟飞绝 — Sun, 01 Apr 2007 08:44:00 GMT

/* FAQ问题解答显示 */

< SCRIPT language =JavaScript >
function open_menu(menu,img) {
     if (menu != '') {
         if (menu.style.display == 'none') {
            menu.style.display = '';
             // img.src='../http://pic1.blueidea.com/bbs/minus.gif';展开之后的图片
        } else {
            menu.style.display = 'none';
             // img.src='../http://pic1.blueidea.com/bbs/plus.gif';展开之前的图片
        }
    }
}
SCRIPT >
/* 前台页面调用
< table width ="100%"   border ="0" cellspacing ="0" cellpadding ="0" >
       < tr >
         < td >< a href ="javascript:open_menu(menu1)" >< img src ="http://pic1.blueidea.com/bbs/shopping_faq01.jpg" width ="567" height ="37" border ="0" > a > td >
       tr >
       < tr id ="menu1" style ="DISPLAY: none" >
         < td >
                 < table width ="90%"   border ="0" align ="center" cellpadding ="0" cellspacing ="0" >
                   < tr >
                     < td class ="text" > ABCDEF td >
                   tr >
                 table >
         td >
       tr >
table >
*/

千山鸟飞绝 2007-04-01 16:44 发表评论

QQ树形4

千山鸟飞绝 — Sun, 01 Apr 2007 08:41:00 GMT

摘要: < html > < head > < title > 仿QQ导航菜单 ... 阅读全文

千山鸟飞绝 2007-04-01 16:41 发表评论

QQ树形3

千山鸟飞绝 — Sun, 01 Apr 2007 08:38:00 GMT

摘要: < html > < head > < title > 自动伸缩菜单 ... 阅读全文

千山鸟飞绝 2007-04-01 16:38 发表评论

QQ树形2

千山鸟飞绝 — Sun, 01 Apr 2007 08:32:00 GMT

< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< title > 3 title >
< style >
body { font-family : "宋体" ; font-size : 14.7px ; margin : 1% 20% ; padding : 12px 30px ; }
div { cursor : hand ; padding-left : 12px ; }
li { width : 70px ; border-left : 1px solid black ; padding : 0 ; font-size : 12px ; margin : 0 6px ; list-style-type : none ; border-bottom : 1px dashed red ; }
#main { margin : 0 }
style >

< script language ="javascript" type ="text/javascript" >

script >
head >
< body >
< div id ="d0" onclick ="menu(d01,d00)" >< img name ="d00" src ="http://www.1studio.net/html/example/0054/close.gif" /> 链接0 div >
< div id ="d01" style ="display:none" >
< li >< a href ="#" > - 子目录1 a > li >
< li >< a href ="#" > - 子目录2 a > li >
< li >< a href ="#" > - 子目录3 a > li >
< li >< a href ="#" > - 子目录4 a > li >
div >
< div id ="d1" onclick ="menu(d11,d10)" >< img name ="d10" src ="http://www.1studio.net/html/example/0054/close.gif" /> 链接一 div >
< div id ="d11" style ="display:none" >
< li >< a href ="#" > - 子目录1 a > li >
< li >< a href ="#" > - 子目录2 a > li >
< li >< a href ="#" > - 子目录3 a > li >
< li >< a href ="#" > - 子目录4 a > li >
div >
< div id ="d2" onclick ="menu(d21,d20)" >
< img name ="d20" src ="http://www.1studio.net/html/example/0054/close.gif" /> 链接二 div >
< div id ="d21" style ="display:none" >
< li >< a href ="#" > - 子目录1 a > li >
< li >< a href ="#" > - 子目录2 a > li >
< li >< a href ="#" > - 子目录3 a > li >
< li >< a href ="#" > - 子目录4 a > li > div >
< div id ="d3" onclick ="menu(d31,d30)" >
< img name ="d30" src ="http://www.1studio.net/html/example/0054/close.gif" /> 链接三 div >
< div id ="d31" style ="display:none" >
< li >< a href ="#" > - 子目录1 a > li >
< li >< a href ="#" > - 子目录2 a > li >
< li >< a href ="#" > - 子目录3 a > li >
< li >< a href ="#" > - 子目录4 a > li >
div >
body >

千山鸟飞绝 2007-04-01 16:32 发表评论

QQ树形

千山鸟飞绝 — Sun, 01 Apr 2007 08:29:00 GMT

< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< title > 3 title >
< script language =JavaScript >

script >
< style type ="text/css" >

style > head >

< body >
< table bordercolor =#ffffff cellspacing =0 cellpadding =0 width =108 bordercolorlight =#0099ff

border =1 class =tabtop rules =rows >
           < tr >
             < td valign =center width =85 bgcolor =#0099ff height =22 class ="white"

align ="center" > 精品下载 td >
             < td valign =center width =20 bgcolor =#0099ff height =22 align ="middle" >< img

style ="CURSOR: hand" onClick =turnit(table1,image1);

src ="http://www.1studio.net/html/example/0054/close.gif" name =image1 > td >
           tr >
           < tr >
             < td height ="100" colspan =2 align ="center" id =table1 style ="DISPLAY: none" > 内容区

td >
           tr >
           < tr >
             < td valign =center width =85 bgcolor =#0099ff height =22 align ="center"

class ="white" > 免费申请 td >
             < td valign =center width =20 bgcolor =#0099ff height =22 align ="middle" >< img

style ="CURSOR: hand" onClick =turnit(table2,image2);

src ="http://www.1studio.net/html/example/0054/close.gif" name =image2 > td >
           tr >
           < tr >
             < td height ="100" colspan =2 align ="center" id =table2 style ="DISPLAY: none" > 内容区

td >
           tr >
           < tr >
             < td valign =center width =85 bgcolor =#0099ff height =22 align ="center"

class ="white" > 酷站源码 td >
             < td valign =center width =20 bgcolor =#0099ff height =22 align ="middle" >< img

style ="CURSOR: hand" onClick =turnit(table3,image3);

src ="http://www.1studio.net/html/example/0054/close.gif" name =image3 > td >
           tr >
           < tr >
             < td height ="100" colspan =2 align ="center" class =right id =table3 style ="DISPLAY:

none" > 内容区 td >
           tr >
table >
html >

千山鸟飞绝 2007-04-01 16:29 发表评论

类似QQ的树型菜单

千山鸟飞绝 — Sun, 01 Apr 2007 08:21:00 GMT

摘要: < HTML > < HEAD > ... 阅读全文

千山鸟飞绝 2007-04-01 16:21 发表评论

javascript实现二级联动下拉框

千山鸟飞绝 — Sun, 20 Aug 2006 05:13:00 GMT

这个是简单也是最基本的下拉框联动的示例，这个示例主要针对那些只有二级联动，且第一级是固定的选项，第二级的内容也比较简单。这里使用了javascript来联动第二级下拉框。

1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <HTML>
3 <HEAD>
4 <TITLE> New Document TITLE>
5 <META NAME="Generator" CONTENT="EditPlus">
6 <META NAME="Author" CONTENT="">
7 <META NAME="Keywords" CONTENT="">
8 <META NAME="Description" CONTENT="">
9 <script language="JavaScript" type="text/javascript">
10     //定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
11     var city=[
12     ["北京","天津","上海","重庆"],
13     ["南京","苏州","南通","常州"],
14     ["福州","福安","龙岩","南平"],
15     ["广州","潮阳","潮州","澄海"],
16     ["兰州","白银","定西","敦煌"]
17     ];
18
19     function getCity(){
20         //获得省份下拉框的对象
21         var sltProvince=document.form1.province;
22         //获得城市下拉框的对象
23         var sltCity=document.form1.city;
24
25         //得到对应省份的城市数组
26         var provinceCity=city[sltProvince.selectedIndex - 1];
27
28         //清空城市下拉框，仅留提示选项
29         sltCity.length=1;
30
31         //将城市数组中的值填充到城市下拉框中
32         for(var i=0;i<provinceCity.length;i++){
33             sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
34         }
35     }
36 script>
37 HEAD>
38
39 <BODY>
40 <FORM METHOD=POST ACTION="" name="form1">
41         <SELECT NAME="province" onChange="getCity()">
42             <OPTION VALUE="0">请选择所在省份 OPTION>
43             <OPTION VALUE="直辖市">直辖市 OPTION>
44             <OPTION VALUE="江苏省">江苏省 OPTION>
45             <OPTION VALUE="福建省">福建省 OPTION>
46             <OPTION VALUE="广东省">广东省 OPTION>
47             <OPTION VALUE="甘肃省">甘肃省 OPTION>
48         SELECT>
49         <SELECT NAME="city">
50             <OPTION VALUE="0">请选择所在城市 OPTION>
51         SELECT>
52     FORM>
53 BODY>
54 HTML>
55

这段代码比较简单。

如果对js不大熟悉，可以看看下面关于js处理select对象的内容：

1、使用selectedIndex属性获取当前选项的索引
    下拉框的选项是一个线性数组，每个选项都有一个索引，selectedIndex表示当前被选中的选项的索引号。结合options属性，可以得到被选中的option对象，从而对其做进一步的处理。当下拉框可多选时，selectedIndex属性返回第一个被选中的索引。
    selectedIndex是个只读的属性，想把通过索引指定的下拉框的项设置为选中状态，可以设置option对象的selected=true来实现。

2、为select对象添加一个选项
    sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
    new Option(provinceCity[i],provinceCity[i])表示创建一个值为provinceCity[i]，文本为provinceCity[i]的option对象，sltCity是页面上的city对象，i+1指定新添选项的位置。

3、清空一个select对象
    要将下拉框的所有选项删除有两种方法，
    第一种方法就是遍历删除：

1 var l=myselect.length;
2 for(var i=0;i<l;i++){
3 myselect.options[i]=null;
4 }

第二种方法比较简单，因此一般都使用此方法：

myselect.length=0;

千山鸟飞绝 2006-08-20 13:13 发表评论

实现两个列表框传值

千山鸟飞绝 — Thu, 15 Jun 2006 01:34:00 GMT

目的：
实现一个从左边的列表框中选择一项，点击添加，该项进入到右边的列表框中，从右边的列表框中选择一项，点击删除则该项从右边的列表框中删除，类似与51job里的那个功能。

代码：

1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
4 <script language="javascript">
5 function Add(ObjSource,ObjTarget){
6 for(var i=0;i<ObjSource.length;i++){
7 if(ObjSource.options[i].selected){
8 var opt=document.createElement("OPTION");
9 opt.value=ObjSource.options[i].value;
10 opt.text=ObjSource.options[i].text;
11 ObjTarget.add(opt);
12 ObjSource.options.removeChild(ObjSource.options[i--]);
13 }
14 }
15 }
16
17 function AddAll(ObjSource,ObjTarget){
18 SelectAll(ObjSource);
19 Add(ObjSource,ObjTarget);
20 }
21
22 function SelectAll(ObjSource){
23 for(var i=0;i<ObjSource.length;i++){
24 ObjSource.options[i].selected = true;
25 }
26 }
27
28 function fClose(){
29 var obj1 = document.getElementsByName('Target')[0];
30 returnStr = '';
31 for (var i=0;i<obj1.length;i++)
32 {
33 returnStr += obj1.options[i].text + ',' + obj1.options[i].value + ';';
34 }
35 window.returnValue = returnStr;
36 window.close();
37 }
38 script>
39 head>
40 <body>
41 <table width="350" height="50" border="1" style="border-collapse:collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
42 <tr>
43 <td width="150">
44 <html:select name="Source" multiple="true" size="10" style="width:250px" ondblclick="Add(document.all.Source,document.all.Target)"><html:options labelProperty="Depot_Province/entity/ORGNAME" property="Depot_Province/entity/ORGCODE"/>html:select>
45 td>
46 <td width="50" valign="middle">
47 <p style="width:100%" align="center">
48 <input type="button" value="->" onClick="Add(document.all.Source,document.all.Target)" title="添加">
49 p>
50 <p style="width:100%" align="center">
51 <input type="button" value=">>" onClick="AddAll(document.all.Source,document.all.Target)" title="添加全部">
52 p>
53 <p style="width:100%" align="center">
54 <input type="button" value="<-" onClick="Add(document.all.Target,document.all.Source)" title="删除">
55 p>
56 <p style="width:100%" align="center">
57 <input type="button" value="<<" onClick="AddAll(document.all.Target,document.all.Source)" title="删除全部">
58 p>
59 td>
60 <td width="150">
61 <select name="Target" multiple="multiple" size="10" style="width:250px" ondblclick="Add(document.all.Target, document.all.Source)">select>
62 td>
63 tr>
64 <tr>
65 <td align="right" colspan="3"><input type=button onclick="fClose()" value="确定">td>
66 tr>
67 table>
68 body>
69 html>

千山鸟飞绝 2006-06-15 09:34 发表评论