网站导航：网学 原创论文 原创专题 网站设计 最新系统 原创论文 论文降重 发表论文 论文发表 UI设计定制 论文答辩PPT格式排版 期刊发表 论文专题
返回网学首页
网学原创论文
最新论文 推荐专题 热门论文 论文专题
安全工程 自动化 保险 表演 财务管理 参考选题 论文选题-查重参考论文 参考论文大全 电气工程及其自动化 电子论文 电子信息工程 电子商务 法律 法学 工程管理 公共关系学 公共事业管理 公路工程 公路交通运输 工商管理 广告学 国际经济与贸易 汉语国际教育 汉语言文学 环境科学与工程 化学 会计学 护理学 交通运输 教育管理 教育研究生 经济学 金融 计算机科学与技术 计算机应用 酒店管理 机械电子工程 机械论文 机械设计制造及其自动化 论文查重 旅游管理 python开发 生物工程 环境工程 数字媒体技术 ios开发 工程造价 家庭教育 农学 家政学 原创检测通过 期刊发表方法
当前位置： 网学 > 设计资源 > .Net编程 > 正文

实现新浪网易的评论块【推荐】（附示例代码下载）

论文降重修改服务、格式排版等 获取论文 论文降重及排版 论文发表 相关服务

最近老在项目表现层折腾，sql好久没写。不过没关系，产品要数据的时候也就是select  xxx  from   tablename，然后身后苦苦等待数据的姑娘看见了select  xxxx  from   tablename,身不由己地一阵狂赞-----好厉害啊。我猜她们在想：写一句话能出来这么多数据，技术牛B啊。隔行如隔山，这些赞美全当“春风过驴儿”。  【示例代码下载】

 

新浪的评论块如下图：

网易的如下图：

我做的的如下（借用了园里的页面哈）：

技术要点：

1。因为 textarea里面不能放图片，所以和新浪的做法一样，选用iframe放内容，然后隐藏一个 textarea用于提交。

 

2 。JQqery tab 插件的使用（文盲都会）

先引用这三个：

  1. <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
  2.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
  3.   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

然后：

  1. $(function() { 
  2.         $("#tabs").tabs(); 
  3. }); 
  4.   

3。 让iframe可编辑

  1. window.frames["iframe1"].document.designMode='on'; 

4。 打开简易窗体

  1. var newwindow = window.open("tab.htm",'_blank', toolbars=0,resizable=1); 

5。 iframe里执行父窗体的方法

  1. window.opener.XXX(xxx); 

其实也就三个页面，不愿下载的直接复制粘贴，拿去就能用。大家有什么好的想法或创意欢迎讨论。

  1. <html> 
  2. <head> 
  3.  
  4.     <title>插入表情</title> 
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  6.       <style> 
  7.             img 
  8.             { 
  9.                 cursor:pointer; 
  10.             } 
  11.         </style> 
  12.     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
  13.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
  14.   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
  15.    
  16.  
  17.     <script type="text/javascript"> 
  18.     $(function() { 
  19.         $("#tabs").tabs(); 
  20.     }); 
  21.      
  22.     </script> 
  23.      
  24. </head> 
  25. <body style="font-size:62.5%;"> 
  26.     <script language="javascript">         
  27.         function SetEmotion(e) 
  28.         { 
  29.             window.opener.InsertEmotion(e.childNodes[0].src); 
  30.             window.close(); 
  31.         } 
  32.     </script> 
  33.   
  34. <div class="demo"> 
  35.   
  36. <div id="tabs"> 
  37.     <ul> 
  38.         <li><a href="#tabs-1">种类一</a></li> 
  39.         <li><a href="#tabs-2">种类二</a></li> 
  40.         <li><a href="#tabs-3">种类三</a></li> 
  41.     </ul> 
  42.     <div id="tabs-1"> 
  43.             <table id="EmoticonsTable" border="0"> 
  44.     <tr> 
  45.         <td><div onclick="SetEmotion(this)"><img src='http://space.cnblogs.com/Emoticons/qface/055242240.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/F42015564.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/E92016527.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/C42016931.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/8E2016447.gif'></div></td> 
  46.     </tr><tr> 
  47.         <td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/972016985.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/B72016270.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/6E2016685.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/C12016930.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/6B2016192.gif'></div></td> 
  48.     </tr><tr> 
  49.         <td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/582016383.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/462016906.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/EF2016278.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/B32016288.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/8C2016330.gif'></div></td> 
  50.     </tr><tr> 
  51.         <td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/982016188.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/A32016826.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/C02017226.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/132017542.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/E82017718.gif'></div></td> 
  52.     </tr><tr> 
  53.         <td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/FF2018898.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/492018280.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/A42018181.gif'></div></td><td></td><td></td><td></td> 
  54.     </tr> 
  55. </table> 
  56.     </div> 
  57.     <div id="tabs-2"> 
  58.         <table id="Table1" border="0"> 
  59.     <tr> 
  60.         <td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/682018465.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/B12018511.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/7C2018724.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/F92018448.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/4A2018305.gif'></div></td> 
  61.     </tr><tr> 
  62.         <td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/6C2018505.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/D52019716.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/8F2019656.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/E22019312.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/092019763.gif'></div></td> 
  63.     </tr><tr> 
  64.         <td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/FA2019531.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/A12019563.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/ED2019271.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/C02019905.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/3A2019776.gif'></div></td> 
  65.     </tr><tr> 
  66.         <td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/6F20110612.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/1C20110457.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/9820110640.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/5C20110286.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/1B20110386.gif'></div></td> 
  67.     </tr><tr> 
  68.         <td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/5620110732.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/AC20111569.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/6D20111458.gif'></div></td><td></td><td></td><td></td> 
  69.     </tr> 
  70. </table> 
  71.  
  72.     </div> 
  73.     <div id="tabs-3"> 
  74.     <table id="Table2" border="0"> 
  75.     <tr> 
  76.         <td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/4020111928.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/0F20111750.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/EA20112378.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/1720112791.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/6E20112960.gif'></div></td> 
  77.     </tr><tr> 
  78.         <td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/1920112861.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/8C20112184.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/7C20112192.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/0D20112491.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/A620112768.gif'></div></td> 
  79.     </tr><tr> 
  80.         <td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/7B20112694.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/0220112367.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/FB20112182.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/3220112243.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/4A20112352.gif'></div></td> 
  81.     </tr><tr> 
  82.         <td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/0920112251.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/3C20113107.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/6120113489.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/9220113961.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/7120113779.gif'></div></td> 
  83.     </tr><tr> 
  84.         <td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/9520113368.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/D320113167.gif'></div></td><td><div onclick="SetEmotion(this)"><img src='/uploadfile/201101/20/D920113344.gif'></div></td><td></td><td></td><td></td> 
  85.     </tr> 
  86. </table> 
  87.  
  88.     </div> 
  89. </div> 
  90. </div> 
  91. </body> 
  92. </html> 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" > 
  3. <head> 
  4.     <title>Untitled Page</title> 
  5.     <script type="text/javascript" language="javascript"> 
  6.     
  7. function xx() 
  8. { 
  9.  window.frames["iframe1"].document.designMode='on'; 
  10. } 
  11.  function  xxx() 
  12.  { 
  13.     window.frames["iframe1"].document.getElementById("xxx").innerHTML+='<img title="顶" alt="顶" src="http://www.sinaimg.cn/uc/myshow/blog/misc/gif/E___0104ZHWSSIGT.gif" _moz_dirty="">'; 
  14.   } 
  15.    
  16. function openTab() 
  17. { 
  18.   var newwindow = window.open("tab.htm",'_blank', toolbars=0,resizable=1); 
  19.   newwindow.focus(); 
  20. } 
  21. function   InsertEmotion(content) 
  22. { 
  23. document.getElementById("TextArea1").value+=content; 
  24.  window.frames["iframe1"].document.getElementById("xxx").innerHTML+='<img title="顶" alt="顶" src="'+content+'" _moz_dirty="">'; 
  25. } 
  26.     </script> 
  27. </head> 
  28. <body onload="xx()"> 
  29. <iframe frameborder="0" src="HTMLPage1.htm" style="border: 1px solid rgb(199, 199, 199); height: 158px; width: 448px; background-color: white;" id="iframe1"></iframe> 
  30.  
  31. <div> 
  32.     <textarea id="TextArea1" style="height:150px;display:none;" cols="20" rows="2"></textarea> 
  33.     <input id="Button2"  type="button" value="提交" /> 
  34. <!--    <input id="Button1" type="button" value="button" onclick="return xxx()" />--> 
  35.     <input id="Button3" type="button" value="选择表情" onclick="openTab()" /> 
  36.     </div> 
  37. </body> 
  38. <!--<img src=/uploadfile/201101/20/8820113308.gif" alt="" />--> 
  39. </html> 
  1. <html> 
  2.     <head> 
  3.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  4.         <style> 
  5.             p {  
  6.                 * margin:0.2em  auto; 
  7.             } 
  8.             body { 
  9.                 margin: 0; 
  10.                 scrollbar-face-color: #ffffff; 
  11.                 scrollbar-highlight-color: #ffffff; 
  12.                 scrollbar-shadow-color: #c0c1bb; 
  13.                 scrollbar-3dlight-color: #c0c1bb; 
  14.                 scrollbar-arrow-color: #c9cbb6; 
  15.                 scrollbar-track-color: #f4f5f0; 
  16.                 scrollbar-darkshadow-color: #ffffff; 
  17.                 scrollbar-base-color: #ffffff; 
  18.                 padding: 17px; 
  19.                 word-wrap: break-word; 
  20.                 overflow: scroll; 
  21.                 overflow-x: auto; 
  22.                 height: 90%; 
  23.                 font-size: 12px; 
  24.                 background-color:white; 
  25.             } 
  26.              
  27.             body, td, textarea, input, br, div, span { 
  28.                 font-family: '宋体', Verdana, Arial, Helvetica, sans-serif; 
  29.                 line-height: 1.5; 
  30.             } 
  31.              
  32.             img { 
  33.                 border: 0; 
  34.             } 
  35.              
  36.             html { 
  37.                 height: 100%; 
  38.                 cursor: text; 
  39.             } 
  40.              
  41.             pre { 
  42.                 white-space: normal; 
  43.             } 
  44.              
  45.             form { 
  46.                 margin: 0; 
  47.             } 
  48.         </style> 
  49.          
  50.  
  51.     </head> 
  52.     <body  style="background-color:white;"> 
  53.    
  54.     <div id="xxx"></div> 
  55.     <span id="content" style="display:none"></span> 
  56.     </body> 
  57.  
  58. </html> 
  • 上一篇资讯： C#常用数据检查类
  • 下一篇资讯： asp.netmvc2自定义DropdownList控件

    • 相关资讯

    网学推荐

  • ·原创论文的写法
  • ·论文数据图表制作
  • ·论文排版通过检测检测
  • ·提供系统开发和运行服务
  • ·提供原创参考资料
  • ·档案托管服务
  • ·原创参考论文导航
  • ·查重服务维普检测低于30%
  • ·我们提供原创参考论文和原创的参
  • ·原创的论文资料参考节省时间！
  • ·论文格式排版 格式核对！
  • ·UI设计定制、界面设计
  • ·程序和网站等UI设计定制！
  • ·原创参考论文参考定制！
  • ·职称和论文发表,可联系业务我们
  • ·本科毕业设计(论文)答辩指南
  • ·程序制作专家

    • 原创论文

  • ·财务管理
  • ·参考选题
  • ·论文选题-查重参考论文
  • ·参考论文大全
  • ·电气工程及其自动化
  • ·电子论文
  • ·电子信息工程
  • ·电子商务
  • ·工程管理
  • ·公共关系学
  • ·公共事业管理
  • ·公路工程
  • ·公路交通运输
  • ·工商管理
  • ·广告学
  • ·家政学

    • 文章排行榜

  • · 自然框架的源代码、Demo、数据库、
  • · WebService身份验证
  • · 不要迷失在技术的海洋中
  • · .net完美操作cookies
  • · 取出文本中的图片地址
  • · 谷歌眼中的搜索未来
  • · GridView显示隐藏某一列
  • · 谈谈关于MVP模式中V-P交互问题【附
  • · ASP.NET网站预编译概述
  • · 详解.net内存管理
  • · json教程之C#开发json解析类
  • · 用FCKEditor编辑器上传图片、FLASH
  • · C#调用WebService时的身份验证
  • · WinForm窗体之间交互的一些方法
  • · VS中创建自定义SQLRule
  • · 三种方法在Infopath中实现数据有效
  • · 如何使用和开发自定义配置节
  • · C#获得当前文件夹内所有文件的名称
    • 设为首页 | 加入收藏 | 网学首页 | 原创论文 | 计算机原创
    版权所有 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
    Copyright 2008-2020 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号 常年法律顾问：王律师