alonely Blog

QQ、淘宝旺旺接口调用

alonely — Wed, 08 Oct 2008 03:51:28 +0800

想必大家在浏览网页的时候，经常会看见网页中挂有QQ或者是淘宝旺旺的头像，并且如果对方在线的话头像是亮的，否则头像是暗的。当你点击该头像的时候，就会弹出跟平时一样的聊天效果，很不错吧！~其实这个功能QQ和淘宝旺旺已经给我们提供了调用接口，我们只要按照他们的规则调用，实现起来是非常简单的。

OK，下面我就分别给大家介绍一下QQ和淘宝旺旺的接口是如何调用的，并且我会为大家讲解里面主要参数的作用：

首先是QQ的调用方法：

代码就是上面的两行，非常简单吧。其中链接参数里的uin后面跟的是你的QQ号码，至于img中的参数p=1:328877476:7中的7是QQ头像的图案，你可以试着改变一下，看看效果。

然后是淘宝旺旺的调用方法：

代码也不多，其中链接参数里的uid后面跟的是你的淘宝旺旺号，至于img中的参数s=2中的2是淘宝旺旺头像的图案。

至于其他的参数都是很基本的HTML代码了，我这里就不介绍啦，如果大家有不理解的地方，请在文章下面留言，我会耐心为大家解答的。

实用的小日历控件

alonely — Sun, 05 Oct 2008 23:20:48 +0800

大家在给客户做系统的时候，经常会遇到的需求是做一个日历模块，其作用就是把预计每天要做的事情先记录到日历中，然后点击日历中的每一天，则会把事先记录好的信息显示出来。下面我就把我在项目中的日历模块与大家分享一下。

首先，给大家截个图直观的看一下我的小日历控件：

然后，给出HTML的调用代码：

以下是HTML调用代码：
<html>
<head>
<title>
实用小日历控件
</title>
<script language="javascript">
function returndate(vvdate){
//点日历
if( vvdate == "" || vvdate == " " ){return ;}
var nowDate = formatDate(today.getFullYear(),today.getMonth() + 1,vvdate);
var left = screen.width/2 - 250;
var top = screen.height/2 - 350;
var sFeatures="left="+left+",top="+top+",height=550,width=700,status=no,menubar=no,location=no,scrollbars=yes";
window.open("?checkdate="+nowDate,"calendaronedateaddwindow",sFeatures);
}
</script>
<script language="JavaScript" src="simpleCalendar.js"></script>
<link href="css/calendar.css" type="text/css" rel="stylesheet">
</head>
<body>
<table style="width:200px;" class="table1">
<tr>
<td>
<span id="spanshowcalleft" style="display:block; height:150px; width:98%; z-index:100 ">
<script language="javascript">showcal("spanshowcalleft");</script>
</span>
</td>
</tr>
</table>
</body>
</html>

最后，如果有需要这个小日历控件的话请点击下载：日历控件

JSP自定义标签库之Select下拉框

alonely — Thu, 02 Oct 2008 02:02:31 +0800

今天我给大家介绍的是JSP自定义标签库的一个具体应用，那就是在页面初始化的时候用JSP的自定义标签把后台的Select框在前台输出。

当然，今天我给大家贴出的代码只是项目中的一个缩影，因为完整的代码太多了，所以我只能把核心的代码贴出来，并且我会提示大家怎么把这个标签做完整了，也就是通用性比较强的JSP自定义标签。

1、我这个例子中没有连接数据库，其实我的项目中是把数据库中的值，赋值到Select框中的。
2、我这个标签在前台只把name属性传过去了，其实大家可以扩展到：把要查询的表名、Select框中对应数据库中的查询字段（也就是Sql查询的字段）、Sql语句的排序方式、是否有默认值（修改功能时使用）、Select框的ID、等等，都在前台传过去。

这样你的JSP自定义标签通用性就非常的强了，至于好处我就不用多说了吧，可以在前台避免使用Scriplet（<%...%>），并且调用起来也非常的方便。

Ok，下面请看完整的代码示例：
首先是web.xml的配置

以下是web.xml代码：
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<jsp-config>
<taglib>
<taglib-uri>/WEB-INF/alonely-tag.tld</taglib-uri>
<taglib-location>/WEB-INF/alonely-tag.tld</taglib-location>
</taglib>
</jsp-config>
</web-app>

然后是前台JSP页面

以下是tagdemo.jsp代码：
<%@ page contentType="text/html; charset=GBK" %>
<%@ taglib uri="/WEB-INF/alonely-tag.tld" prefix="tag" %>
<html>
<head>
<title>JSP自定义标签示例</title>
</head>
<body>
<tag:select name="type_id"></tag:select>
</body>
</html>

在然后是tld文件

以下是alonely-tag.tld代码：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN" "http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd">
<taglib>
<tlibversion>1.0</tlibversion>
<jspversion>1.1</jspversion>
<shortname>alonely</shortname>
<tag>
<name>select</name>
<tagclass>helloWorld.SelectTag</tagclass>
<attribute>
<name>name</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
</tag>
</taglib>

最后是后台的Java代码

以下是SelectTag.java代码：
package helloWorld;
import javax.servlet.jsp.JspException;
import java.io.*;
import javax.servlet.jsp.tagext.BodyTagSupport;
/**
* <p>Title: tagDemo</p>
* <p>Description: Alonely Blog</p>
* <p>Copyright: Copyright (c) 2008-10-02</p>
* <p>Company: www.3y11.com</p>
* @author Alonely
* @version 1.0
*/
public class SelectTag extends BodyTagSupport {
private String name;
public void setName(String name) {
this.name = name;
}
public String getName() {
return name;
}
public int doStartTag() throws JspException {
StringBuffer html = new StringBuffer();
html.append("<select name='").append(name).append("'").append(">\n");
html.append("<option value='").append("J2SE").append("'>").append("J2SE").append("</option>\n");
html.append("<option value='").append("J2EE").append("'>").append("J2EE").append("</option>\n");
html.append("<option value='").append("Java").append("'>").append("Java").append("</option>\n");
html.append("</select>");
try {
pageContext.getOut().println(html.toString());
} catch (IOException ex) {
}
return EVAL_BODY_INCLUDE;
}
public int doEndTag() throws JspException {
return (EVAL_PAGE);
}
}

Select multiple的添加、删除、与提交

alonely — Mon, 29 Sep 2008 00:52:02 +0800

今天我给大家介绍的是当把select下拉框设置为multiple属性的时候，是如何通过JavaScript来动态往里面添加元素、删除元素、与提交元素的。例子中我为了大家方便使用，在提交的时候把select框中的多个options组装成一个字符串的形式了，然后每个options中的值都用半角逗号分开了。并且下面的代码大家只要Copy到html页面中运行既能看到效果。

OK，下面请看代码示例：

<html>
<head>
<title>Select multiple的添加、删除、与提交</title>
<script>
function addSelect(value){
var myselect = document.getElementById("selectmultiple");
var op = document.createElement("OPTION");
var flag = true;
if(myselect.length != 0){
for(var j=0; j<myselect.length; j++){
if(value == myselect.options[j].value){
flag = false;
break;
}
}
}
if(flag){
op.text = value;
op.value = value;
myselect.add(op);
}
}
function removeOption(){
var myselect = document.getElementById("selectmultiple");
myselect.remove(myselect.selectedIndex);
}
function submitForm(){
var myselect = document.getElementById("selectmultiple");
var selectstr = "";
for(var i=0; i<myselect.length; i++){
if(selectstr == ""){
selectstr += myselect.options[i].value;
}else{
selectstr += "," + myselect.options[i].value;
}
}
alert(selectstr);
}
</script>
</head>
<body>
<select id="selectmultiple" name="selectmultiple" ondblclick="removeOption()" style="width:200px;" multiple="multiple"></select>
<br><input type="text" onblur="addSelect(this.value);">
<br><input type="button" value="提交" onclick="submitForm();">
</body>
</html>

用DWR验证前台字符串是否在后台的字符串中

alonely — Fri, 26 Sep 2008 01:47:49 +0800

今天我在前面的《DWR入门小例子》一文之后在继续为大家演示DWR的使用，至于DWR的基本配置与工作原理详见《DWR入门小例子》。

其实今天我演示的程序只是项目中的一个缩影，当用户在text文本框中输入数据的时候，判断此字符串是否在后台已经定义好的字符串中（为了方便演示我把在数据库中的判断改成判断已经定义好的字符串了）。如果应用到项目中，大家可以判断这个字符串是否在数据库中已经存在了，比如注册用户名的时候，当鼠标失去焦点，立刻告知该用户是否被注册了，等等。

Ok，下面请看具体的代码：
首先是前台JSP页面：

以下是checkString.jsp代码：
<%@ page language="java" pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>checkString</title>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/interface/checkExistMethod.js"></script>
<script type="text/javascript">
function checkExist(value){
checkExistMethod.execute(value,isExist);
}
function isExist(is){
if(is){
alert("Exist!");
}else{
alert("Not Exist!");
}
}
</script>
</head>
<body>
<input type="text" onkeyup="checkExist(this.value);" />
</body>
</html>

然后是dwr.xml配置：

以下是dwr.xml代码：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<create javascript="checkExistMethod" creator="new">
<param name="class" value="helloWorld.CheckExist"></param>
</create>
</allow>
</dwr>

最后是后台的Java代码：

以下是CheckExist.java代码：
package helloWorld;
public class CheckExist {
public boolean execute(String value) {
String checkString = "12345";
if(checkString.indexOf(value) > -1){
return true;
}else{
return false;
}
}
}

JavaScript动态添加行与列

alonely — Tue, 23 Sep 2008 05:29:02 +0800

在以前的文章中，我给大家介绍过单独添加行的示例，详情请见：《JavaScript添加树节点示例》一文。今天我给大家介绍的是，在原来的基础上即可以添加行，也可以添加列的例子，其主要实现原理就是通过JavaScript来逐一查找树节点，然后添加子节点。代码虽然不是很多，但是非常的实用（我个人认为，因为在我做过的很多项目中都用到过）。

Ok，下面请看具体的JavaScript动态添加行与列代码示例，并且以下代码直接Copy到Html页面中运行既能看到效果：

<html>
<head>
<title>JavaScript动态添加行与列</title>
<script language="javascript">
var trcount = 0;
function addrows(index){
trcount = trcount + 1;
var trArray = document.getElementsByTagName("tr");
var count = 0;
for(var i = 0 ; i < trArray.length ; i++) {
var trrows = document.getElementsByTagName("tr")[i];
var tdcols = trrows.insertCell(index);
if(count == i ) {
tdcols.innerHTML ='J2EE';
}
count++;
}
}
function addcol(){
var o=document.getElementById("addTbl").firstChild;
var t=o.insertRow();
a=t.insertCell();
a.innerHTML='XML';
for(var trid=0; trid<=trcount; trid++){
a=t.insertCell();
a.innerHTML='ASP';
}
}
</script>
</head>
<body>
<input type="button" value="addRow" onclick="addrows(2)"/>
<input type="button" value="addCol" onClick="addcol()">
<table border="1" id="addTbl">
<tr>
<td>Java</td>
<td>J2SE</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Ajax</td>
</tr>
</table>
</body>
</html>

用JBoss IDE for Eclipse配置JBoss服务时错误解决

alonely — Sat, 20 Sep 2008 08:12:43 +0800

今天我在用JBoss IDE for Eclipse工具配置EJB3.0环境的时候，在启动JBoss服务的时候，给我报了一个错误。详细信息如下：
A configuration error occurred during startup. Please verify the preference field with the prompt: JBoss JDK name
其实这个错误不是很难解决的，给我们提示的信息是：在服务启动的时候发送配置错误，请确认JDK的路径。

然后我自己检查了一下JBoss IDE for Eclipse工具中JDK的路径，结果发现我的IDE工具安装时默认的是Java自动升级到的1.6版本中了，所以并不是完整的Java路径。

解决的方法是：在添加一个完整的JBoss JDK路径，并且把路径指到Java的安装目录就OK了。

JavaScript的全选、反选与ASP的后台取值

alonely — Wed, 17 Sep 2008 08:19:14 +0800

想必用过淘宝的朋友们都看见过，在管理自己店铺的时候会有一个全选与反选功能，通过这个功能可以批量的处理数据，使用起来是即方便又美观。今天我就给大家演示一下这个功能，并且附带用ASP在后台是如何取值的。

我这个Demo程序演示的是用全选与反选功能在前台页面选择后，在后台做批量删除的。其实需要注意的地方只有一点，那就是ASP在后台获取ID字符串的时候是带有空格的，我们只需要用trim()函数过滤一下就行了。

下面请看具体的代码：
首先给出前台页面代码：

以下是demo.html代码：
<script language="javascript">
function selectAll(){
var flag = false;
if (theForm.all_check.checked){
flag = true;
}
for (var i=0; i<theForm.elements.length; i++){
var obj = theForm.elements(i);
if (obj.type == "checkbox" && obj.name == "id_l"){
obj.checked = flag;
}
}
}
function reselectAll(){
for(var i=0; i<theForm.elements.length; i++){
var obj = theForm.elements(i);
if((obj.type == "checkbox") && (obj.name == "id_l")){
if(obj.checked){
obj.checked = false;
}else{
obj.checked = true;
}
}
}
}
</script>
<form name="theForm">
<table width="200" border="1">
<tr>
<td><input type="checkbox" name="all_check" onclick="selectAll();">全选</td>
<td><input type="checkbox" name="res_check" onclick="reselectAll();">反选</td>
</tr>
<tr>
<td><input type="checkbox" id="id_l" name="id_l" value="1"></td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="id_l" name="id_l" value="2"></td>
<td> </td>
</tr>
</table>
</form>

然后是后台的获取参数与批量处理：

delid_arry = trim(request.form("id_l"))
delid = split(delid_arry, ",")
For i=0 To Ubound(delid)
conn.execute("delete from 表名 where id = "&trim(delid(i))&"")
Next

类似于QQ弹出窗口的JavaScript代码

alonely — Sun, 14 Sep 2008 02:24:24 +0800

想必大家都使用过QQ、MSN、淘宝旺旺、等等的聊天软件吧。在软件运行的过程中，如果有好友上线了就会在桌面的右下角弹出一个小窗口来提示你好友上线的信息，假如你点击那个小窗口，则会弹出与该人聊天的页面，假如你不点击那个小窗口则过一会系统会把它自动隐藏起来。呵呵，这个功能看起来既美观又实用，真是不错呀！～

OK，下面我就用Html代码和JavaScript代码来模仿一下QQ、MSN、淘宝旺旺、等等的聊天软件这一功能。
先给大家贴出来的是Html代码：

<html>
<head>
<title>类似于QQ弹出窗口的JavaScript代码示例</title>
<script type="text/javascript" src="popmsg.js"></script>
<script language="javascript" type="text/javascript">
var MSG1 = new CLASS_MSN_MESSAGE(200,120,"短消息提示：","您有1封消息","点击查看","test.html",1);
MSG1.rect(null,null,null,screen.height-50);
MSG1.speed = 10;
MSG1.step = 5;
MSG1.show();
</script>
</head>
<body>
</body>
</html>

然后是JavaScript代码：

以下是popmsg.js代码：
function CLASS_MSN_MESSAGE(width,height,caption,title,message,href,id){
this.title = title;
this.caption= caption;
this.message= message;
this.href= href;
this.id= id;
this.width = width?width:200;
this.height = height?height:120;
this.timeout= 150;
this.speed = 20;
this.step = 1;
this.right = screen.width -1;
this.bottom = screen.height;
this.left = this.right - this.width;
this.top = this.bottom - this.height;
this.timer = 0;
this.pause = false;
this.close = false;
this.autoHide = true;
}
CLASS_MSN_MESSAGE.prototype.hide = function(){
if(this.onunload()){
var offset = this.height>this.bottom-this.top?this.height:this.bottom-this.top;
var me = this;
if(this.timer>0){
window.clearInterval(me.timer);
}
var fun = function(){
if(me.pause==false||me.close){
var x = me.left;
var y = 0;
var width = me.width;
var height = 0;
if(me.offset>0){
height = me.offset;
}
y = me.bottom - height;
if(y>=me.bottom){
window.clearInterval(me.timer);
me.Pop.hide();
} else {
me.offset = me.offset - me.step;
}
me.Pop.show(x,y,width,height);
}
}
this.timer = window.setInterval(fun,this.speed)
}
}
CLASS_MSN_MESSAGE.prototype.onunload = function() {
return true;
}
CLASS_MSN_MESSAGE.prototype.oncommand = function(){
this.hide();
}
CLASS_MSN_MESSAGE.prototype.show = function(){
var oPopup = window.createPopup(); //IE5.5+
this.Pop = oPopup;
var w = this.width;
var h = this.height;
var str = "<DIV style='BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: 99999; LEFT: 0px; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: " + w + "px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: " + h + "px; BACKGROUND-COLOR: #c9d3f3'>"
str += "<TABLE style='BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid' cellSpacing=0 cellPadding=0 width='100%' bgColor=#cfdef4 border=0>"
str += "<TR>"
str += "<TD style='FONT-SIZE: 12px;COLOR: #0f2c8c' width=30 height=24></TD>"
str += "<TD style='PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px' vAlign=center width='100%'>" + this.caption + "</TD>"
str += "<TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' vAlign=center align=right width=19>"
str += "<SPAN title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' id='btSysClose' >×</SPAN></TD>"
str += "</TR>"
str += "<TR>"
str += "<TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=3 height=" + (h-28) + ">"
str += "<DIV style='BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; PADDING-BOTTOM: 8px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 8px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%'>" + this.title + "<BR><BR>"
str += "<DIV style='WORD-BREAK: break-all' align=left><A href='"+this.href+"?id="+this.id+"' hidefocus=false id='btCommand'><FONT color=#ff0000>" + this.message + "</FONT></A></DIV>"
str += "</DIV>"
str += "</TD>"
str += "</TR>"
str += "</TABLE>"
str += "</DIV>"
oPopup.document.body.innerHTML = str;
this.offset = 0;
var me = this;
oPopup.document.body.onmouseover = function(){me.pause=true;}
oPopup.document.body.onmouseout = function(){me.pause=false;}
var fun = function(){
var x = me.left;
var y = 0;
var width = me.width;
var height = me.height;
if(me.offset>me.height){
height = me.height;
} else {
height = me.offset;
}
y = me.bottom - me.offset;
if(y<=me.top){
me.timeout--;
if(me.timeout==0){
window.clearInterval(me.timer);
if(me.autoHide){
me.hide();
}
}
} else {
me.offset = me.offset + me.step;
}
me.Pop.show(x,y,width,height);
}
this.timer = window.setInterval(fun,this.speed)
var btClose = oPopup.document.getElementById("btSysClose");
btClose.onclick = function(){
me.close = true;
me.hide();
}
var btCommand = oPopup.document.getElementById("btCommand");
btCommand.onclick = function(){
me.oncommand();
window.open(btCommand.href);
}
}
CLASS_MSN_MESSAGE.prototype.speed = function(s){
var t = 20;
try {
t = praseInt(s);
} catch(e){}
this.speed = t;
}
CLASS_MSN_MESSAGE.prototype.step = function(s){
var t = 1;
try {
t = praseInt(s);
} catch(e){}
this.step = t;
}
CLASS_MSN_MESSAGE.prototype.rect = function(left,right,top,bottom){
try {
this.left = left !=null?left:this.right-this.width;
this.right = right !=null?right:this.left +this.width;
this.bottom = bottom!=null?(bottom>screen.height?screen.height:bottom):screen.height;
this.top = top !=null?top:this.bottom - this.height;
} catch(e){}
}

alonely Blog

QQ、淘宝旺旺接口调用

更多相关文章

实用的小日历控件

更多相关文章

JSP自定义标签库之Select下拉框

更多相关文章

Select multiple的添加、删除、与提交

更多相关文章

用DWR验证前台字符串是否在后台的字符串中

更多相关文章

JavaScript动态添加行与列

更多相关文章

用JBoss IDE for Eclipse配置JBoss服务时错误解决

更多相关文章

JavaScript的全选、反选与ASP的后台取值

更多相关文章

类似于QQ弹出窗口的JavaScript代码

更多相关文章