第三站:为留言板添加表情功能
本来想的是要不就直接用现成的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就这么点……好好。
时间: 2024-10-12 18:59:49