隐藏评论输入框
今天适当的修改了一下评论页，原因是看到了MG12的介绍，提高一下访客评论时的用户体验。嘿嘿，一切为了评论，为了评论的一切！哈哈，有点跑题了！
究竟是什么体验呢，MG12说的很公式化，我简单通俗的讲：当你在流过一次评论之后，再次评论时，会发现在用户名，邮件地址和网站的方框内会有原先的记录在，你只需要填写评论内容就可以了！为什么呢，原因就在于Cookie的记录。具体的就不讲了，感兴趣的去MG12那里看吧！
现在我只是把MG12那么复制的原理省略掉，简单化一点，我们只需要按步骤做就可以了，当然要是有兴趣研究一下，就请跳转到MG12那里去。
第一步，打开comments.php文件,找到你主题里的文本输入框:
<input type=“text” name=“author” id=“author” value=“<?php echo $comment_author; ?/>” size=”22” tabindex=”1” />
<input type=”text” name=”email” id=”email” value=”<?php echo $comment_author_email; ?/>” size=”22” tabindex=”2” />
<input type=”text” name=”url” id=”url” value=”<?php echo $comment_author_url; ?/>” size=”22” tabindex=”3” />
<input type=”text” name=”email” id=”email” value=”<?php echo $comment_author_email; ?/>” size=”22” tabindex=”2” />
<input type=”text” name=”url” id=”url” value=”<?php echo $comment_author_url; ?/>” size=”22” tabindex=”3” />
当然还包括提示文字。你要做的就是在他们的外面套一个层，这个层的id=author_info就行了！这个层就是你要隐藏的输入框！
第二步，在author_info这个层的上面加入以下代码，什么用自己去看看MG12的网页！
<!– 有资料的访客 –>
<?php if ( $comment_author != “” ) : ?>
<!–
转换显示状态用的 JavaScript
Q1: 为什么这段代码放在这里呢?
A1: 因为只有当访客有资料时, 它才被用上, 这样可以减少无资料访客下载页面时的开销.
Q2: 为什么不用外部文件将 JavaScript 放起来? 也许那样维护起来更方便.
A2: 因为它只在这个地方用到了. 而且加载文件的数量也会影响页面下载速度, 为了这么点字节的代码, 不值得新开一个文件.
–>
<script type=“text/javascript”>function setStyleDisplay(id, status){document.getElementById(id).style.display = status;}</script>
<div class=“form_row small”>
<!– 访客昵称 (随便欢迎一下) –>
<?php printf(__(‘Welcome back <strong>%s</strong>.’), $comment_author) ?>
<!– 更改按钮 (点击后: 隐藏更改按钮, 显示取消按钮, 显示资料输入框) –>
<span id=“show_author_info”><a href=“javascript:setStyleDisplay(‘author_info’,”);setStyleDisplay(‘show_author_info’,'none’);setStyleDisplay(‘hide_author_info’,”);”><?php _e(‘Change »’); ?></a></span>
<!– 取消按钮 (点击后: 显示更改按钮, 隐藏取消按钮, 隐藏资料输入框) –>
<span id=“hide_author_info”><a href=“javascript:setStyleDisplay(‘author_info’,'none’);setStyleDisplay(‘show_author_info’,”);setStyleDisplay(‘hide_author_info’,'none’);”><?php _e(‘Close »’); ?></a></span>
</div>
<?php endif; ?>
<?php if ( $comment_author != “” ) : ?>
<!–
转换显示状态用的 JavaScript
Q1: 为什么这段代码放在这里呢?
A1: 因为只有当访客有资料时, 它才被用上, 这样可以减少无资料访客下载页面时的开销.
Q2: 为什么不用外部文件将 JavaScript 放起来? 也许那样维护起来更方便.
A2: 因为它只在这个地方用到了. 而且加载文件的数量也会影响页面下载速度, 为了这么点字节的代码, 不值得新开一个文件.
–>
<script type=“text/javascript”>function setStyleDisplay(id, status){document.getElementById(id).style.display = status;}</script>
<div class=“form_row small”>
<!– 访客昵称 (随便欢迎一下) –>
<?php printf(__(‘Welcome back <strong>%s</strong>.’), $comment_author) ?>
<!– 更改按钮 (点击后: 隐藏更改按钮, 显示取消按钮, 显示资料输入框) –>
<span id=“show_author_info”><a href=“javascript:setStyleDisplay(‘author_info’,”);setStyleDisplay(‘show_author_info’,'none’);setStyleDisplay(‘hide_author_info’,”);”><?php _e(‘Change »’); ?></a></span>
<!– 取消按钮 (点击后: 显示更改按钮, 隐藏取消按钮, 隐藏资料输入框) –>
<span id=“hide_author_info”><a href=“javascript:setStyleDisplay(‘author_info’,'none’);setStyleDisplay(‘show_author_info’,”);setStyleDisplay(‘hide_author_info’,'none’);”><?php _e(‘Close »’); ?></a></span>
</div>
<?php endif; ?>
第三步，在author_info这个层的下面加入以下代码，以上的代码可以删除说明文字。
<!– 有资料的访客 –>
<?php if ( $comment_author != “” ) : ?>
<!– 隐藏取消按钮, 隐藏资料输入框 –>
<script type=“text/javascript”>setStyleDisplay(‘hide_author_info’,‘none’);setStyleDisplay(‘author_info’,‘none’);</script>
<?php endif; ?>
<?php if ( $comment_author != “” ) : ?>
<!– 隐藏取消按钮, 隐藏资料输入框 –>
<script type=“text/javascript”>setStyleDisplay(‘hide_author_info’,‘none’);setStyleDisplay(‘author_info’,‘none’);</script>
<?php endif; ?>
最后全部代码显示如下，（各个主题代码可能有所不同！）
!– 有资料的访客 –>
<?php if ( $comment_author != "" ) : ?>
<!–
转换显示状态用的 JavaScript
Q1: 为什么这段代码放在这里呢?
A1: 因为只有当访客有资料时, 它才被用上, 这样可以减少无资料访客下载页面时的开销.
Q2: 为什么不用外部文件将 JavaScript 放起来? 也许那样维护起来更方便.
A2: 因为它只在这个地方用到了. 而且加载文件的数量也会影响页面下载速度, 为了这么点字节的代码, 不值得新开一个文件.
–>
<script type="text/javascript">function setStyleDisplay(id, status){document.getElementById(id).style.display = status;}</script>
<div class="form_row small">
<!– 访客昵称 (随便欢迎一下) –>
<?php printf(__('Welcome back <strong>%s</strong>.'), $comment_author) ?>
<!– 更改按钮 (点击后: 隐藏更改按钮, 显示取消按钮, 显示资料输入框) –>
<span id="show_author_info"><a href="javascript:setStyleDisplay('author_info',”);setStyleDisplay(‘show_author_info’,'none’);setStyleDisplay(‘hide_author_info’,”);"><?php _e('Change »'); ?></a></span>
<!– 取消按钮 (点击后: 显示更改按钮, 隐藏取消按钮, 隐藏资料输入框) –>
<span id="hide_author_info"><a href="javascript:setStyleDisplay('author_info',’none’);setStyleDisplay(‘show_author_info’,”);setStyleDisplay(‘hide_author_info’,'none’);"><?php _e('Close »'); ?></a></span>
</div>
<?php endif; ?>
<!– 资料输入框 –>
<div id="author_info">
<div class="form_row">
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="1" />
<label for="author" class="small">用户名<?php if ($req) _e('(required)'); ?></label>
</div>
<div class="form_row">
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="2" />
<label for="email" class="small">Email地址<?php if ($req) _e('(required)'); ?></label>
</div>
<div class="form_row">
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="3" />
<label for="url" class="small">网站地址</label>
</div>
</div>
<!– 有资料的访客 –>
<?php if ( $comment_author != "" ) : ?>
<!– 隐藏取消按钮, 隐藏资料输入框 –>
<script type="text/javascript">setStyleDisplay('hide_author_info','none');setStyleDisplay('author_info','none');</script>
<?php endif; ?>
<?php if ( $comment_author != "" ) : ?>
<!–
转换显示状态用的 JavaScript
Q1: 为什么这段代码放在这里呢?
A1: 因为只有当访客有资料时, 它才被用上, 这样可以减少无资料访客下载页面时的开销.
Q2: 为什么不用外部文件将 JavaScript 放起来? 也许那样维护起来更方便.
A2: 因为它只在这个地方用到了. 而且加载文件的数量也会影响页面下载速度, 为了这么点字节的代码, 不值得新开一个文件.
–>
<script type="text/javascript">function setStyleDisplay(id, status){document.getElementById(id).style.display = status;}</script>
<div class="form_row small">
<!– 访客昵称 (随便欢迎一下) –>
<?php printf(__('Welcome back <strong>%s</strong>.'), $comment_author) ?>
<!– 更改按钮 (点击后: 隐藏更改按钮, 显示取消按钮, 显示资料输入框) –>
<span id="show_author_info"><a href="javascript:setStyleDisplay('author_info',”);setStyleDisplay(‘show_author_info’,'none’);setStyleDisplay(‘hide_author_info’,”);"><?php _e('Change »'); ?></a></span>
<!– 取消按钮 (点击后: 显示更改按钮, 隐藏取消按钮, 隐藏资料输入框) –>
<span id="hide_author_info"><a href="javascript:setStyleDisplay('author_info',’none’);setStyleDisplay(‘show_author_info’,”);setStyleDisplay(‘hide_author_info’,'none’);"><?php _e('Close »'); ?></a></span>
</div>
<?php endif; ?>
<!– 资料输入框 –>
<div id="author_info">
<div class="form_row">
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="1" />
<label for="author" class="small">用户名<?php if ($req) _e('(required)'); ?></label>
</div>
<div class="form_row">
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="2" />
<label for="email" class="small">Email地址<?php if ($req) _e('(required)'); ?></label>
</div>
<div class="form_row">
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="3" />
<label for="url" class="small">网站地址</label>
</div>
</div>
<!– 有资料的访客 –>
<?php if ( $comment_author != "" ) : ?>
<!– 隐藏取消按钮, 隐藏资料输入框 –>
<script type="text/javascript">setStyleDisplay('hide_author_info','none');setStyleDisplay('author_info','none');</script>
<?php endif; ?>
好了，我已经说的再简单不过了，如果还是不明白那么就给我留言吧！
| anyShare分享到： | |
| |
上一篇 « 换主题了！ 下一篇 » 解决支付宝证书导入问题！
似乎ctrl+enter更需要加上
[回复]
MS是一个技术博客，我很喜欢，订阅了
[回复]
graygift 回复:
九月 30th, 2009 at 17:21
?MS 没弄明白什么是MS，我倒是知道什么是SM！
[回复]
hjzgc 回复:
七月 22nd, 2010 at 14:29
貌似
[回复]