客户端CGI——结合javascript、dhtml实现bbs的backoffice(一)。
来源:互联网 发布:java 类似jsp v 编辑:程序博客网 时间:2024/04/29 20:06
<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
最近见到很多朋友问有关对form元素的操作问题,下面把我写的一个bbs的backoffice部分帖出来给大家。这个程序实现了对bbs中栏目及其下属论坛的增、删、改名、排序、移动、修改属性等等操作,而只与服务器交互一次,其中用到的表单元素有text , button, submit,select , textarea等,如果你能够全部理解这些代码,那么不敢说你精通javascript和dhtml(我就不敢),最起码可以说你会了。
因为是草稿,所以未进行程序优化及界面处理,实际上你如果结合css可以把它做得象一个windows程序而不象html页面。另外一条因为我是用ie5来测试的,所以其中一些写法不是很规范,如引用form名时前面没加document , 函数没有返回值等,这些在nescape里都是不允许的,如果你要在nescape里用,请自己把语法规范了。
由于源代码很长(30000多字节),我将分为几个部分来讲,你把几部分中的代码合在一起存为一个html文件就可以直接运行了。首先需要从数据库中取出记录放到前台javascript数组中,因为着重点是放在前台,所以这里的asp我就不列出来了,只把它生成的html列出来,它的目的是生成数组及初始页面。这部分代码中牵涉到一个生成javascript二维数组的技巧,请大家仔细看一下,这是整个程序的关键所在。下面这段程序生成两个数组,一个是acategory,代表bbs大的栏目,共有四个;另一个是aforum,代表同栏目相关联的论坛。整个程序的操作实际上就是围绕着两个数组来实现的,同这两个数组相关联的是表单frmmanager的两个select :selcategory和selforum。
<script language=javascript>
//版块数组的构造函数
function makecategory(categoryid , categoryname , ordernum)
{
this.categoryid = categoryid ;
this.categoryname = categoryname ;
this.ordernum = ordernum ;
return this ;
}
//论坛数组的构造函数
function makeforum(categoryid , categoryname , ordernum , rootcategoryid , description , masterid)
{
this.categoryid = categoryid ;
this.categoryname = categoryname ;
this.ordernum = ordernum ;
this.rootcategoryid = rootcategoryid ;
this.description = description ;
this.masterid = masterid ;
return this ;
}
//建立版块数组并赋值
var acategory = new array() ;
acategory[0] = new makecategory(1 , '技术交流' ,1) ;
acategory[1] = new makecategory(2 , '项目管理' ,2) ;
acategory[2] = new makecategory(3 , '内部公告' ,3) ;
acategory[3] = new makecategory(4 , '海阔天空' ,4) ;
//建立论坛数组并赋值
var aforum = new array() ;
aforum[0] = new makeforum(5 , 'asp&database' ,1 ,1 ,'asp, access,pb, sql.oralce,etc. ',1);
aforum[1] = new makeforum(6 , 'design world' ,2 ,1 ,'photoshop,dreamweaver,flash, 3dmax,etc.',2);
aforum[2] = new makeforum(7 , 'design world' ,3 ,1 ,'photoshop,dreamweaver,flash, 3dmax,etc.',2);
aforum[3] = new makeforum(8 , 'program language' ,4 ,1 ,'java, html/dhtml/xml, c/c++, php/jsp, vbscript/javascript, etc.',1);
aforum[4] = new makeforum(9 , 'system administration' ,5 ,1 ,'windows9x/nt/2000, unix, linux , etc.',2);
aforum[5] = new makeforum(10 , 'network security' ,6 ,1 ,'tcp/ip, socket, hacker, firewall, proxy, etc.',1);
aforum[6] = new makeforum(11 , 'new idea' ,7 ,1 ,'welcome all creative, innovative and anything different .',1);
aforum[7] = new makeforum(12 , '4biz电子商务搜索引擎门户项目' ,1 ,2 ,'e-commerce search engine portal.',2);
aforum[8] = new makeforum(13 , 'poker town ' ,2 ,2 ,'our first online game.',1);
aforum[9] = new makeforum(14 , 'vertigine' ,3 ,2 ,'powerful vertical search engine.',2);
aforum[10] = new makeforum(15 , 'easycase' ,4 ,2 ,'easycase-new modeling tool.',1);
aforum[11] = new makeforum(16 , '日常管理' ,1 ,3 ,'daily grind.',2);
aforum[12] = new makeforum(17 , '临时通知' ,2 ,3 ,'temporary notice.',1);
aforum[13] = new makeforum(18 , '会议安排' ,3 ,3 ,'meeting schedule.',2);
aforum[14] = new makeforum(19 , '有感而发' ,4 ,4 ,'just say it.',1);
aforum[15] = new makeforum(20 , '似水流年' ,5 ,4 ,'all that gone with wind.',1);
aforum[16] = new makeforum(21 , '谈情说爱' ,6 ,4 ,'let"s talk about love.',2);
aforum[17] = new makeforum(22 , '笑话站' ,7 ,4 ,'just joke , whatever it is.',1);
</script>
<html>
<head>
<title>版块管理</title>
<meta http-equiv='content-type' content='text/html; charset=gb2312'>
<link rel='stylesheet' href='images/style.css'>
</head>
<body bgcolor='#ffffff' onload='on_load();'>
<p align=center class=bigtitle>ematters board 版块管理</p>
<form name = frmmanager method='post' action='changeforum.asp'>
<table width=720 border=0 align=center cellspacing=1 cellpadding=4 bgcolor=#000000>
<tr bgcolor=#ffffff>
<td width=250 align=left>
版块名称
</td>
<td width=70 align=center>
</td>
<td width=400 align=left>
论坛名称
</tr>
<tr bgcolor=#ffffff>
<td align=left>
<input type=text name=txtcategoryname size=20 value='请选择版块' disabled>
</td>
<td width=120 align=center>
<input type=button name='btnchangename' value='修改名称' disabled onclick=on_changename();>
</td>
<td align=left>
<input type=text name=txtforumname size=20 value='请选择论坛' disabled>
</tr>
<tr bgcolor=#ffffff>
<td align=left>
<select name=selcategoryname size=10 width=200 onchange='on_categorychange();' style='width:120'>
</select>
<input type=button name=btnaddcategory value = '增加' onclick='on_addcategory();'>
<input type=button name=btndeletecategory value='删除' onclick='on_deletecategory();'>
</td>
<td align=center>
<br><br>
<br><br>
<input type=button name=btnup value='↑' onclick='on_orderup()'>
<br><br>
<input type=button name=btndown value='↓' onclick='on_orderdown()'>
</td>
<td align=left>
<select name=selforumname size=10 onchange='on_forumchange();' style='width:200'>
</select>
<input type=button name=btnaddforum value = '增加' onclick='on_addforum();'>
<input type=button name=btndeleteforum value='删除' onclick='on_deleteforum();'>
</tr>
<tr bgcolor=#ffffff><td colspan=2 align=left>
描述:
<textarea name=txtdescription cols=30 style='overflow:hidden'></textarea>
<input type=button name=btnmodifydescription value='修改' onclick='on_changedescription()'>
</td>
<td align=left>
版主
<select name=selmaster disabled>
<option value=1>bigeagle</option>
<option value=2>lizza</option>
</select>
<input type=button name=btnchangemaster value='修改' onclick='on_changemaster()'>
</td></tr>
<tr bgcolor=#ffffff>
<td colspan=3 align=left>
<input type=button name=btnsubmit value='确认' onclick=on_submit();>
</td>
</tr>
</table>
</form>
</body></html>
<<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 160x600, 创建于 08-4-23MSDN */google_ad_slot = "4367022601";google_ad_width = 160;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
客户端CGI——结合javascript、dhtml实现bbs的backoffice(只与服务器交互一次)。最近见到很多朋友问有关对form元素的操作问题,下面把我写的一个bbs的backoffice部分帖出来给大家。这个程序实现了对bbs中栏目及其下属论坛的增、删、改名、排序、移动、修改属性等等操作,而只与服务器交互一次,其中用到的表单元素有text , button, submit,select , textarea等,如果你能够全部理解这些代码,那么不敢说你精通javascript和dhtml(我就不敢),最起码可以说你会了。
因为是草稿,所以未进行程序优化及界面处理,实际上你如果结合css可以把它做得象一个windows程序而不象html页面。另外一条因为我是用ie5来测试的,所以其中一些写法不是很规范,如引用form名时前面没加document , 函数没有返回值等,这些在nescape里都是不允许的,如果你要在nescape里用,请自己把语法规范了。
由于源代码很长(30000多字节),我将分为几个部分来讲,你把几部分中的代码合在一起存为一个html文件就可以直接运行了。首先需要从数据库中取出记录放到前台javascript数组中,因为着重点是放在前台,所以这里的asp我就不列出来了,只把它生成的html列出来,它的目的是生成数组及初始页面。这部分代码中牵涉到一个生成javascript二维数组的技巧,请大家仔细看一下,这是整个程序的关键所在。下面这段程序生成两个数组,一个是acategory,代表bbs大的栏目,共有四个;另一个是aforum,代表同栏目相关联的论坛。整个程序的操作实际上就是围绕着两个数组来实现的,同这两个数组相关联的是表单frmmanager的两个select :selcategory和selforum。
<script language=javascript>
//版块数组的构造函数
function makecategory(categoryid , categoryname , ordernum)
{
this.categoryid = categoryid ;
this.categoryname = categoryname ;
this.ordernum = ordernum ;
return this ;
}
//论坛数组的构造函数
function makeforum(categoryid , categoryname , ordernum , rootcategoryid , description , masterid)
{
this.categoryid = categoryid ;
this.categoryname = categoryname ;
this.ordernum = ordernum ;
this.rootcategoryid = rootcategoryid ;
this.description = description ;
this.masterid = masterid ;
return this ;
}
//建立版块数组并赋值
var acategory = new array() ;
acategory[0] = new makecategory(1 , '技术交流' ,1) ;
acategory[1] = new makecategory(2 , '项目管理' ,2) ;
acategory[2] = new makecategory(3 , '内部公告' ,3) ;
acategory[3] = new makecategory(4 , '海阔天空' ,4) ;
//建立论坛数组并赋值
var aforum = new array() ;
aforum[0] = new makeforum(5 , 'asp&database' ,1 ,1 ,'asp, access,pb, sql.oralce,etc. ',1);
aforum[1] = new makeforum(6 , 'design world' ,2 ,1 ,'photoshop,dreamweaver,flash, 3dmax,etc.',2);
aforum[2] = new makeforum(7 , 'design world' ,3 ,1 ,'photoshop,dreamweaver,flash, 3dmax,etc.',2);
aforum[3] = new makeforum(8 , 'program language' ,4 ,1 ,'java, html/dhtml/xml, c/c++, php/jsp, vbscript/javascript, etc.',1);
aforum[4] = new makeforum(9 , 'system administration' ,5 ,1 ,'windows9x/nt/2000, unix, linux , etc.',2);
aforum[5] = new makeforum(10 , 'network security' ,6 ,1 ,'tcp/ip, socket, hacker, firewall, proxy, etc.',1);
aforum[6] = new makeforum(11 , 'new idea' ,7 ,1 ,'welcome all creative, innovative and anything different .',1);
aforum[7] = new makeforum(12 , '4biz电子商务搜索引擎门户项目' ,1 ,2 ,'e-commerce search engine portal.',2);
aforum[8] = new makeforum(13 , 'poker town ' ,2 ,2 ,'our first online game.',1);
aforum[9] = new makeforum(14 , 'vertigine' ,3 ,2 ,'powerful vertical search engine.',2);
aforum[10] = new makeforum(15 , 'easycase' ,4 ,2 ,'easycase-new modeling tool.',1);
aforum[11] = new makeforum(16 , '日常管理' ,1 ,3 ,'daily grind.',2);
aforum[12] = new makeforum(17 , '临时通知' ,2 ,3 ,'temporary notice.',1);
aforum[13] = new makeforum(18 , '会议安排' ,3 ,3 ,'meeting schedule.',2);
aforum[14] = new makeforum(19 , '有感而发' ,4 ,4 ,'just say it.',1);
aforum[15] = new makeforum(20 , '似水流年' ,5 ,4 ,'all that gone with wind.',1);
aforum[16] = new makeforum(21 , '谈情说爱' ,6 ,4 ,'let"s talk about love.',2);
aforum[17] = new makeforum(22 , '笑话站' ,7 ,4 ,'just joke , whatever it is.',1);
</script>
<html>
<head>
<title>版块管理</title>
<meta http-equiv='content-type' content='text/html; charset=gb2312'>
<link rel='stylesheet' href='images/style.css'>
</head>
<body bgcolor='#ffffff' onload='on_load();'>
<p align=center class=bigtitle>ematters board 版块管理</p>
<form name = frmmanager method='post' action='changeforum.asp'>
<table width=720 border=0 align=center cellspacing=1 cellpadding=4 bgcolor=#000000>
<tr bgcolor=#ffffff>
<td width=250 align=left>
版块名称
</td>
<td width=70 align=center>
</td>
<td width=400 align=left>
论坛名称
</tr>
<tr bgcolor=#ffffff>
<td align=left>
<input type=text name=txtcategoryname size=20 value='请选择版块' disabled>
</td>
<td width=120 align=center>
<input type=button name='btnchangename' value='修改名称' disabled onclick=on_changename();>
</td>
<td align=left>
<input type=text name=txtforumname size=20 value='请选择论坛' disabled>
</tr>
<tr bgcolor=#ffffff>
<td align=left>
<select name=selcategoryname size=10 width=200 onchange='on_categorychange();' style='width:120'>
</select>
<input type=button name=btnaddcategory value = '增加' onclick='on_addcategory();'>
<input type=button name=btndeletecategory value='删除' onclick='on_deletecategory();'>
</td>
<td align=center>
<br><br>
<br><br>
<input type=button name=btnup value='↑' onclick='on_orderup()'>
<br><br>
<input type=button name=btndown value='↓' onclick='on_orderdown()'>
</td>
<td align=left>
<select name=selforumname size=10 onchange='on_forumchange();' style='width:200'>
</select>
<input type=button name=btnaddforum value = '增加' onclick='on_addforum();'>
<input type=button name=btndeleteforum value='删除' onclick='on_deleteforum();'>
</tr>
<tr bgcolor=#ffffff><td colspan=2 align=left>
描述:
<textarea name=txtdescription cols=30 style='overflow:hidden'></textarea>
<input type=button name=btnmodifydescription value='修改' onclick='on_changedescription()'>
</td>
<td align=left>
版主
<select name=selmaster disabled>
<option value=1>bigeagle</option>
<option value=2>lizza</option>
</select>
<input type=button name=btnchangemaster value='修改' onclick='on_changemaster()'>
</td></tr>
<tr bgcolor=#ffffff>
<td colspan=3 align=left>
<input type=button name=btnsubmit value='确认' onclick=on_submit();>
</td>
</tr>
</table>
</form>
</body></html>
<<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 160x600, 创建于 08-4-23MSDN */google_ad_slot = "4367022601";google_ad_width = 160;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- 客户端CGI——结合javascript、dhtml实现bbs的backoffice(一)。
- 客户端CGI——结合javascript、dhtml实现bbs的backoffice(二)
- webservice结合dhtml的简单例子(一,webservice)
- webservice结合dhtml的简单例子(一,webservice)
- Ajax基础教程---1.3 Web应用的发展历程 CGI->applet->JavaScript->flash ->DHTML->AJAX
- js+DHTML的客户端流程图
- JAVASCRIPT+DHTML实现表格拖动
- DHTMl案例(简称动态网页)--html、css、javascript、div技术的结合
- JAVASCRIPT+DHTML实现表格拖动(固定写法)
- 客户端JavaScript(一)
- 项目实训——BBS论坛开发(一)
- 基于mysql的bbs(一)
- 基于mysql的bbs设计(一)
- 自己动手,结合javascript和dhtml做一个ubb编辑器
- javascript+DHTML 画图(1)
- javascript + DHTMl 画图(3)
- 深入浅出JavaScript (四)DHTML
- 【深入浅出】JavaScript (四)DHTML
- Mobile Java Eyed by Big Media Companies in the UK @ JDJ
- 可通过拖动改变列宽的网格源码
- J2ME News in Brief: New Java-Enabled Phone Ships @ JDJ
- 客户端CGI——结合javascript、dhtml实现bbs的backoffice(二)
- An Interview with Bruce Eckel @ JDJ
- 客户端CGI——结合javascript、dhtml实现bbs的backoffice(一)。
- Security: Beyond Technical Measures @ JDJ
- 离开时启动收藏夹
- Favorite ComboBox @ JDJ
- 利用JavaScript实现类似Delphi中数据敏感控件DBTextBox!
- Adding Commands to Displayable Components? @ JDJ
- 利用JAVASCRIPT实现时间段的查询
- Linux Gains Momentum in Telecom @ JDJ
- 利用js实现简体中文转繁体