Browse: Home / / 隐藏搜索框旁边的按钮

隐藏搜索框旁边的按钮

By Charles on 三 10th, 2008 | 1454 Views

用惯了K2，很喜欢K2的Live Search，真是相当酷的功能呢，但是以我现在的实例，实在是没有办法模仿出来啊。就算是从K2抄过来，也觉得好难啊，至少不是一朝一夕能办到的。

所以，至少（我总是舍难求易）我要模仿个样子过来，(*^__^*) 嘻嘻……

侧边栏的Search框，是WordPress里面自带的，怎么才能把那个按钮给隐藏掉呢？

嘿嘿，我去参考了K2的代码。说实在的，一开始，还真的没有找到。后来经过多种手段（我偷师有多种办法，以后慢慢介绍，哈哈）分析，终于发现，原来K2使用的是javascript脚本代码做到的这个事情。

毫不留情地偷过来，啦啦啦~~~

首先，我编辑了一段代码，存成了js文件。如下：

下载: customutils.js
  1.  jQuery(document).ready(function(){
  2.      //提示文字
  3.      var searchPrompt = "Search...";
  4.      //搜索按钮
  5.      var submitButton = jQuery('#searchform input[@type=submit]');
  6.      //搜索输入框
  7.      var inputAera = jQuery('input#s');
  8.  
  9.      //隐藏搜索按钮
  10.      submitButton.hide();
  11.      //设定搜索框内提示文字
  12.      inputAera.val(searchPrompt);
  13.  
  14.      //设定搜索框的行为
  15.      inputAera.focus(function() {
  16.          if (inputAera.val() == searchPrompt) {
  17.              inputAera.val('');
  18.          }
  19.      })
  20.          .blur(function() {
  21.          if (inputAera.val() == '') {
  22.              inputAera.val(searchPrompt);
  23.          }
  24.      })
  25.          .keyup(function(event) {
  26.              var code = event.keyCode;
  27.              if (inputAera.val() == '') {
  28.                  return false;
  29.              } else if (code == 27) {
  30.                  inputAera.val('');
  31.              } else if (code != 13) {
  32.                  //原来是Live Search，也就是每键入一个
  33.                  //字符，只要间歇超过2秒，就会启动搜索了
  34.          }
  35.      });
  36.  });

有了这段代码，就可以使有“搜索”两个字的按钮给隐藏掉了。
然后要做的就是把这段代码插入到模板主题中。
打开index.php，找到：

</head>

在前面加上：

<script type="text/javascript" src="<?php bloginfo('template_url');?>/customutils.js"></script>

好了，现在试试看吧，什么不行？使用多种手段（靠！又是这个……）发现，原来没有jQuery对象。只好又去下载了压缩版的jQuery.js（这是什么东东？我以后的文章会说的啦~），然后再加上一句：

<script type="text/javascript" src="<?php bloginfo('template_url');?>/jquery.js"></script>

好了，这下大功告成了。
（我是基于SandBox1.3改的，实际上，要根据自己模板的不同，来决定是否加入jQuery，有的模板可能本来就有了。）

作者：Charles

原文链接：隐藏搜索框旁边的按钮

《Becomin' Charles》版权所有，转载时必须以链接形式注明作者和原始出处及本声明。

Posted in | Tagged , , , , | 5 Responses

5 responses to “隐藏搜索框旁边的按钮”

  1. Charles
    Charles
    2008/07/09 at 10:47 | | Reply

    @yixia：侠姐怎么改行考古了？提交肯定是没有问题，跟这个代码没关系的，这个代码就是用来隐藏那个按钮的。嘿嘿……这是以前使用sandbox的时候，为了隐藏按钮用的。

    1. koo19
      koo19
      2010/06/03 at 16:09 | | Reply

      不错，不过，怎么用css隐藏？不用这么麻烦，可行吗？

  2. yixia
    yixia
    2008/07/09 at 08:10 | | Reply

    这个代码真的能自动提交吗？好像没有submit啊？
    p.s. 下载链接转到404页面（悄悄说，那个页面不好看）

  3. snowblink
    snowblink
    2008/03/10 at 16:54 | | Reply

    等有空了再慢慢学习……这两天又忙起来了，顾不上打理：（

  4. Charles
    Charles
    2008/03/11 at 21:33 | | Reply

    呵呵，希望对你能有帮助

Leave a Reply