Znalazłem stronę z darmowym kodem do podmiany emotikon na obrazki tych emotikon:
http://users.dcc.uchile.cl/~skreft/emoticon/?
Przerobiłem tak by móc z tego kodu korzystać. Na przykładzie w html, podmieniłem ten kod i działał. Przykład wygląda następująco:
<script type="text/javascript" src="jquery.emoticons.js"></script> <script type="text/javascript"> $(document).ready(function(){
$(".posted").emoticons();
});
<style type="text/css" media=screen> <!--
.emoticonimg{
/*border: 1px solid #000000;*/
vertical-align:bottom;
}
-->
<p class="posted">To replace the text of emoticons just make the container of class="posted". Pretty easy, right? :)
<p> A zip file containing all files can be downloaded from
<a href="emoticon.zip">here
<a/>.
<h2 class="posted">Hi there!;)
</h2> I think you are a (M). This content is inside a div.
<p>Here are all the emoticons and ways of writing them:
<br /> :-) :) =] =) :-( =( :[ :
< ;-) ;) ;] *) :D =D XD BD 8D xD :O =O :-O =-O (6) (A) :'( :'-( :| :o) 8) 8-) (K) :-* (M)<br /> They can even be together, no need of whitespaces inbetween: :)(M)
<p class="posted">Here are all the emoticons and ways of writing them:
<br /> :-) :) =] =) :-( =( :[ :
< ;-) ;) ;] *) :D =D XD BD 8D xD :O =O :-O =-O (6) (A) :'( :'-( :| :o) 8) 8-) (K) :-* (M)<br /> They can even be together, no need of whitespaces inbetween: :)(M)
The following button is an input of type submit, which does not hold any html inside, so even if we says it is of class posted, we are not doing any harm.
<input type="submit" value="Hi:)" class="posted" /> Bug B0001 is caused due to the simple(naive) replacement method.
There should be a traversal of the DOM or a regular expression replacement in order to get better results, but that would be rather slow.
See the source code to understand the problem.
<li>B0001: Emoticons in text only elements(image alternate text, input button, etc), will be replaced by an ugly html code
</li> <p class="posted">This is a text with emoticons :), and an image with alterenate text inside
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" alt="No image ;)" />. The end.
</p>
Po czym dodałem do swojej strony kod. I o dziwo nie działa. A oto on:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript" src="jquery.emoticons.js"></script>
<script src="js/chat_limit.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".posted").emoticons();
});
</script>
</head>
<div style="height: 100%; width: 100%; background-color: #fff"><iframe name="ramka" style="height: 90%" id="NEWSY" src="chat_include.php"></iframe>
<form name="formularz" action="chat_send.php" method="post">
<input onkeyup="SignLimit(this,250);" id="tresc" type="textarea" class="text" name="tresc" style="width: 98.5%" placeholder="Treść postu...">
<p class="center" style="margin-left: 10px"><table border="0" bordercolor="" style="background-color:" width="98.5%" cellpadding="0" cellspacing="0" style="margin-left: 10px;">
<tr>
<td align="left">
<a onclick="document.getElementById('tresc').value+='^^'">
<img src="emotes/^^.gif" style="border:0px;" />
</a>
<a onclick="document.getElementById('tresc').value+=':('">
<img src="emotes/=(.gif" style="border:0px;" />
</a>
<a onclick="document.getElementById('tresc').value+=':)'">
<img src="emotes/=).gif" style="border:0px;" />
</a>
<a onclick="document.getElementById('tresc').value+=':D'">
<img src="emotes/=D.gif" style="border:0px;" />
</a>
<a onclick="document.getElementById('tresc').value+=':P'">
<img src="emotes/=P.gif" style="border:0px;" />
</a>
<a onclick="document.getElementById('tresc').value+=':]'">
<img src="emotes/evil_smile.gif" style="border:0px;" />
</a>
<a onclick="document.getElementById('tresc').value+=':>'">
<img src="emotes/have_a_nice_day.gif" style="border:0px;" />
</a>
<a onclick="document.getElementById('tresc').value+='o.o'">
<img src="emotes/O.o.gif" style="border:0px;" />
</a>
<a onclick="document.getElementById('tresc').value+=':O'">
<img src="emotes/oh_noes.gif" style="border:0px;" />
</a>
<a onclick="document.getElementById('tresc').value+=':{'">
<img src="emotes/owie.gif" style="border:0px;" />
</a>
<a onclick="document.getElementById('tresc').value+=':/'">
<img src="emotes/serious.gif" style="border:0px;" />
</a>
<a onclick="document.getElementById('tresc').value+=':c'">
<img src="emotes/shame.gif" style="border:0px;" />
</a>
<a onclick="document.getElementById('tresc').value+='T.T'">
<img src="emotes/T.T.gif" style="border:0px;" />
</a>
<a onclick="document.getElementById('tresc').value+='WTF'">
<img src="emotes/WTF.gif" style="border:0px;" />
</a>
<a onclick="document.getElementById('tresc').value+='xD'">
<img src="emotes/XD.gif" style="border:0px;" />
</a>
</td>
<td align="right"><span><form><input class="posted" type="checkbox" value="refresh" id="refresh"></form> <p class="posted">XD</p></span> <span id="counter">0/250</span> <button class="button default">Wyślij</button></td>
</tr>
</table></p>
</form>
</div>
<script language="java_script" type="text/java_script">
<!--
function licz() {
document.form.text.value = document.form.poletekstowe.value.length
}
//-->
</script>
I co ja robię nie ta, że u mnie nie działa, na na przykładzie i owszem?
[HTML][PHP][JavaScript]Podmiana emotikon
8.07.2012, 15:30:29
