码迷,mamicode.com
首页 > Web开发 > 详细

[PHP pro留言板相关②]

时间:2015-10-30 12:52:08      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:

第三站:为留言板添加表情功能

本来想的是要不就直接用现成的HTML编辑器:可视化HTML编辑器开源软件

连图片上传都可以不用做……但是,算了还是自己做吧。

各种搜发现了一个很符合要求的代码:jquery实现文本框插入表情的特效代码

一直做jquery就像前端的感觉= =。index.html真的很简洁。css布局也超棒,应该学着点吧……

<body>
<h3>文本框表情插件,转载于互联网</h3>
<h4>整理网站http://www.ablanxue.com</h4>
<!--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>
</body>

整个body就这么点……好好。

[PHP pro留言板相关②]

标签:

原文地址:http://my.oschina.net/sikou/blog/523882

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!