利用jQuery实现网站评论文本框表情选择代码



48 189 64



特效描述:利用jQuery实现 网站评论 文本框 表情选择,利用jQuery实现网站评论文本框表情选择代码

代码结构

1. 引入CSS

<link href="css/smohan.face.css" type="text/css" rel="stylesheet">

2. 引入JS

<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/smohan.face.js" charset="utf-8"></script>

3. HTML代码

<h3>文本框评论表情插件</h3>
<!--DEMO-->
<!--表情盒子-->
<div id="Smohan_FaceBox">
   <textarea name="text" id="Smohan_text" class="smohan_text"></textarea>
   <p>
   <a href="javascript:void(0)" class="face" title="表情"></a>
   <button class="button" id="Smohan_Showface">显示表情</button>
   </p>
</div>
<!--/表情盒子-->
<!--解析表情-->
<div id="Zones"></div>
<!--/DEMO-->
<script type="text/javascript">
$(function (){
	$("a.face").smohanfacebox({
		Event : "click",	//触发事件	
		divid : "Smohan_FaceBox", //外层DIV ID
		textid : "Smohan_text" //文本框 ID
	});
	//解析表情  $('#Zones').replaceface($('#Zones').html());
});
//Demo测试
$('#Smohan_Showface').click(function() {
	 $('#Zones').fadeIn(360);
	 $('#Zones').html($('#Smohan_text').val());
	 $('#Zones').replaceface($('#Zones').html());//替换表情
	});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 滑动星星打分 切换按钮 表单 表单美化 表单插件 表单美化插件 其他 文本框 text文本框 Tooltip工具提示框 表情 qq表情 表情插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到