效果图如下:
技术要点：
1。因为 textarea里面不能放图片，所以和新浪的做法一样，选用iframe放内容，然后隐藏一个 textarea用于提交。
2 。JQqery tab 插件的使用（文盲都会）
先引用这三个：
复制代码 代码如下:
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
然后：
$(function() {
$("#tabs").tabs();
});
3。 让iframe可编辑
window.frames["iframe1"].document.designMode='on';
4。 打开简易窗体
var newwindow = window.open("tab.htm",'_blank', toolbars=0,resizable=1);
5。 iframe里执行父窗体的方法
window.opener.XXX(xxx);
其实也就三个页面，不愿下载的直接复制粘贴，拿去就能用。大家有什么好的想法或创意欢迎讨论。
复制代码 代码如下:
<html>
<head>
<title>插入表情</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
img
{
cursor:pointer;
}
</style>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<script language="javascript">
function SetEmotion(e)
{
window.opener.InsertEmotion(e.childNodes[0].src);
window.close();
}
</script>
<div>
<div>
<ul>
<li><a href="#tabs-1">种类一</a></li>
<li><a href="#tabs-2">种类二</a></li>
<li><a href="#tabs-3">种类三</a></li>
</ul>
<div>
<table>
<tr>
<td><div><img src='https://www.jb51.net/upload/201007/20100701164928735.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165013458.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165014385.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165016991.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165016263.gif'></div></td>
</tr><tr>
<td><div><img src='https://www.jb51.net/upload/201007/20100701165016891.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165016175.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165016747.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165016337.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165018905.gif'></div></td>
</tr><tr>
<td><div><img src='https://www.jb51.net/upload/201007/20100701165018628.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165018279.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165018245.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165018520.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165019697.gif'></div></td>
</tr><tr>
<td><div><img src='https://www.jb51.net/upload/201007/20100701165019381.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165019848.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165019645.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165019345.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165019360.gif'></div></td>
</tr><tr>
<td><div><img src='https://www.jb51.net/upload/201007/20100701165019244.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165019883.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165019553.gif'></div></td><td></td><td></td><td></td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td><div><img src='https://www.jb51.net/upload/201007/20100701165020968.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165020329.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165020557.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165020895.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165020713.gif'></div></td>
</tr><tr>
<td><div><img src='https://www.jb51.net/upload/201007/20100701165020182.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165020279.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165020100.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165020694.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165020694.gif'></div></td>
</tr><tr>
<td><div><img src='https://www.jb51.net/upload/201007/20100701165020837.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165020704.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165020673.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165020780.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165020895.gif'></div></td>
</tr><tr>
<td><div><img src='https://www.jb51.net/upload/201007/20100701165020297.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165020751.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021306.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021575.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021416.gif'></div></td>
</tr><tr>
<td><div><img src='https://www.jb51.net/upload/201007/20100701165021685.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021474.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021686.gif'></div></td><td></td><td></td><td></td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td><div><img src='https://www.jb51.net/upload/201007/20100701165021222.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021322.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021725.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021584.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021614.gif'></div></td>
</tr><tr>
<td><div><img src='https://www.jb51.net/upload/201007/20100701165021750.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021572.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021641.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021603.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021771.gif'></div></td>
</tr><tr>
<td><div><img src='https://www.jb51.net/upload/201007/20100701165021702.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021925.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021484.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021419.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021219.gif'></div></td>
</tr><tr>
<td><div><img src='https://www.jb51.net/upload/201007/20100701165021144.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021352.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165021167.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165022241.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165022772.gif'></div></td>
</tr><tr>
<td><div><img src='https://www.jb51.net/upload/201007/20100701165022756.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165022156.gif'></div></td><td><div><img src='https://www.jb51.net/upload/201007/20100701165022986.gif'></div></td><td></td><td></td><td></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
复制代码 代码如下: