iNove 中鼠标悬浮显示 @ 评论
本文介绍的是如何在 iNove 主题中添加鼠标悬浮显示 @ 评论的功能. 或许我说得不准确, 但我真不知道该怎么描述. 比如: A 留言了, B 用 @ 回复了 A, 所以 B 的回复可能是这样的:
In this Article, I will tell you how to add comment tips to iNove theme, but it's Chinese, if you wanna English tutorial, please visit Add Comment Tips to iNove Theme.
@A
How much money do you have?
就是说, 当鼠标悬停在 @A 上面的时候, 就会将 A 的评论内容显示在一个悬浮区域中.
其实这是 yinheli 实现的一个功能, 我看效果很好就借鉴过来了. 具体技术和原理可以看看 yinheli 的 (上), (下) 两篇教程. 下面我只会教你怎么在 iNove 中实现.
1. 下载 commenttips.js 文件. 该文件修改自 yinheli 的代码, 我去除了一些无关代码, 简化了效果, 和修复了几个 bug. 下载请点
2. 将 commenttips.js 文件放置到 inove/js 目录.
3. style.css 中追加样式代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | #thecomments .tip { background:#FFF; border:1px solid #CCC; width:605px; padding:10px !important; padding:10px 10px 0; margin-top:0; position:absolute; z-index:3; } #thecomments .tip .act { display:none; } *+html #thecomments .tip { padding:10px 10px 0 !important; } |
4. 在主题中添加代码调用 JavaScript. 打开 templates/end.php, 在 </body> 前面一行添加以下代码:
(如果你有其他插件或者自己已经添加了 jQuery 的库, 那第一行代码可以不必添加.)
1 2 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/commenttips.js"></script> |
5. 好了, 刷新一下有 @ 回复的页面, 等页面加载完, 将鼠标悬停在 @ 回复上, 你会看到效果的.
第一次接触 jQuery, 写得还凑合吧, 觉得写得好的给点掌声, 觉得写得不好的赏两个臭鸡蛋...
English
除了上边说的，需要其它插件支持吗。
我在templates/start.php的
前面加上：
在templates/end.php, 在 前面添加：
<script type="text/javascript" src="/js/commenttips.js">
怎么没显示效果。。不知道怎么回事。
css也添加了
@季风
分かりません。(- -!)
@infocharger
@Rui
@clayton
@wokin
以上几位，你们是否都是用了Lavalamp特效？如果是，请仔细阅读以下文字。
Lavalamp更新以后，要求修改menu.js这个文件的activate方法。
你们如果去看一下inove1.4没修改过的menu.js，就会发现在activate方法末端有一个不起眼的“,”（逗号）。
根据我的推测，你们用lavalamp要改menu.js的时候，用mg12的代码覆盖时把逗号也覆盖掉了吧...
如果我没猜错，加上","再刷新页面，订阅菜单就可以显示。
PS：mg12可以来官方审核一下，呵呵。
@Hermit
很抱歉不是这个问题，已经解决了。
@Rui
呵呵，我也觉得这个问题比较低级。不过确实容易犯而不容易查啊。
@Hermit
恩，确实是容易犯不容易查，不过我的状况不是你所描述的那个“,”的问题。。。
实现了~谢谢！
不错不错，谢了~
今天把主题更新到1。4，又重新把这篇拿出来试，还是实现不了。
一直没什么头绪!又来找博主帮忙了。
下载commenttips.js，并放在inove/js目录下
再把
#thecomments .tip {
……
}
#thecomments .tip .act {
display:none;
}
*+html #thecomments .tip {
padding:10px 10px 0 !important;
}
插入到/* comment START */下一列。
在templates/end.php的前面添加了下列两行
<script type="text/javascript" src="/js/commenttips.js">
这几点都做了。就是没法浮动。。IE6和火狐都试过，你们的都能浮动，我就是无法浮动。
不知道服务器要不要设置什么！
在templates/end.php的前面添加了下列两行
<script type="text/javascript" src="/js/commenttips.js">
这几点都做了。就是没法浮动。。IE6和火狐都试过，你们的都能浮动，我就是无法浮动。
不知道服务器要不要设置什么！
问题：网页上显示有错误
症状：1、打开页面显示完成
2、但移动到RSS feedRSS图标上时即显示网页有错误。
3、RSS悬浮正常弹出。
测试了几次，问题和Lavalamp以及那个RSS有关，与其他无关。
试验了几次都没办法解决，请mg12帮忙看看，谢谢！
忘了说了，关于style.css安装教程没成功，关于#menus和#searchbox这段是下载使用您的style.css。
#menus {
position:relative;
padding-left:10px;
float:left;
}
#menus li {
float:left;
display:inline;
list-style:none;
}
#menus li a {
position:relative;
color:#555;
height:30px;
line-height:30px;
padding:0 15px;
text-decoration:none;
font-size:15px;
float:left;
z-index:10;
text-align:center;
}
#menus li.current_page_item a {
font-weight:bolder;
}
#menus li.back {
background: url(img/lava.gif) no-repeat right bottom;
height:30px;
position:absolute;
z-index:8;
}
#menus li.back .left {
background: url(img/lava.gif) no-repeat left top;
height:30px;
margin-right:9px;
float:none;
}
#searchbox .textfield {
background:none;
border:0px;
width:185px;
float:left;
margin-right:2px;
padding-left:2px;
}
#searchbox {
background: url(img/searchbox.gif) no-repeat;
width:209px;
height:23px;
display:block;
float:right;
margin-top:4px;
margin-right:10px !important;
margin-right:5px;
padding:2px;
}
#searchbox .textfield {
background:none;
border:0px;
width:185px;
float:left;
margin-right:2px;
padding-left:2px;
}
#searchbox .button {
background:none;
border:0px;
width:18px;
height:18px;
cursor:pointer;
float:left;
margin-top:1px;
}
#searchbox .searchtip {
color:#999;
}
/* navigation END */
/* submenu START */
#menus li ul {
display:none;
background:#F4F5F7;
border:1px solid #CCC;
border-top-color:#A6A6A6;
padding:0 5px;
}
#menus li li {
float:none;
margin:0 !important;
margin:0;
padding:0;
display:block;
list-style:none;
}
#menus li li a {
float:none;
display:block;
padding:5px;
text-decoration:none;
width:150px;
font-size:16px;
border-style:solid;
border-color:#DDD;
border-width:1px 0 0;
margin:0;
background-image:none;
height:20px;
line-height:20px;
}
#menus li li.first a {
border-top:none;
}
#menus li li a:hover {
font-weight:bolder;
}
/* submenu END */
测试：很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论很长很长的评论
有个问题就是，如果点击了comments的分页，就不会再有悬浮功能了。
另外box最近太不稳定了，下了半天都下不到
这个下载地址失效了。打不开
@wind
不是下载地址失效了。。。box.net被电信屏蔽了。。
还好，，突破重重封锁俺下载到了~~ 谢啦！
下载地址失效~~~~唉~~~
@阿珞
需要的话去这里下吧
http://www.micogle.com/js/inove/commenttips.js
@micogle 多谢micogle~~~弄好了
但是不知道为什么IE下的状态是悬停的
但是在遨游下就是嵌入的
@阿珞
这跟浏览器有关系，不过不影响使用~~~
@micogle
哦~~明白了 呵呵^_^多谢micogle同学
@Arec
恩，我也注意到这个问题了，现在的neoease本身也存在这个问题。
点击Comment pages后就失效了..而且如果要显示前一页的评论还要AJAX下吧..
另外通过AJAX读出来的评论, 其中的平滑滚动也失效了.
同问:为什么同在firefox下 mg12这里的是悬停的，我的却是嵌套的?
@阿珞 Test
@季风
在这个目录里，只有comments.php 和 header.php 没有end.php 啊，晕菜，我是装的最新版的inove
ctrl+enter
@Bigcar
编辑footer.php就行了
@trai25
貌似，我下的1.46 里面也没有啊
原来1.46 根本就没有end.php 加在footer.php 里，成功实现咯！
@micogle
我的实现了
下载地址没有失效
需要翻墙的
郁闷吧？
@园子
box.net 改成 boxcn.net 就行了, 文章里面我已经改过了. 哎...
文中说到的js文件和相关代码，能不能用在你的Elegant Box主题上？
我尝试了一下，没显示效果，是不是只支持iNove主题？
mg12，你好，我也使用了，但窗口不是弹出的，而是挤在别的留言上面，你帮看看。www.blook.org.cn
@Hermit
我还没弄好
支持你的博客 你的博文
@善变
支持你的博文
真行了，谢谢了。哈哈
@菠萝
我的类似，直接把下面的留言挤下去，不知道怎么解决
突然又好了，mygod
@manu
我喜欢这样的评论系统。
很华丽的感觉
有一个bug，评论翻页后，这个悬浮的效果就没有了，似乎是addClass部分出了问题，我不清楚是否和ajax comment pager有冲突。
试试看！
有点问题。。
@冰剑
测试下呢
@乘风归来兮
我也这个问题啊