2009六月25
inove js改版之 ctrl enter提交，switchtab函数重写
前面一篇已经inove base.js里面的goTop()函数给重“抄”了一遍，现在我们来继续重写其loadCommentShortcut()与switchTab()函数
第一个函数，是在提交评论的时候会用到，作用就是CTRL+ENTER提交内容，后一个就是在你点trackbacks与评论时，标签切换的时候会用到的
trackbacks_评论_tab
在google访问如此不顺畅的时刻我还在坚持着使用。。赞自己一下 
看一下loadCommentShortcut的原代码
function loadCommentShortcut() {
$('#comment').onkeydown = function (moz_ev) {
var ev = null;
if (window.event){
ev = window.event;
} else {
ev = moz_ev;
}
if (ev != null && ev.ctrlKey && ev.keyCode == 13) {
$('#submit').click();
}
}
$('#submit').value += ' (Ctrl+Enter)';
}
$('#comment').onkeydown = function (moz_ev) {
var ev = null;
if (window.event){
ev = window.event;
} else {
ev = moz_ev;
}
if (ev != null && ev.ctrlKey && ev.keyCode == 13) {
$('#submit').click();
}
}
$('#submit').value += ' (Ctrl+Enter)';
}
因为原作者(mg12大大)，要考虑到浏览器兼容性，所以这里面还要对这个让人深恶痛绝的event进行判断。。
但是，我用的是jQuery，管这么多干什么？来按我的代码，改之
同样是ready.js里面可以找到如下代码
jQuery(document).ready(function(){
jQuery("#comment").keydown(function(event){
//判断，如果你在点击ctrl的同时点击回车键(13)那么我就让提交按钮生效
//模拟提交按钮被点击，当然就是提交评论内容了
if(event.ctrlKey && event.keyCode == 13)
{
jQuery("#submit").click();
}
});
});
jQuery("#comment").keydown(function(event){
//判断，如果你在点击ctrl的同时点击回车键(13)那么我就让提交按钮生效
//模拟提交按钮被点击，当然就是提交评论内容了
if(event.ctrlKey && event.keyCode == 13)
{
jQuery("#submit").click();
}
});
});
再来看一下switchTab的代码，因我对参数不了解，估计就是选不同的id啦，使不同的对象显示或者隐藏啦
function switchTab(showPanels, hidePanels, activeTab, activeClass, fadeTab, fadeClass) {
$('#'+activeTab).className = activeClass;
$('#'+fadeTab).className = fadeClass;
var panel, panelList;
panelList = showPanels.split(',');
for (var i = 0; i < panelList.length; i++) {
var panel = panelList[i];
if ($('#'+panel)) {
setStyleDisplay(panel, 'block');
}
}
panelList = hidePanels.split(',');
for (var i = 0; i < panelList.length; i++) {
panel = panelList[i];
if ($('#'+panel)) {
setStyleDisplay(panel, 'none');
}
}
}
$('#'+activeTab).className = activeClass;
$('#'+fadeTab).className = fadeClass;
var panel, panelList;
panelList = showPanels.split(',');
for (var i = 0; i < panelList.length; i++) {
var panel = panelList[i];
if ($('#'+panel)) {
setStyleDisplay(panel, 'block');
}
}
panelList = hidePanels.split(',');
for (var i = 0; i < panelList.length; i++) {
panel = panelList[i];
if ($('#'+panel)) {
setStyleDisplay(panel, 'none');
}
}
}
于是，很好改，将其setStyleDisplay的部分用jQuery的显示效果替换即可，很是easy
因为此函数只是在允许评论的内容页会用到，所以我把该方法放到了comment.js里面，不过注意这个comment.js已经不再是mg12写的了，而是小小子改的。呵呵。
function switchTab(showPanels, hidePanels, activeTab, activeClass, fadeTab, fadeClass) {
//看其原来方法，无非就是给他换个类名
//用jQuery的方法，先把原类名删了，再增加一个新类名，搞定
$("#"+activeTab).removeClass().addClass(activeClass);
$("#"+fadeTab).removeClass().addClass(fadeClass);
var panel, panelList;
panelList = showPanels.split(',');
for (var i = 0; i < panelList.length; i++) {
var panel = panelList[i];
//我感觉这个显示的效果会比display block更人性一些吧？
$("#"+panel).fadeIn(250);
}
panelList = hidePanels.split(',');
for (var i = 0; i < panelList.length; i++) {
panel = panelList[i];
//同样，隐藏的时候也用这个特效好了，我比较喜欢乱改
$("#"+panel).fadeOut(250);
}
}
//看其原来方法，无非就是给他换个类名
//用jQuery的方法，先把原类名删了，再增加一个新类名，搞定
$("#"+activeTab).removeClass().addClass(activeClass);
$("#"+fadeTab).removeClass().addClass(fadeClass);
var panel, panelList;
panelList = showPanels.split(',');
for (var i = 0; i < panelList.length; i++) {
var panel = panelList[i];
//我感觉这个显示的效果会比display block更人性一些吧？
$("#"+panel).fadeIn(250);
}
panelList = hidePanels.split(',');
for (var i = 0; i < panelList.length; i++) {
panel = panelList[i];
//同样，隐藏的时候也用这个特效好了，我比较喜欢乱改
$("#"+panel).fadeOut(250);
}
}
同样，调用这个函数的地方是不是需要改？啥？你不清楚？告诉你，当然，一定，of course
原代码为：
<a id="commenttab" class="curtab" href="javascript:void(0);" onclick="MGJS.switchTab('thecomments,commentnavi', 'thetrackbacks', 'commenttab', 'curtab', 'trackbacktab', 'tab');">评论<?php echo (' (' . (count($comments)-count($trackbacks)) . ')'); ?></a>
新代码为：
<!-- 这里没有再用onReady，因为一些评论有关的js我全放在一起了，放在ready.js里反而有些不合适，呵呵-->
<a id="commenttab" class="curtab" href="javascript:void(0);" onclick="switchTab('thecomments,commentnavi', 'thetrackbacks', 'commenttab', 'curtab', 'trackbacktab', 'tab');">评论<?php echo (' (' . (count($comments)-count($trackbacks)) . ')'); ?></a>
<a id="commenttab" class="curtab" href="javascript:void(0);" onclick="switchTab('thecomments,commentnavi', 'thetrackbacks', 'commenttab', 'curtab', 'trackbacktab', 'tab');">评论<?php echo (' (' . (count($comments)-count($trackbacks)) . ')'); ?></a>
至此，这俩函数也改完了，不过您千万别忘了，您的“留言板”页面同样有此代码，别忘记改哦~
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2009/06/25/960/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
貌似在调用jQuery的时候，用jQuery代替$更好
[回复]
SPAM了？晕
[回复]
再发一次，调用jQuery的话，用”jQuery”代替”$”更好
[回复]
what’s spam??
[回复]
@bolo
我感觉之所以用jQuery而不用$是怕引起混淆
因为,wordpress里可能还会用到另外的插件例如:prototype
而这些也是以”$”作为缩写的，所以就会冲突，用jQuery可以避免。
[回复]
能不能把你的这段代码直接放到START.PHP里呢，那样不是可以少调用一个JS，因为原理我不清楚，只是个美丽的想法 :D
[回复]
@LAONB
因为js毕竟只是功能。少调JS与多调JS不是重要的。
如果放在start.php里面，那么这个东西就会影响加载速度，这才是主要的。
这也是为何YSLOW希望我们把JS放在后面。呵呵。
PS：我这个现在让我放在了comment.js里面。只有正文页会调用的。呵呵。
[回复]
测试你的评论.是否不刷新就可以显示新评论呢.
[回复]
@wanwan
欢迎测试。不过我没加AJAX功能。呵呵。
[回复]
所以我相当失望…..
[回复]
@wanwan
呃，那实在是不好意思。这方面我真没打算加AJAX。。 :D
[回复]
:o 不过我还是喜欢 AJAX 现在我的评论还是不能免刷新.伤心啊..怎么也找不到办法…
[回复]
@wanwan
发表评论为啥要免刷新？个人没感觉有啥太大的好处啊。
[回复]
就是好看而已.呵呵.
[回复]
@wanwan
呵，那你可以去搜一下。很多人实现了这个功能的。
[回复]
請教：
我使用 WordPress 3.0，並載入的是內建的 jQuery。
使用您上述的 js function，我發現到若使用 “$” 則 switchTab() 不會呼叫 jQuery 的 function；而若改為如 jQuery(“#”+activeTab)，則確定可以達成。
為了這個問題，我 Debug 了兩天
請問，這個有可能是甚麼問題引起的呢？
[回复]
@Kenming
首先，你要知道，jQuery这个函数是为了当$与其他JS类库，或自定义方法冲突的时候使用的。
所以，我可以断定$不可用，而jQuery可用是由于原作者重新定义了$引起的，或者是使用了其他JS类库。而其调用顺序可能在jQuery之前。
你可以简单搜一下，是不是作者自己定义了这个$函数呢？呵呵。
[回复]