标签:
本来想的是要不就直接用现成的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就这么点……好好。
标签:
原文地址:http://my.oschina.net/sikou/blog/523882