jquery.qqFace.js 页面标签/jquery

// QQ表情插件

(function($){  

$.fn.qqFace = function(options){

var defaults = {

id : 'facebox',

path : 'face/',

assign : 'content',

tip : ''

};

var option = $.extend(defaults, options);

var assign = $('#'+option.assign);

var id = option.id;

var path = option.path;

var tip = option.tip;

//根据不同应用替换为不同的数据

var arr=['微笑','撇嘴','色','发呆','大哭','害羞','闭嘴','睡','流泪','尴尬','发怒','调皮','呲牙','惊讶','难过'

         ,'冷汗','抓狂','吐','偷笑','可爱','白眼','傲慢','饥饿','困','惊恐','流汗','憨笑','大兵','奋斗','咒骂'

         ,'疑问','嘘','晕','疯了','衰','敲打','再见','擦汗','抠鼻','糗大了','坏笑','左哼哼','右哼哼','哈欠','鄙视'

         ,'委屈','快哭了','阴险','亲亲','吓','可怜','拥抱','月亮','太阳','炸弹','骷髅','菜刀','猪头','西瓜','咖啡'];

//,'饭','爱心','强','弱','握手','胜利','抱拳','勾引',''

if(assign.length<=0){

alert('缺少表情赋值对象。');

return false;

}

$(this).click(function(e){

var strFace, labFace;

if($('#'+id).length<=0){

strFace = '<div id="'+id+'" style="position:absolute;display:none;z-index:1000;" class="qqFace">' +

  '<table border="0" cellspacing="0" cellpadding="0"><tr>';

for(var i=1; i<=60; i++){

labFace = '['+arr[i-1]+']';

strFace += '<td><img src="'+path+i+'.gif" onclick="$(\'#'+option.assign+'\').setCaret();$(\'#'+option.assign+'\').insertAtCaret(\'' + labFace + '\');" /></td>';

if( i % 15 == 0 ) strFace += '</tr><tr>';

}

strFace += '</tr></table></div>';

}

$(this).parent().append(strFace);

var offset = $(this).position();

var top = offset.top + $(this).outerHeight();

$('#'+id).css('top',top);

$('#'+id).css('left',offset.left);

$('#'+id).show();

e.stopPropagation();

});

$(document).click(function(){

$('#'+id).hide();

$('#'+id).remove();

});

};

})(jQuery);

jQuery.extend({ 

unselectContents: function(){ 

if(window.getSelection) 

window.getSelection().removeAllRanges(); 

else if(document.selection) 

document.selection.empty(); 

} 

}); 

jQuery.fn.extend({ 

selectContents: function(){ 

$(this).each(function(i){ 

var node = this; 

var selection, range, doc, win; 

if ((doc = node.ownerDocument) && (win = doc.defaultView) && typeof win.getSelection != 'undefined' && typeof doc.createRange != 'undefined' && (selection = window.getSelection()) && typeof selection.removeAllRanges != 'undefined'){ 

range = doc.createRange(); 

range.selectNode(node); 

if(i == 0){ 

selection.removeAllRanges(); 

} 

selection.addRange(range); 

} else if (document.body && typeof document.body.createTextRange != 'undefined' && (range = document.body.createTextRange())){ 

range.moveToElementText(node); 

range.select(); 

} 

}); 

}, 

setCaret: function(){ 

if(!$.browser.msie) return; 

var initSetCaret = function(){ 

var textObj = $(this).get(0); 

textObj.caretPos = document.selection.createRange().duplicate(); 

}; 

$(this).click(initSetCaret).select(initSetCaret).keyup(initSetCaret); 

}, 

insertAtCaret: function(textFeildValue){ 

var textObj = $(this).get(0); 

if(document.all && textObj.createTextRange && textObj.caretPos){ 

var caretPos=textObj.caretPos; 

caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ? 

textFeildValue+'' : textFeildValue; 

} else if(textObj.setSelectionRange){ 

var rangeStart=textObj.selectionStart; 

var rangeEnd=textObj.selectionEnd; 

var tempStr1=textObj.value.substring(0,rangeStart); 

var tempStr2=textObj.value.substring(rangeEnd); 

textObj.value=tempStr1+textFeildValue+tempStr2; 

textObj.focus(); 

var len=textFeildValue.length; 

textObj.setSelectionRange(rangeStart+len,rangeStart+len); 

textObj.blur(); 

}else{ 

textObj.value+=textFeildValue; 

}

$(this).focus();

} 

});

//实现预览功能

var arr=['微笑','撇嘴','色','发呆','大哭','害羞','闭嘴','睡','流泪','尴尬','发怒','调皮','呲牙','惊讶','难过'

         ,'冷汗','抓狂','吐','偷笑','可爱','白眼','傲慢','饥饿','困','惊恐','流汗','憨笑','大兵','奋斗','咒骂'

         ,'疑问','嘘','晕','疯了','衰','敲打','再见','擦汗','抠鼻','糗大了','坏笑','左哼哼','右哼哼','哈欠','鄙视'

         ,'委屈','快哭了','阴险','亲亲','吓','可怜','拥抱','月亮','太阳','炸弹','骷髅','菜刀','猪头','西瓜','咖啡'];

var num=0;

//替换表情

function replace_em(str){

  str = str.replace(/\</g,'&lt;');

  str = str.replace(/\>/g,'&gt;');

  str = str.replace(/\n/g,'<br/>');

str=str.replace(/\[([\u4E00-\u9FA5]*)\]/g,function($1){

var rts = $1;

var rts2 = rts.match(/([\u4E00-\u9FA5]*)/g);

var matchstr = "";

for(var j = 0 ;j<rts2.length;j++){

if(rts2[j]!="" && rts2[j]!=null){

matchstr = rts2[j];

}

}

for(var i=0;i<=60;i++){

if(arr[i]==matchstr){

num =i+1;

break;

}

}

return '<img src="../images/qqFace/face/'+num+'.gif" border="0" />';

});

  return str;

}

//页面标签

<div id="main" style="">

 <div class="comment" style="">

<div class="com_form">

<div style="width:650px; margin-bottom:5px;">

<span id="show1"></span>

</div>

<div style="height: 30px; background-color: #F2F2F2">

<span class="emotion2">表情</span><span style="border-left-width: 100px; margin-left: 540px;">可输入300字</span>

</div>

<div style="height:250px;">

<textarea  class="input" id="content2" name="messageContent.messageText" 

style="height:230px;" readonly="readonly"><s:property value="messageContent.messageText"/></textarea>

</div>

</div>

<input id ="preview1" name="preview1" type="button" value="预览" class="delMes cur tosnsmall_btnl">

<input id ="isSave" name="sendMessage" type="submit" value="保存" class="delMes cur tosnsmall_btnl">

<input id ="isEdit" name="isEdit" type="button" value="编辑" class="delMes cur tosnsmall_btnl" style="display:none;">&nbsp;&nbsp;<span id="wrongMsg"></span>

<input type="hidden" name="messageContent.messageType" value="0">

<input type="hidden" id="currentShow" name="currentShow" value="${currentShow}" />

<input type="hidden" id ="msg" name="msg" value="${msg}" />

</div>

</div>