jquery 新浪网易的评论块制作_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="http://files.jb51.net/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 下载

时间： 2024-08-31 12:09:38

jquery 新浪网易的评论块制作_jquery的相关文章

易企秀如何制作H5场景

  注意事项: 为了更好的使用网页版易企秀,建议使用谷歌浏览器(chrome),360浏览器,IE11浏览器. 易企秀如何制作H5场景 1.首先,我们要登录网页版" 易企秀 " 2.登录成功后,点击"创建场景"开始制作 3.根据需要选择"空白自主创建,或者选择一个样例",点击"创建",注意有些样例还要秀点哦 4.这时候,我们就看到了制作H5场景的页面,先来介绍下页面的工具布局吧!请查看下图 5.要清楚制作H5场景是一页页完成的

jQuery实现二级下拉菜单效果_jquery

大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有:        1)使用$(function(){...})获取到想要作用的HTML元素.        2)通过使用children()方法寻找子元素.        3)通过使用show()方法来显示HTML元素.        4)通过使用hide()方法来隐藏HTML元素.        5

jQuery实现流动虚线框的方法_jquery

本文实例讲述了jQuery实现流动虚线框的方法.分享给大家供大家参考.具体分析如下: 在百度UEditor的首页看到一个流动的虚线框的效果,所以自己用jQuery尝试也写一个,效果如下: css: .dashed-box{width:500px;height:100px;overflow:hidden;position:relative;} .dashed-top{width:2000px;height:0px;border-bottom:2px #ccc dashed;position:abs

jquery AJAX无刷新评论实例

<!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> <meta http-equiv="content-

自己动手写的jquery分页控件(非常简单实用)_jquery

最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了.写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性不知道怎么没时间测试呢.欢迎有同样需求的小伙伴采用,在使用过程发现有问题欢迎提出批评建议.   css: @charset "utf-"; * { margin:px; padding:px; font-family:"微软雅黑";

JQuery实现动态添加删除评论的方法_jquery

本文实例讲述了JQuery实现动态添加删除评论的方法.分享给大家供大家参考.具体实现方法如下: <!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">

JQuery 插件模板 制作jquery插件的朋友可以参考下_jquery

在公司项目过程中开发过几个插件,下面为Levin所用的JQuery插件模板.和google上的大同小异哈. 复制代码 代码如下: ; (function($) { // Private functions. var p = {}; p.func1 = function() { }; //main plugin body $.fn.PLUGIN = function(options) { // Set the options. options = $.extend({}, $.fn.PLUGIN.

Jquery 插件学习实例1 插件制作说明与tableUI优化_jquery

一. 先对jQuery制作方式,jQuery为开发扩展提拱了两个方法,分别是: jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. 1.1.jQuery.fn.extend(object): 可以参靠jquery参考手册的连个例子: 复制代码 代码如下: $.fn.extend({ check: function() { return this.each(function()

jQuery焦点图切换简易插件制作过程全纪录_jquery

首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下. js文件夹下面有两个文件夹jquery.jslide.js与jquery.jslides.js,前面一个是我改写的,第二个是原作者的文件.下图是效果图: 一.静态效果 <div class="slide_wrap"> <ul id="slides2" class="slide"> <li s