jquery 新浪网易的评论块制作

在本文中，我们将探讨如何使用jQuery来创建类似新浪和网易的评论块，重点在于实现文本框内添加图片的功能。在传统的HTML中，`textarea`元素是不允许直接嵌入图片的，因此，为了实现这一功能，我们可以参考新浪的实现方式，即使用`iframe`来展示评论内容，并配合一个隐藏的`textarea`进行实际的数据提交。 我们需要引入jQuery库和jQuery UI库，这两个库在网页交互和UI设计中起着至关重要的作用。在HTML文件中，添加以下代码以引入这些资源： ```html <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> ``` 接下来，我们可以使用jQuery UI的`tabs`插件来创建一个分页的评论表情选择器。只需在文档加载完成后调用`$("#tabs").tabs();`即可激活这个插件： ```javascript $(function() { $("#tabs").tabs(); }); ``` 为了让`iframe`可编辑，我们需要在JavaScript中设置`designMode`属性。例如，如果`iframe`的id是`iframe1`，可以这样操作： ```javascript window.frames["iframe1"].document.designMode='on'; ``` 当用户点击表情时，我们通常会打开一个新的窗口显示表情选择器，然后在选中表情后关闭该窗口并将表情插入到`iframe`中。可以通过`window.open`函数创建新窗口，并通过`window.opener`访问父窗口的方法： ```javascript var newwindow = window.open("tab.htm",'_blank', 'toolbars=0,resizable=1'); // 在新窗口中执行父窗口的方法 window.opener.InsertEmotion表情源地址); window.close(); ``` 在HTML中，我们可以创建一个包含表情的表格，每个表情图片都有一个`onclick`事件处理器，调用`SetEmotion`函数，将所选表情的URL传递给父窗口： ```html <img src='/upload/201007/20100701164928735.gif' onclick="SetEmotion(this)"> ``` 在`SetEmotion`函数中，我们需要调用父窗口的方法（例如`InsertEmotion`）将表情插入到`iframe`中的适当位置： ```javascript function SetEmotion(e) { window.opener.InsertEmotion(e.childNodes[0].src); window.close(); } ``` 在实际的项目中，`InsertEmotion`方法会在父窗口中定义，它负责将图片URL插入到`iframe`的编辑区域。这个方法的具体实现会依赖于你的业务逻辑和界面需求。 总结一下，创建一个类似新浪、网易的评论块，主要涉及以下几个技术点： 1. 使用`iframe`作为内容展示区，以支持图片和其他富文本内容。 2. 隐藏一个`textarea`用于数据提交，确保提交的数据是完整的HTML格式。 3. 利用jQuery UI的`tabs`插件创建表情选择器，提供良好的用户体验。 4. 设置`iframe`的`designMode`为`on`，使其内容可编辑。 5. 通过`window.open`和`window.opener`进行窗口间的通信，实现表情选择与插入的功能。 以上就是实现这个评论块的核心技术，你可以根据自己的需求进行调整和扩展，比如增加评论的提交、显示等功能。