[jQuery Plugin] CSS Emoticon

[kalenv]

Nguồn : [You must be registered and logged in to see this link.]

Plugin này cho phép biến văn bản thành những emotion dễ thương theo phong cách CSS3 - hoàn toàn không dùng hình ảnh
Do Sử dụng những thuộc tính transform, border-radius, box-shadow, gradient, và transition (CSS3)
nên Plugin này chạy tốt trên FireFox, Chrome, Safari, và Opera, ... Hiển thị không tốt trên IE6, IE7 (vì vậy các bạn đừng sử dụng)

Demo:

[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this link.]

Cách áp dụng vào Forumotion :

1. Punbb hoặc phpBB2 : Chèn vào temp. overall_header hoặc viewtopic_body. nếu sử dụng skin theo cấu trúc mặc định (nghĩa là không phải skin rip) thì có thể chèn vào widget mới.
   
2. phpBB3 hoặc Invision : Chèn vào widget.

Code cho mỗi phiên bản Forumotion:

• phpbb2 :

Code:

<link href="http://www.alfajango.com/stylesheets/jquery.cssemoticons.css" rel="stylesheet" media="all" type="text/css" />
<script type="text/javascript" src="http://www.alfajango.com/javascripts/jquery.cssemoticons.min.js"></script>
<script type="text/javascript">jQuery(document).ready(function(){ jQuery('.postbody').emoticonize();})</script>
<style type="text/css">.css-emoticon {font-size:22px!important}</style>

• punbb :

Code:

<link href="http://www.alfajango.com/stylesheets/jquery.cssemoticons.css" rel="stylesheet" media="all" type="text/css" />
<script type="text/javascript" src="http://www.alfajango.com/javascripts/jquery.cssemoticons.min.js"></script>
<script type="text/javascript">jQuery(document).ready(function(){ jQuery('.entry-content').emoticonize();})</script>
<style type="text/css">.css-emoticon {font-size:22px!important}</style>

• phpbb3 :

Code:

<link href="http://www.alfajango.com/stylesheets/jquery.cssemoticons.css" rel="stylesheet" media="all" type="text/css" />
<script type="text/javascript" src="http://www.alfajango.com/javascripts/jquery.cssemoticons.min.js"></script>
<script type="text/javascript">jQuery(document).ready(function(){ jQuery('.content').emoticonize();})</script>
<style type="text/css">.css-emoticon {font-size:22px!important}</style>

• invision :

Code:

<link href="http://www.alfajango.com/stylesheets/jquery.cssemoticons.css" rel="stylesheet" media="all" type="text/css" />
<script type="text/javascript" src="http://www.alfajango.com/javascripts/jquery.cssemoticons.min.js"></script>
<script type="text/javascript">jQuery(document).ready(function(){ jQuery('.entry-content').emoticonize();})</script>
<style type="text/css">.css-emoticon {font-size:22px!important}</style>

* Trong code sử dụng 2 file (tổng kích cỡ 2 file trên 10KB):
[You must be registered and logged in to see this link.]
* font-size:22px trong code là kích cỡ của emoticon. tăng giảm tùy ý.

---

Nhắc lại cách tạo widget mới :

• Vào ACP > Modules > Forum widgets management:

Click [You must be registered and logged in to see this image.] Create a widget

• Điền đầy đủ thông tin và "Chấp nhận"

[You must be registered and logged in to see this image.]

• Vào thẻ Personal widgets kéo thả widget vừa tạo để sử dụng

[You must be registered and logged in to see this image.]

Tut by Việt K

[Lùn Lì Lợm]

Demo ?

[handsomevip007]

Demo ?

Mình là mình thấy có Demo đó

[baoden.mango]

ko hiểu lắm về cái demo này

add zo rồi mà ko thấy thay đổi gì ?

[handsomevip007]

Là khi gõ kí tự vui dạng như :) thì nó tự động sẽ biến hành cái hình tròn màu vàng giống emo, nhưng khi rê chuột đến thì nó vẫn là một kí tự bình thường

[Kent™]

Trả thấy gì ^.^ ....
[ Kí tự là gì ?

[baoden.mango]

đã chèn rồi mà sao không có công hiệu

chèn zo header

[You must be registered and logged in to see this link.]

[Việt]

Code:

:-) :) :o) :c) :^) :-D :-( :-9 ;-) :-P :-p :-b :-O :-/ :-X :-# :'( B-) 8-) :-\ ;*( :-* :] :> =] =) 8) :} :D 8D XD xD =D :( :< :[ :{ =( ;) ;] ;D :P :p =P =p :b  :O 8O :/ =/ :S :# :X B) O:)
;( >:) >;) >:( O_o O_O o_o 0_o T_T ^_^ ?-) [+=..]

Thử viết 1 topic có nội dung như trên xem ?

[Kent™]

Code:

:-) :) :o) :c) :^) :-D :-( :-9 ;-) :-P :-p :-b :-O :-/ :-X :-# :'( B-) 8-) :-\ ;*( :-* :] :> =] =) 8) :} :D 8D XD xD =D :( :< :[ :{ =( ;) ;] ;D :P :p =P =p :b  :O 8O :/ =/ :S :# :X B) O:)
;( >:) >;) >:( O_o O_O o_o 0_o T_T ^_^ ?-) [+=..]

Thử viết 1 topic có nội dung như trên xem ?

Ko có gì cả anh VK ơi ?

Code:

http://xclub11o2.forum.st/t143-topic#281

[baoden.mango]

Được rồi mà có cái được có cái không

[You must be registered and logged in to see this link.]

[nttmai]

Cho vào temp là nó hoạt động ngay,nếu đã trùng với smile add trước đó thì nó sẽ ko hiện

[Sponsored content]