网站公告列表     学友堂,成就你我!  [admin  2006年11月29日]        
加入收藏
设为首页
联系站长
您现在的位置: 学友堂 >> 电脑网络 >> 软件 >> 文章正文
  把QQ爱墙搬回家           
把QQ爱墙搬回家
文章来源:不详 更新时间:2008-4-7 0:35:19 本站:学友堂  网址:www.3i3i.cn
学友堂 www.3i3i.cn

点击图片翻页

要实现这样的功能,首先我们需要能够动态的添加留言并显示留言,留言条在留言墙上的位置需要保存,这个我们借助JSP+数据库的方式来实现,其次在留言墙上可以随意的拖动和关闭留言条,使用JavaScript+CSS就可以来完成这个功能。JavaScript+CSS的组合在网络开会中有很大的用处,使用JavaScript来监听用户的事件,用CSS来规定网页元素的表现方式,,可以用来设计许多网络即时通讯。


  小知识:CSS 是一种标记语言,不需要编译,可以被浏览器解释执行,它负责网页内容的表现形式,可以嵌入到HTML页面中和保存为扩展名为CSS的文件,然后在页面中被调用来表现整个网页的样式,也可针对HTML某一元素单独描述.



第一步:创建数据库表


  先打开Office 2000中的Microsoft Access 2000,在“文件”菜单中选择“新建”,在弹出的对话框中选择“空数据库”选项,填写文件名为Message,然后点击“创建”按钮,就创建了我们所需要用到Message.db数据库文件。
数据库文件创建后,在初始对话框中双击“使用设计器创建表”选项,打开一张表并在表中输入字段名称和数据类型(见表),最后点击工具栏的“保存”按钮即可。

第二步:设计留言条的样式



  打开Dreamwearer 8.0,选择“文件”菜单中的“新建”,在弹出对话框的常规选项卡中的“类别”处选择“常规”,基本页选择“CSS”,然后点击“创建”按钮.,在其中输入代码(代码下载地址http://www.cpcw.com/bzsoft),最后保存为“c.css”文件。



第三步:编写鼠标操作函数


  这一步是我们设计的关键点,我们选择通过页面调用外部JS文件的方式来实现,在Dreamwearer 8.0中点击“新建”后,在弹出对话框的常规选项卡中,“类别”选择“常规”,再选择”JavaScript”,输入如下代码并保存为Myjs.js文件。



var scrip = '';
var iLayerMaxNum = 10000;
//当页面中有鼠标按键弹起时间时,则执行me函数
document.onmouseup = me;
//当页面中有鼠标拖动事件发生时,则执行ms函数
document.onmousemove = ms;
var scripX;
var scripY;
//当留言条被点击时所要执行的函数
function Move(Object, event)
{
scrip = Object.id;
document.getElementById(scrip).setCapture();
scripX = event.x - document.getElementById(scrip).style.pixelLeft;
scripY = event.y - document.getElementById(scrip).style.pixelTop;
//将被点击的留言条置于顶层
document.getElementById(scrip).style.zIndex = iLayerMaxNum;
iLayerMaxNum = iLayerMaxNum + 1;
}
//鼠标拖动留言条时,需要改变留言条的位置
function ms(evt)
{
if(scrip!=''){
document.getElementById(scrip).style.left = event.x - scripX;
document.getElementById(scrip).style.top = event.y - scripY;
}

}
//鼠标释放时,要释放占用的资源
function me(evt){
if(scrip!=''){
document.getElementById(scrip).releaseCapture();
scrip='';
}
}

//点击关闭按钮执行的函数
function delMessage(n)
{
var Messageid = n;
document.getElementById(Messageid).style.display = 'none';
}



第四步:设计留言的界面


  在Dreamweaver 8.0中,我们新建一个名为Add.jsp的动态页JSP文件,在其中添加表单Message,在表单mesage中按照图示添加相关表单元素,并设定相应的名称,设定表单提交的页面为add1.jsp即可。

点击图片查看下一篇文章

第五步:保存及读取留言数据


  因为在此应用中需要多次进行数据库操作,我们可以创建一个Java类 DbConnect用于连接、操作数据库 。在Dreamwearer 8.0也能完成创建Java文件的任务,点击“新建”,在弹出对话框的常规选项卡中,“类别”选择“其他”,然后选择“Java”,输入代码(代码下载地址http://www.cpcw.com/bzsoft)。

第六步:试用程序


  我们在Resion安装目录下的Conf文件夹,用写字板或者记事本打开Resin.conf文件,定位到有web-app的地方,加入一行<web-app id="/qq" app-dir="E:\\qqwall" character-encoding="GBK" />,保存此文件即可完成程序的部署。部署好后,在浏览器中输入http://localhost/st登录留言墙,点击“我要留言”即可发表自己的个性留言了。



总结


  通过本例,大家看到做一个基于网络的项目需要多种技术的相互协作才能完成。利用这些技术我们不仅仅用来完成我们的个性留言墙,还可以用来开发如网络办公、MIS管理、业务管理等大的信息管理系统。

参考资料

文章来自电脑报2008年第2期F版

文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    最 新 热 门
    最 新 推 荐
    相 关 文 章
    QQ安全问题完全解决方案
    QQ邮箱秘籍之QQ邮箱技巧
    怎么样设置在QQ邮箱中设
    百度搜索栏,QQ输入窗口等
    如何关闭(注销)QQ空间
    解决Windows7中QQ自动隐
    QQ2009正式版SP4发布 文
    怎么查询别人qq上线时间
    慎用QQ远程协助,保护你
    反QQ盗号,清除QQ木马,
     
    版权所有 2004-2012  学友堂 [3i3i.cn] 最佳分辨率 1024×768
    Copyright www.3i3i.cn All rights reserved.