返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

jquery 新浪网易的评论块制作

2020-05-22 17:02:42易采站长站整理

效果图如下:

技术要点：
1。因为 textarea里面不能放图片，所以和新浪的做法一样，选用iframe放内容，然后隐藏一个 textarea用于提交。
2 。JQqery tab 插件的使用（文盲都会）
先引用这三个：

<link href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css” rel=”stylesheet” type=”text/css”/>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”></script>
<script src=”http://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=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css” rel=”stylesheet” type=”text/css”/>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”></script>
<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#tabs”).tabs();
});
</script>
</head>
<body style=”font-size:62.5%;”>
<script language=”javascript”>
function SetEmotion(e)
{
window.opener.InsertEmotion(e.childNodes[0].src);
window.close();
}
</script>
<div class=”demo”>
<div id=”tabs”>
<ul>
<li><a href=”#tabs-1″>种类一</a></li>
<li><a href=”#tabs-2″>种类二</a></li>
<li><a href=”#tabs-3″>种类三</a></li>
</ul>
<div id=”tabs-1″>
<table id=”EmoticonsTable” border=”0″>
<tr>
<td><div onclick=”SetEmotion(this)”><img src=’/upload/201007/20100701164928735.gif’></div></td><td><div onclick=”SetEmotion(this)”><img src=’/upload/201007/20100701165013458.gif’></div></td><td><div onclick=”SetEmotion(this)”><img src=’/upload/201007/20100701165014385.gif’></div></td><td><div onclick=”SetEmotion(this)”><img src=’/upload/201007/20100701165016991.gif’></div></td><td><div onclick=”SetEmotion(this)”><img src=’/upload/201007/20100701165016263.gif’></div></td>

相关文章 大家在看