本文大概介绍用JS操纵XML实现具有查询功能的通信录。而且可以把它嵌入到QQ面板。
主要有 Communication.htm,Communication.xml ,Communication.js 三个文件。
首先是存放数据的文件 Communication.xml
假设你的朋友分为三类,分别是:同学,同事,其它朋友
Communication.xml
< 通信录 >
< 同学 >
< 个人信息 >
< 姓名 性别="男" > 陈一 </ 姓名 >
< 出生日期 > 1983-8 </ 出生日期 >
< 住址 > 湛江 </ 住址 >
< 家里电话 > 0729-3201928 </ 家里电话 >
< 手机号码 > 13756875467 </ 手机号码 >
< 电子邮箱 > chengone@21cn.com </ 电子邮箱 >
< QQ 号码 > 82521492 </ QQ号码 >
</ 个人信息 >
< 个人信息 >
< 姓名 性别="男" > 李二 </ 姓名 >
< 出生日期 > 1983-1-12 </ 出生日期 >
< 住址 > 汕头 </ 住址 >
< 家里电话 > 0750-2596329 </ 家里电话 >
< 手机号码 > 13637896451 </ 手机号码 >
< 电子邮箱 > litwo@163.com </ 电子邮箱 >
< QQ 号码 > 260117983 </ QQ号码 >
</ 个人信息 >
</ 同学 >
< 同事 >
< 个人信息 >
< 姓名 性别="女" > 王三 </ 姓名 >
< 出生日期 > 1986-5-6 </ 出生日期 >
< 住址 > 广州市 </ 住址 >
< 家里电话 > 020-88158546 </ 家里电话 >
< 手机号码 > 1392585676 </ 手机号码 >
< 电子邮箱 > wangthree@hotmail.com </ 电子邮箱 >
< QQ 号码 > 7454652657 </ QQ号码 >
</ 个人信息 >
< 个人信息 >
< 姓名 性别="女" > 何四 </ 姓名 >
< 出生日期 > 1985-2-5 </ 出生日期 >
< 住址 > 北京 </ 住址 >
< 家里电话 > 010-88816594 </ 家里电话 >
< 手机号码 > 13512586555 </ 手机号码 >
< 电子邮箱 > hefour@263.net </ 电子邮箱 >
< QQ 号码 > 764354985 </ QQ号码 >
</ 个人信息 >
</ 同事 >
< 其它朋友 >
< 个人信息 >
< 姓名 性别="男" > 陈四 </ 姓名 >
< 出生日期 > 1983-5-23 </ 出生日期 >
< 住址 > 电白 </ 住址 >
< 家里电话 > 0714-85654685 </ 家里电话 >
< 手机号码 > 13929634673 </ 手机号码 >
< 电子邮箱 > chengfour@263.net </ 电子邮箱 >
< QQ 号码 > 2824368488 </ QQ号码 >
</ 个人信息 >
< 个人信息 >
< 姓名 性别="男" > 何时 </ 姓名 >
< 出生日期 > 1986-6-3 </ 出生日期 >
< 住址 > 广州 </ 住址 >
< 家里电话 > 020-87685456 </ 家里电话 >
< 手机号码 > 13752856285 </ 手机号码 >
< 电子邮箱 > heshi@263.com </ 电子邮箱 >
< QQ 号码 > 423719510 </ QQ号码 >
</ 个人信息 >
</ 其它朋友 >
</ 通信录 >
页面文件: Communication.htm
< head >
< link href ="Communication.css" type ="text/css" rel ="stylesheet" />
< script language ="javascript" src ="Communication.js" ></ script >
</ head >
< body >
< table >
< tr >
< td >
< input id ="inputText" type ="text" onmouseover ="this.focus()" onfocus ="this.select()" value ="请输入关键字查询" />
</ td >
</ tr >
< tr >
< td width ="174" >
< select id ="styles" >
< option value ="Name" selected > 姓名
< option value ="FamilyName" > 姓氏
< option value ="Cellphone" > 手机号码
< option value ="QQ" > QQ号码
</ select >
< input type ="image" src ="search_btn.gif" style ="cursor:hand" onclick ="find(styles.value,inputText.value)" />
</ td >
</ tr >
< tr >
< td >
< select id ="classes" >
< option value ="all" selected > 全部
< option value ="classmate" > 同学
< option value ="workmate" > 同事
< option value ="others" > 其它朋友
</ select >
< a href ="javascript:seeAll(classes.value)" > 查看 </ a >
</ td >
</ tr >
</ table >
</ body >
</ html >
操纵XML的javascript 脚本文件:Communication.js
以上三个文件就基本上实现了通讯录的功能。由于Communication.htm 文件很简,界面没有什么美观可言。
如何加入到QQ面板呢!这个看QQ的帮助就可以了。
首先添加QQ电台, 然后在QQ的安装目录下的找到你的Q号为目录名的目录(如果Q号为123456,则文件夹名为123456),然后找到子目录 PanelData ,打开文件 PanelData.ini,看到这样:
[10003]
userpanelver=7
iconName=radio.ico
iconUrl=http://portalinfo.qq.com/radio.ico
iconver=1
panelid=10003
userpanel=TRUE
url=http://fm.qq.com/player/index.shtml?clientuin=$uin$&clientkey=$key$
domainid=17000
PanelIndex=1005
type=0
tipsinfo=QQ电台
name=QQ电台
stream=1
bFlash=FALSE
bForbid=FALSE
修改在这样:
[10003]
userpanelver=7
iconName=radio.ico
iconUrl=http://portalinfo.qq.com/radio.ico
iconver=1
panelid=10003
userpanel=TRUE
url=file:///C:/Communication/Communication.htm
domainid=17000
PanelIndex=1005
type=0
tipsinfo=我的通信录
name=我的通信录
stream=0
bFlash=FALSE
bForbid=FALSE
重新登录QQ,看看QQ面板是否多了个图标,如果没有,面板管理器,把选项打上勾。