首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery 新浪网易的评论块制作

Posted in Javascript onJuly 01, 2010

效果图如下:
jquery 新浪网易的评论块制作
技术要点：
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> 
</tr><tr> 
<td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165016891.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165016175.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165016747.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165016337.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165018905.gif'></div></td> 
</tr><tr> 
<td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165018628.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165018279.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165018245.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165018520.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165019697.gif'></div></td> 
</tr><tr> 
<td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165019381.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165019848.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165019645.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165019345.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165019360.gif'></div></td> 
</tr><tr> 
<td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165019244.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165019883.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165019553.gif'></div></td><td></td><td></td><td></td> 
</tr> 
</table> 
</div> 
<div id="tabs-2"> 
<table id="Table1" border="0"> 
<tr> 
<td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165020968.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165020329.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165020557.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165020895.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165020713.gif'></div></td> 
</tr><tr> 
<td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165020182.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165020279.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165020100.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165020694.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165020694.gif'></div></td> 
</tr><tr> 
<td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165020837.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165020704.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165020673.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165020780.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165020895.gif'></div></td> 
</tr><tr> 
<td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165020297.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165020751.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021306.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021575.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021416.gif'></div></td> 
</tr><tr> 
<td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021685.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021474.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021686.gif'></div></td><td></td><td></td><td></td> 
</tr> 
</table> 
</div> 
<div id="tabs-3"> 
<table id="Table2" border="0"> 
<tr> 
<td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021222.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021322.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021725.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021584.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021614.gif'></div></td> 
</tr><tr> 
<td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021750.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021572.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021641.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021603.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021771.gif'></div></td> 
</tr><tr> 
<td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021702.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021925.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021484.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021419.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021219.gif'></div></td> 
</tr><tr> 
<td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021144.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021352.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165021167.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165022241.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165022772.gif'></div></td> 
</tr><tr> 
<td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165022756.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165022156.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/upload/201007/20100701165022986.gif'></div></td><td></td><td></td><td></td> 
</tr> 
</table> 
</div> 
</div> 
</div> 
</body> 
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Untitled Page</title> 
<script type="text/javascript" language="javascript"> function xx() 
{ 
window.frames["iframe1"].document.designMode='on'; 
} 
function xxx() 
{ 
window.frames["iframe1"].document.getElementById("xxx").innerHTML+='<img title="顶" alt="顶" src="/upload/201007/20100701165022953.gif" _moz_dirty="">'; 
} 
function openTab() 
{ 
var newwindow = window.open("tab.htm",'_blank', toolbars=0,resizable=1); 
newwindow.focus(); 
} 
function InsertEmotion(content) 
{ 
document.getElementById("TextArea1").value+=content; 
window.frames["iframe1"].document.getElementById("xxx").innerHTML+='<img title="顶" alt="顶" src="'+content+'" _moz_dirty="">'; 
} 
</script> 
</head> 
<body onload="xx()"> 
<iframe frameborder="0" src="HTMLPage1.htm" style="border: 1px solid rgb(199, 199, 199); height: 158px; width: 448px; background-color: white;" id="iframe1"></iframe> 
<div> 
<textarea id="TextArea1" style="height:150px;display:none;" cols="20" rows="2"></textarea> 
<input id="Button2" type="button" value="提交" /> 
<!-- <input id="Button1" type="button" value="button" onclick="return xxx()" />--> 
<input id="Button3" type="button" value="选择表情" onclick="openTab()" /> 
</div> 
</body> 
</html>

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
p { 
* margin:0.2em auto; 
} 
body { 
margin: 0; 
scrollbar-face-color: #ffffff; 
scrollbar-highlight-color: #ffffff; 
scrollbar-shadow-color: #c0c1bb; 
scrollbar-3dlight-color: #c0c1bb; 
scrollbar-arrow-color: #c9cbb6; 
scrollbar-track-color: #f4f5f0; 
scrollbar-darkshadow-color: #ffffff; 
scrollbar-base-color: #ffffff; 
padding: 17px; 
word-wrap: break-word; 
overflow: scroll; 
overflow-x: auto; 
height: 90%; 
font-size: 12px; 
background-color:white; 
} 
body, td, textarea, input, br, div, span { 
font-family: '宋体', Verdana, Arial, Helvetica, sans-serif; 
line-height: 1.5; 
} 
img { 
border: 0; 
} 
html { 
height: 100%; 
cursor: text; 
} 
pre { 
white-space: normal; 
} 
form { 
margin: 0; 
} 
</style> 
</head> 
<body style="background-color:white;"> 
<div id="xxx"></div> 
<span id="content" style="display:none"></span> 
</body> 
</html>

6。demo 下载

jquery 新浪网易的评论块制作

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 监听textarea中按键事件
Oct 08 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
vue 中swiper的使用教程
May 22 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
vue自定义正在加载动画的例子
Nov 14 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 #Javascript
jQuery ajax cache缓存问题
Jul 01 #Javascript
javascript 实用的文字链提示框效果
Jun 30 #Javascript
一个简单的js鼠标划过切换效果
Jun 30 #Javascript
jQuery 通过事件委派一次绑定多种事件，以减少事件冗余
Jun 30 #Javascript
Jquery AJAX 用于计算点击率(统计)
Jun 30 #Javascript
基于jquery的图片懒加载js
Jun 30 #Javascript
GZIP(2) IIS7(1) innoDB(3) 复读(1) .NET Framework(2) MVCC(4) 间隙锁(2) 幻读(5) DBLink(1) 事务并发(1)
You might like
PHP产生随机字符串函数
2006/12/06 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）
2019/08/23 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python中返回矩阵的行列方法
2018/04/04 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
南非最大的在线时尚商店：Zando
2019/07/21 全球购物
军训自我鉴定
2014/01/22 职场文书
教师节活动主持词
2014/04/02 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
公司承诺书怎么写
2014/05/24 职场文书
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python