JS+XML打造QQ个性通信录

JS+XML打造QQ个性通信录 

 

    本文大概介绍用JS操纵XML实现具有查询功能的通信录。而且可以把它嵌入到QQ面板。

    主要有 Communication.htm，Communication.xml ,Communication.js 三个文件。

    首先是存放数据的文件 Communication.xml

    假设你的朋友分为三类，分别是：同学，同事，其它朋友

Communication.xml

<? xml version="1.0" encoding="gb2312"  ?>

< 通信录 >

     < 同学 >

         < 个人信息 >

             < 姓名 性别="男" > 陈一 </ 姓名 >

             < 出生日期 > 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

< html >

     < 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 >

                         &nbsp;

         < 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面板是否多了个图标，如果没有，面板管理器，把选项打上勾。