编程 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 相关文章推荐

js用图作提交按钮或超连接

Mar 26 Javascript

jquery插件之easing 动态菜单

Aug 21 Javascript

jQuery支持添加事件的日历特效代码分享（3种样式）

Aug 24 Javascript

JavaScript实现跑马灯抽奖活动实例代码解析与优化（一）

Feb 16 Javascript

jquery动态切换背景图片的简单实现方法

May 14 Javascript

原生javascript实现读写CSS样式的方法详解

Feb 20 Javascript

Vue2.0用户权限控制解决方案的示例

Feb 10 Javascript

JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】

Feb 21 Javascript

JS实现可切换图片的幻灯切换效果示例

May 24 Javascript

vue动态子组件的两种实现方式

Sep 01 Javascript

微信小程序国际化探索实现(附源码地址)

May 20 Javascript

JavaScript实现简单动态表格

Dec 02 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