首页
所有分类
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比较文档位置
Apr 08 Javascript
jQuery 选择器理解
Mar 16 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
JavaScript获取URL参数的方法分享
Apr 07 Javascript
基于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
IIS(7) Windows server 2016(6) Telnet(1) https(7) Windows server 2008(5) 远程登录(2) 远程控制(1) 3389(1) 防火墙(2) Windows server 2019(5)
You might like
PHP n个不重复的随机数生成代码
2009/06/23 PHP
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
PHP闭包函数详解
2016/02/13 PHP
php事件驱动化设计详解
2016/11/10 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
vue中axios防止多次触发终止多次请求的示例代码（防抖）
2020/02/16 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
python如何生成各种随机分布图
2018/08/27 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
专业实习自我鉴定
2013/10/29 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
新春寄语大全
2014/04/09 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
西双版纳导游词
2015/02/03 职场文书