Vlastní ICQ pager ve webové stránce
V článku „Vlastní indikátor ICQ“ jsme si ukázali, jak přidat do svých stránek vlastní indikátor. V tomto článku se dozvíte, jak do stránky přidat ICQ pager, která bude mít vzhled velmi podobný originálnímu ICQ a umožní zaslat z vaší stránky zprávu přímo do vašeho ICQ.
Na pager se můžete podívat zde. Funkční formulář (jeho pole a adresu obslužného skriptu) vezmete z originálního pageru na stránkách ICQ. Vytvořte tabulku, které dejte styl systémových barev (tabulka převezme barvy, které má uživatel nastavené ve svém systému – umí IE5+, Opera 5+). Rozmístění položek formuláře zvolte tak, aby co nejvíce připomínalo otevřené okno rozepsané zprávy v ICQ.
Jako doplněk přidejte obrázek statutu uživatele a počítadlo napsaných znaků. Kromě tlačítka pro odeslání přidejte ještě zvláštní tlačítko pro přidání uživatele do Contact listu. Jelikož se po odeslání zprávy zobrazí stránka ze serveru ICQ, jejíž šířka je větší, než okénko pro psaní zprávy, doplnil jsem ještě automatické zvětšení okna tak, aby v něm byl vidět celý výsledek po odeslání zprávy (tuto část možná někdo vynechá, nebo nechá větší i okno pro psaní zprávy). Také okno psaní zprávy si automaticky hlídá velikost – když třeba někdo stiskne po odeslání zprávy backspace, okno pro psaní zprávy by zůstalo zvětšené. Hodnoty velikostí oken jsou určeny zkusmo a nejsou samozřejmě povinné.
<html>
<head>
<title>ICQ – poslat zprávu</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<link REL="stylesheet" TYPE="text/CSS" MEDIA="screen" HREF="icqpager.css">
</head>
<body style="background-color: appworkspace" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="window.focus(); window.resizeTo(492,348);" scroll="no"> // automatické hlídání velikosti okna
<script type="text/javascript" language="JavaScript">
<!–
function c(box) { // funkce pro počítání napsaných znaků zprávy
smslength = box.value.length;
if (smslength > 449) {
box.value = box.value.substring(0,449);
smslength = box.value.length;
}
else {
charl = 450 – smslength;
}
document.icqform.charin.value = smslength;
document.icqform.charle.value = charl;
}
//–>
</script>
<table cellspacing="0" border="0" cellpadding="0" width="480">
<tr>
<td width="1" style="background-color: threedhighlight"></td>
<td height="1" style="background-color: threedhighlight"></td>
<td width="1" style="background-color: threedshadow"></td>
</tr>
<tr>
<td width="1" style="background-color: threedhighlight">
<td valign="top" class="dhtmed-MENU">
<table border="0" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td align="left">
<fieldset>
<legend>poslat zprávu<br></legend>
<table width="100%">
<tr>
<td><b>ICQ# : </b><span class="dhtmed-O"> 22635022
</span> <b>Jméno: </b><span class="dhtmed-O"> Jiří Skočdopole </span><b>EMail: </b><span class="dhtmed-O"> houba@hotmail.com
</span> </td>
<td align="right"> <img src="info.gif" width="18" height="18" border="0" align="absmiddle" alt="Není-li ICQ OnLine, zpráva bude doručena ihned, jakmile se uživatel připojí k síti"></td>
</tr>
</table>
</fieldset>
</td>
</tr>
<form name="icqform" action="http://wwp.icq.com/scripts/WWPMsg.dll" method="post">
<tr>
<td align="left" class="dhtmed-MENU" nowrap>
<input type="hidden" name="to" value="22635022"><input type="hidden" name="from" value="DJmix">
Předmět: <input type="text" class="inputs" size="30" maxlength="40" name="subject">
Tvůj email: <input type="text" size="25" class="inputs" maxlength="40" name="fromemail" value="@">
</td>
</tr>
<tr>
<td>
Napiš zprávu:
Znaků: <input type="text" size="4" class="bttn" id="charin" value="0" readonly>Zbývá: <input type="text" size="4" id="charle" class="bttn" value="450" readonly>
<img src="http://wwp.icq.com/scripts/online.dll?icq=22635022&img=7" class="dhtmed-O" height="15" border="0" align="absmiddle"></td>
</tr>
<tr>
<td>
<textarea name="body" rows="10" cols="56" onchange="c(this.form.body)" onkeyup="c(this.form.body)" onmousemove="c(this.form.body)" wrap="virtual" scroll="auto"></textarea></td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td> <button type="button" class="bttn" onclick="location.href=’http://wwp.icq.com/scripts/search.dll?to=22635022’">Přidat kontakt</button></td>
<td align="right"><input type="submit" value=" Odeslat " class="bttn" onclick="window.resizeTo(650,346);">
<img src="icqanim.gif" width="32" height="32" border="0" class="dhtmed-O" align="absmiddle"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="1" style="background-color: threedshadow"></td>
</tr>
<tr>
<td width="1" style="background-color: threedhighlight"></td><td height="1" style="background-color: threedshadow"></td>
<td width="1" style="background-color: threedshadow"></td>
</tr>
</table>
</body>
Součástí formuláře je i soubor stylů icqpager.css, který je nutný k vytvoření plastických okrajů tabulky a políček s číslem ICQ, adresou a jménem uživatele.
.dhtmed-MENU
{
BACKGROUND-COLOR: menu;
}
.dhtmed-O
{
BORDER-BOTTOM: buttonshadow 1px solid;
BORDER-LEFT: buttonhighlight 1px solid;
BORDER-RIGHT: buttonshadow 1px solid;
BORDER-TOP: buttonhighlight 1px solid;
MARGIN-LEFT: 0px;
MARGIN-RIGHT: 0px
}
.dhtmed-V
{
MARGIN-LEFT: 1px;
MARGIN-RIGHT: 1px;
MARGIN-TOP: 2px;
VISIBILITY: visible
}
.bttn {background-color: buttonface; font-family:MS Sans Serif; font-size:11px;}
.inputs {background-color: window; font-family:MS Sans Serif; font-size:11px;}
td {font-family: MS Sans Serif; font-size: 12px;}
Součástí formuláře je i soubor stylů icqpager.css, který je nutný k vytvoření plastických okrajů tabulky a políček s číslem ICQ, adresou a jménem uživatele.
.dhtmed-MENU
{
BACKGROUND-COLOR: menu;
}
.dhtmed-O
{
BORDER-BOTTOM: buttonshadow 1px solid;
BORDER-LEFT: buttonhighlight 1px solid;
BORDER-RIGHT: buttonshadow 1px solid;
BORDER-TOP: buttonhighlight 1px solid;
MARGIN-LEFT: 0px;
MARGIN-RIGHT: 0px
}
.dhtmed-V
{
MARGIN-LEFT: 1px;
MARGIN-RIGHT: 1px;
MARGIN-TOP: 2px;
VISIBILITY: visible
}
.bttn {background-color: buttonface; font-family:MS Sans Serif; font-size:11px;}
.inputs {background-color: window; font-family:MS Sans Serif; font-size:11px;}
td {font-family: MS Sans Serif; font-size: 12px;}
Nakonec si ještě ukážeme, jak by měl vypadat v naší stránce odkaz, kterým se bude ICQ Pager aktivovat.
<a href="icqpager.htm target="icqpager" onClick="window.open(‚icqpager.htm‘,’icqpager‘,’width=480,height=317,menubar=no,
scrollbars=no,resizable=yes,location=no,status=no‘);return false;">Můj ICQ Pager</a>
A ještě perlička na závěr – pokud byste chtěli zpřístupnit přímo ze své stránky zvláštní webové ICQ, obdobným převzetím části kódu, jako jsem již zmínil, získáte následující kód:
<script language="JavaScript">
<!–
function NewWin() {
var leftpos = (screen.availWidth – 200)-40;
resiz = (navigator.appName=="Netscape") ? 0 : 1;
window.open("http://lite.icq.com/icqlite/web/0,,,00.html", "TOFI","width=177,height=446,top=40,left="+leftpos+",
directories=no,location=no,menubar=no,scroll=no,status=no,
titlebar=no,toolbar=no,resizable="+resiz+"");
}
// –>
</script>
<a href="javascript:NewWin()">ICQ</a>
Funkce uvedeného formuláře pro ICQ pager je závislá na funkci skriptu serveru web.icq.com – pokud bude jeho funkce změněna, bude nutné formulář upravit. S použitím ASP nebo PHP lze tento ICQ Pager naprogramovat jako multi-uživatelský. Číslo ICQ, jméno uživatele a jeho email tak nemusí být ve formuláři napevno, ale pomocí skriptingu je možné tyto hodnoty přebírat z parametrů zadávaných do URL. Aby vám zprávy z Pageru byly doručovány, musíte je mít ve svém ICQ povoleny – jinak se zpráva pochopitelně nedoručí. Bohužel, různé klony ICQ a webové ICQ neumějí příjímat tyto zprávy. ICQ pager si můžete stáhnout zde.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
