Home » jQuery 外掛

[jQ]Emotions jQuery Plugin 1.0

[ 日期： | 瀏覽：4,210 | 迴響：1 ]
範例 1
請協助我把這個效果加到我的網站 (只要 1,000 元)
沒錯!只要 1,000 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



Emotions jQuery Plugin 可以把含有指定的表情符號的文字內容轉換成對應的表情圖片，讓您的文章或是各種內容能更生動有趣！

套件名稱：Emotions jQuery Plugin
套件版本：1.0
作者網站：http://www.9lessons.info/2012/04/facebook-style-emotions-jquery-plugin.html
套件網址：N/A
發佈日期：2012-04-22
檔案大小：1.54 KB
檔案下載：jquery.emotions.js
表情圖片：emotions-fb.zip

參數選項說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

a(選填)
描述： 表情圖片所在的資料夾
預設值： "emotions-fb/"
 
b(選填)
描述： 表情圖片的檔案名稱
預設值： new Array("angel","colonthree","confused","cry","devil","frown","gasp","glasses","grin","grumpy","heart","kiki","kiss","pacman","smile","squint","sunglasses","tongue","unsure","upset","wink")
 
s(選填)
描述： 表情符號
預設值： new Array("o:)",":3","o.O",":'(","3:)",":(",":O","8)",":D",">:(","<3","^_^",":*",":v",":)","-_-","8|",":p",":/",">:O",";)")
 
c(選填)
描述： 表情圖片的副檔名
預設值： "gif"

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定的元素中的文字轉換成 Emotions 效果
$(selector).emotions(options);

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.emotions.js"></script>
<style type="text/css">
	body {
		background-color: #dedede;}
	}
	#q {
		font-size: 12px;
	}
	#Sample p{
		background-color: #fff;
		margin: 5px 0px 5px 0px;
		padding: 5px;
		border-radius: 5px;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 把 #showHere 中的文字轉換成 Emotions 效果
		$('#showHere').emotions();
 
		// 當按下 Post 鈕厚
		$('#submit_button').click(function(){
			// 先取得 #sample_area 的內容
			var sample = $('#sample_area').val();
 
			// 產生 p 段落並插入到 #showHere 中, p 段落的內容來自 #sample_area 的內容
			$('#showHere').prepend('<p>' + sample + '</p>').emotions();
			// 清空 #sample_area 的內容並讓它取得焦點
			$('#sample_area').val('').focus();
		});
 
		// 讓 #sample_area 取得焦點
		$('#sample_area').focus();
	});
</script>
 
<body>
	<div id="Sample">
		<form name="sample_form" id="sample_form" method="post" action="">
    		<textarea name="sample_area" id="sample_area" cols="50"></textarea><br/>
			<button type="button" name="sample_submit" id="submit_button" value="Submit">Post</button>
			<div id="q">Emotions: " o:) ", " :3 ", " o.O ", " :'( ", " 3:) ", " :( ", " :O ", " 8) ", " :D ", " >:( ", " <3 ", " ^_^ ", " :* ", " :v ", " :) ", " -_- ", " 8| ", " :p "," :/ ", " >:O ", " ;) "</div>
		</form>
 
		<div id="showHere">
 
			<p>試著用上面列出來的 Emotions 來留言喔! 3:)</p>
 
			<p>Make People fall in love with your IDEAS :) </p>
 
			<p>I love you <3 </p>
 
		</div>
	</div>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

1 筆針對 [jQ]Emotions jQuery Plugin 1.0 的迴響

  1. if(repls.indexOf(o.s[j]) || repls.indexOf(encoded[j]))
    這個判斷怪怪的，我有嘗試引用來做HTML editor的表情符號。
    但是一直有bug，有的字符會catch不到，後來我回頭來debug才看到這邊應該
    是原作者想要用true or false去判斷字串裡面有沒有相符合的字符吧？

    但是indexOf似乎是沒有符合回傳-1，有符合回傳所在位置。
    所以這個迴圈會一直多跑，造成一些異常吧。
    所以這邊我是修成
    if(repls.indexOf(o.s[j])!=-1 || repls.indexOf(encoded[j])!=-1)
    不知道這樣有沒有對。

發表迴響