千丝海阁

写这篇文章之前，我有一些话要说。原先我看见有不少站点都在使用一种滑动解锁的插件myQaptcha，感觉还挺漂亮，想想这也是自己想要实现的功能，于是就下载安装了一下，结果发现没有办法直接运行显示，经过一阵折腾后，主要是jq冲突，能正常显示也能正常滑动解锁功能了。但偶尔有一次我滑动范围大了点，结果那个中间的滑动块没了。见下图：

没有中间那滑动块，也就意味着解不了锁，也就意味着不能评论，解决的方法只能是重新刷新网页。我试了两款Chrome浏览器都有这问题，但FF没有，IE未试。
于是我到作者博客去留言反应此问题，由于某种众所皆知的可能原因，我的留言隔天没了。我顺便也点了下作者博客站点上的此滑动条，发现同样有相同的问题。你们有兴趣的话可以试试用Chrome访问作者博客http://blog.30c.org/2006.html鼠标按住滑动条往上方拖拉，然后在松开鼠标，很神奇吧。同样有问题的网站：http://www.itbobo.com/这样说明这个问题不是个例了。但是同样，也有正常的网站，http://www.52wordpress.net/
在我搞不清楚这个插件的状况的情况下，我只能自己写一个开关出来，于是就有了现在大家看到这个评论开关：

开关的作用仅仅在于开打评论输入框和激活submit按钮，没有Qaptcha(不是myQaptcha)的session机制，其实我到现在也搞不懂最简单的屏蔽通过comments.php页面提交的垃圾评论为啥要搞个session机制，也许它是想post一些参数，在最后的时候进行验证，但是如果这个session被拦截了，不都白搭了么，简简单单点设置button.disable不好吗？
由于这个评论开关牵涉到CSS样式，再加上我用的Freshblog主题的comments.php好像和默认主题twenty系列的comments.php用的元素相差太多，所以我暂时没有做成插件的打算（抱歉，没有对主题格式研究过，看上去Freshblog主题的评论好像集成了某个评论插件的功能，可以自动嵌套，我记得默认主题是没有这个功能的），如有需要，则再说了，下面放出所有代码，各位有能力者可以自行修改：
1.新建一个custom_radio.js，放在主题下的/javascripts目录，内容如下：

// Custom checkbox and radios

var toggleHandler = function(toggle) {
    var toggle = toggle;
    var radio = $(toggle).find("input");

    var checkToggleState = function() {
        if (radio.eq(0).is(":checked")) {
            $(toggle).removeClass("toggle-off");
        } else {
            $(toggle).addClass("toggle-off");
        }
    };

    checkToggleState();

    radio.eq(0).click(function() {
        $(toggle).toggleClass("toggle-off");
    });

    radio.eq(1).click(function() {
        $(toggle).toggleClass("toggle-off");
    });
};

$(document).ready(function() {
    $(".toggle").each(function(index, toggle) {
        toggleHandler(toggle);
    });
});

2.主题目录下/images/toggle放两张按钮图，方的圆的随便，尺寸30×30：

3.comments.php相关位置，即网址输入框后，评论输入框前，加入以下代码：

评论前先开启评论开关：
<div class="toggle">
    <label class="toggle-radio" for="toggleOption2">ON</label> 
    <input id="toggleOption1" type="radio" name="toggleOptions" value="option1" /> 
    <label class="toggle-radio" for="toggleOption1">OFF</label>  
    <input id="toggleOption2" type="radio" checked="checked" name="toggleOptions" value="option2" />
</div>

4.comments.php里的输入框和提交按钮属性里加上disabled属性，为了让网页打开时，输入框和提交按钮默认是无效状态，大致如下代码：

<textarea id="comment" tabindex="4" disabled="disabled" name="comment"></textarea> 
<input class="submit" id="submit" tabindex="5" type="submit" disabled="disabled" name="submit" value="Submit" />

5.最后在comments.php尾部，当然你也可以在footer.php里加上以下代码，注意下面的jquery库按照你自己的需要调整路径：

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/custom_radio.js"></script> 
<script type="text/javascript">
$(function() {  
$(".toggle :radio").change(function() {
         var lineType = $("input[name='toggleOptions']:checked").val();    
		 if(lineType == "option1")  {
			commentform.comment.disabled = false;
			commentform.submit.disabled = false;
		 }
		 else
			{
			commentform.comment.disabled = true;
			commentform.submit.disabled = true;
			}
     });
});  
</script>

6.将以下css样式加入到主题下的style.css中：

/***toggle button  ***/
.toggle {
  background-color: #6db240;
  border-radius: 6px;
  color: white;
  height: 29px;
  width: 81px;
  margin: 10px 12px 2px 0;
  overflow: hidden;
  *zoom: 1;
  display: inline-block;
  zoom: 1;
  *display: inline;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  transition: 0.25s;
  -webkit-backface-visibility: hidden; 
  }

.toggle.toggle-off {
    background-color: #ebebe4; 
}
.toggle.toggle-off .toggle-radio {
      background-image: url("images/toggle/icon-off.png");
      background-position: 0 0;
      color: white;
      left: 0;
      margin-left: 0.5px;
      margin-right: -13px;
      z-index: 1; 
}
.toggle.toggle-off .toggle-radio:first-child {
      left: -120%; 
}
.toggle .toggle-radio {
    background: url("images/toggle/icon-on.png") right top no-repeat;
    color: white;
    display: block;
	left: 120%;
    font-weight: 700;
    height: 22px;
    margin-left: -13px;
    padding: 5px 32px 2px;
    position: relative;
    text-align: center;
    z-index: 2;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
    -webkit-backface-visibility: hidden; 
}
.toggle .toggle-radio:first-child {
      margin-bottom: -29px;
      left: 0; 
}
.toggle input {
    display: none;
    position: absolute;
    outline: none !important;
    display: block\9;
    opacity: 0.01;
    filter: alpha(opacity=1);
    zoom: 1; 
}

评论开关样式来自zoe提供的Flat UI 扁平化风格工具包。

2014.2.25 追加，如果需要设置发表过评论的用户能自动打开开关，则将上面第3段代码修改为

<div class="toggle">
<label class="toggle-radio" for="toggleOption2">ON</label>
<?php if (empty($comment_author)) {?>
	<input type="radio" name="toggleOptions" id="toggleOption1" value="option1" >
	<label class="toggle-radio" for="toggleOption1">OFF</label>
	<input type="radio" name="toggleOptions" id="toggleOption2" value="option2" checked="checked">
<?php }
else { ?>
	<input type="radio" name="toggleOptions" id="toggleOption1" value="option1" checked="checked">
        <label class="toggle-radio" for="toggleOption1">OFF</label>
	<input type="radio" name="toggleOptions" id="toggleOption2" value="option2" >
<?php } ?>
</div>

如要防所有垃圾，则在wp-comment-post里追加两行

$comment_radio        = ( isset($_POST['toggleOptions']) ) ? trim($_POST['toggleOptions']) : null;
if ( 'option1' != $comment_radio )
	wp_die( __('<strong>ERROR</strong>: please turn on the swtich first.') );

---