我是非常反对把 javascript 写在 html 标签里的，这和 style 写在 html 标签里一样，虽然不违反 W3C 标准，但也不推荐这么写。因为：

1、完全没有复用性可言，如果是个表单，输入框很多，每个都需要这样的效果，那就每个都这么处理吗？

2、如果要修改其中的提示文字，费时费力又不好维护。

3、我们倡导结构（html）、表现（css）、行为（javascript）三者分离，这才是一个好的页面。

那要怎么写才能实现这个效果，而且既有复用性，又好维护，又不需要把 js 写进 html 里呢？

相信我们都有加载 jQuery，我就基于 jQuery 写了一个方法，先看 DEMO，具体方法如下：

1、html 部分：

2、引入 jQuery：

3、执行脚本：

实现的最终效果是一样一样的，或许是我个人的代码洁癖，但我相信，好代码从细节开始！

也确实，很久没有更新过了，不过今天写的这篇文章希望足够能帮我“除草”。文章名字很长，万戈牌 WordPress 搜索自动匹配提示标签关键词。到底是个啥呢？客官们可以先试用一下本站右上角的搜索框，输入一些关键词，没等你输入完应该就可以看到有一些相关的 keywords 显示出来了，相信大家对这个应该不陌生吧，Google、百度等所有搜索引擎都是这么做的，智能匹配搜索提示！

想知道怎么实现的吗？先等我把废话说完，否则我绝对不会告诉你插件的下载地址就在文章末尾！

大家知道，在 WordPress 我不是很提倡使用插件，主要是考虑到速度和性能等方面，不过这次我还是把这个 WordPress 搜索关键词提示的功能做成了插件的形式。主要是因为，要把这个方法用非插件的方式公开出来，恐怕又有一大半的人要来问我 jQuery 放在哪里？functions.php 没有咋办？所以考虑到这个功能的易用性和大众化，还是做成插件更好。

这个插件的特点在哪里？

1、做插件的时候着重考虑了性能问题，当用户鼠标聚焦到搜索输入框的时候，才会异步去加载一些需要的脚本和请求（这就是传说中的按需加载），所以在不使用站内搜索的情况下，该插件不会带来速度和性能的影响，可以放心使用。

2、支持匹配中文关键词（这是必须的啊！）

3、支持方向键上、下以及回车的键盘快速选择。

如何使用这个插件？

1、上传后在 WordPress 后台启用这个插件即可。没有任何配置选项，不需要修改 WordPress 主题，全自动帮您搞定一切。插件嘛，不就是为了图个方便

2、这个真没有了……

我的主题启用这个插件无效，这是什么情况？

1、检查一下您的原主题有没有 JS 错误，如果主题本身就报错，很有可能阻断万戈牌 WordPress 搜索自动匹配提示标签关键词插件（这插件名字是不是起的太长了。。。）的 JS 执行。

2、检查您的主题 header.php 中有没有 wp_head() 这个方法，本插件载入的脚本依赖于这个方法，如果没有请加上。

3、检查您的 RP 值，不解释 ^_^

和其他插件或者功能冲突怎么办？

暂时我还没有碰到这种情况，如果被您有幸碰到了，您可以自己修改插件以适合您的主题，如果还是有不良反应请参照以下声明第2点，谢谢。

提示的颜色太丑了，我要怎么换？

可以在插件目录下的 wg-tags-tip/style.css 文件里进行修改，也可以在您自己的主题的样式文件里覆盖重写样式。

声明：

1、仅在本地的几个主题上测试通过，不能模拟所有主题的情况，如有 Bug，欢迎反馈给我，我会及时修正，谢谢。

2、该插件免费，属于非卖品，所以无售后服务，如需个性化地调整，概不接受，也不要拿付费诱惑我，我会酌情考虑的！

让您久等了，最后献上万戈牌 WordPress 搜索自动匹配提示标签关键词插件的下载地址：wg-tags-tip

第一，原生的 JavaScript，不依赖于任何 JS 库。

在平时的开发过程中，我们已经太过于依赖 jQuery、YUI 之类的 JS 框架，框架当然是好东西，但是正因为如此，我们就丧失了很多接触到 JavaScript 深层次的机会，也使得实现一些小功能就要杀鸡用牛刀地把整个框架引进来。就像吃薯条我喜欢原味的一样，原生的 JavaScript 也有其诱人之处。

第二，全自动化地焦点图。

什么是全自动化的焦点图？想象一下你所需要的全自动化应该是什么样的，告诉我尺寸大小、轮播间隔时间、图片的以及链接的基本信息，还有放在哪个位置，然后我就给你生成一个焦点图。这太完美了，而不需要再调整样式啊什么乱七八糟的，对使用者来说，越简单越好，不是吗？

基于以上两个出发点，这个原生 JavaScript 版的自动化焦点图功能就诞生了。请看 DEMO。

呃……这 DEMO 里的图片还在用我两年前的轮播图的图片，有点寒酸，对不起观众啊，不过图片不是重点，请看代码。代码部分我就不在文章里贴出来了，有兴趣的朋友可以查看 DEMO 的源代码，我没有压缩过，注释也都还在，相信应该是比较明了的。

调用这个方法也是相当简单，方法接受6个参数：
width: 560,    // 焦点图宽度（非必须，默认值自适应）
height: 250,   // 焦点图高度（非必须，默认值自适应）
auto: false,   // 是否自动切换（非必须，默认值 false）
interval: 3000,   // 切换间隔时间（非必须，默认值 3000，当 auto 为 true 时有效）
targetId: 'slide',  // html 对应的焦点图 ID（必须）
data: [ ]   // 焦点图数据（必须）

然后建一个和 targetId 值相同的空标签 ID 就可以了，你不用担心你的焦点图结构怎么写，因为在 JS 里会帮你完成这些，你也不用担心焦点图的样式怎么调整，因为在 JS 里也会为你解决这些困扰。

那么这个可以为你完成一切的全自动，而且又是原生的 Javascript 焦点图，会不会特别庞大呢？我对这个 JS 压缩后，只有 4Kb，是不是也非常的小清新呢？想象一下，如果你用 jQuery 来实现一个同样功能的焦点图功能，咱们且不说焦点图所需耗费的 JS 大小，单说一个压缩过的 jQuery 1.7 就要 90K+，差距啊有木有！

不过，因为做这个主题的时间比较仓促，又想赶在新年前上线，很多功能还没有完成，真是对不起尘埃老哥的设计呀。大家可以看到，我整个侧边栏还没有做，为了不显得太空空荡荡，就填了一个广告（原来广告还能这么用，嘿嘿）；另外评论模块也没做，暂时用第三方的“评论啦”来代替，感觉也不错，但是昨天导入 WordPress 9W 多条评论的时候让我非常内桑，直到发文前，还在导入 ing....还有很多细枝末节的小功能，可以提升用户体验的就更没有时间做了，各种速度上的优化也只做了一半。所以这个主题。。。呃。。。正处于 beta 的 beta 阶段，拍砖请悠着点，谢谢。

当然，虽然说是各种cuo，但毕竟是万戈牌主题，cuo 也要 cuo 的很有范儿！主题延用之前 HTML5 这是自不必说了，另外还加上了很潮的微数据，让 SEO 尽显奢华，哈哈；在首页的最新文章功能还大胆使用了 AJAX 来异步获取文章，对用户体验应该不错；搜索还提供了关键词自动提示功能；还有很多隐蔽的亮点，大家有兴趣的慢慢找吧。

欢迎各位对这个新主题提出宝贵意见，也欢迎大家来找碴，挑 bug。下午就要赶火车去了，主题的完善工作要等到年后来做了，因为我说了，今年过节不上网。好好过个年，别再为代码纠结了，哦耶~

最后，预祝大家新年快乐，回家路上顺顺利利 \(^o^)/

因为我也不是刻意去写这个 jQuery 的无缝滚动，所以 JS 也没封装过，只提供了几个基本的参数作修改，只能仅作参考。

HTML 部分：

jQuery 部分：

基本原理和使用方法都写在注释里了，我也就不多作解释了。最后说一句，google、百度上搜一下就知道，已经有大把大把写好的横的竖的无缝的滚动，总有一款适合你，但是我觉得，只有自己亲自写的才最适合自己的需要，所以就有了以上代码。

就本站现在用的这个主题来说，已经用上了这个 WordPress 的语音搜索功能，有图为证。

可以看到右上角的站内搜索框比以往多了一个小话筒的图标，点击之后就会弹出一个小的提示框，此时可以清晰地说出你需要搜索的关键词，截图中是我语音说的 "wordpress" 这个关键词，有兴趣的朋友可以拿本站做测试。

但是，这个功能暂时只能在 Chrome 11 版本以上的谷歌浏览器上看到这个效果。因为这是在 input 输入框里添加 x-webkit-speech 属性来实现的，从这个属性的命名可以看出，webkit，这是一个 webkit 核心浏览器的私有属性，所以你可以切换到 Chrome 浏览器来测试本功能。

x-webkit-speech 是 html5 的 speech 功能的 API，Google 的 Chrome 在对 HTML5、CSS3 的新技术标准的支持上特别积极，所以很有幸，我们可以在 Chrome 上体现各种新奇的功能特性。实现的方法也特别简单，在你的搜索输入框的 input 标签里添加 x-webkit-speech 属性即可，如下：

废话很多，但是代码却很简单，赶紧试试呗~

为此我还特地去注册了一个腾讯微博开放平台的开发者，当我开始阅读开发文档的时候，才发现，他妹的，腾讯官方已经推出一个相同功能的应用，叫作 “Q-Share”，再翻阅了一下其他资料，原来已经有前辈写出了 js 页面文字选中后分享到新浪微博的方法，那我就省力多了，两者结合一下，把新浪微博和腾讯微博两个按钮都加上了，然后闲的蛋疼的我又把它翻译成了 jQuery 的方法。

效果的话就可以看本站了，选中任何文字，就会在右上角显示两个微博按钮，点击试试吧。

实现的方法也很简单，只需要两步：

1、引入 jQuery，相信大多数 WordPress 博客都已经引入了 jQuery，那就可以直接进行第二步了。

2、在页面底部，或者更确切的说，在引入 jQuery 库的后面加上这样一段 JS，你就可以看到和本站一样的效果了。

是不是很简单呀？

赶紧选中本文的标题，在微博上通知你的好友来围观吧，哈哈~

PS：最后，说一句，其实这个方法不仅仅适用于 WordPress，JS 是通用的，你可以把这段 JS 挂载到任何网站上都可以得到相同的效果

PS2：最最最后，再说一句，麻烦各位在使用前，把 JS 里的两张微博的图片路径替换成自己的地址，因为小站流量有限，大家帮我省着点花呗，嘿嘿。

相信大多数同学，包括我在内，用到的图片 HighSlide 效果都是用的 WordPress 的插件，或者引的 jQuery 的插件，但是这必竟不能完全满足我的需求，而且在我看来那些 JS 也太庞大了一些，还不如自己写一个。做了一个简单的 DEMO，大家可以看一下。

如果你会用 Firebug 这样的工具，就可以看到，页面中所有的图片，包括 DOM 节点，都是通过 JS 注入进来的，而且在初使化的时候只生成当前显示的五组图片，只有当用户点击下一张或者点击图片放大时，才会有新的图片和节点加载进来，同样，如果用户不点击，就不会去加载。这就大大节省了初使化需要加载的图片数量。

在 JS 没有压缩之前，也只有区区 6K 的大小，所以我相信这是大多数用户和站长都能够接受的，不过虽说只有 6K，也有近 200 行的代码，篇幅有限，我就不把具体的 JS 和 CSS 贴出来了，有需要的朋友可以直接下载我的 DEMO，DEMO 里的 JS 没有压缩，注释也都写的比较清楚。

最终效果和现在我用的差不多，但是代码却千差万别，细节决定成败，争取做好每一个细节！

关于幻灯轮播图，想必大家都不陌生，尤其是基于 jQuery 的，插件、代码网上一搜一大堆，但是真正符合自己需求的几乎没有，所以我要打造一个符合自身需求，经得起广大网民考验的 jQuery 轮播图！

思路

为什么说网上其他一些轮播图不符合我的要求？我的需求又是什么呢？

现在网上可以找到的多数幻灯轮播图的 jQuery 插件的作法是，先把图片和链接的 HTML 写好，然后控制隐藏和显示来轮流展示当前的幻灯图片。但是对用户而言，我们始终只是看到当前的一张图片，那其他几张隐藏的图片为什么要事先加载进来呢？这不是费时费力吗？所以我的第一个需求是按需加载。

我们一般会把轮播图放在首页展示，但是首页的重点内容应该是最近更新的文章，至少我不认为图片展示功能需要被搜索引擎收录，所以我的第二个需求是符合  SEO。

实现

冲着以上两个需求，我做了一个 DEMO，这个 DEMO 和我现在的首页看起来效果基本一致，但实现的方法却天差地别。大家不妨看看这个 DEMO 的源代码，发现区别了吗？是的，在这个 DEMO 的 HTML 源代码中，你看不到任何的图片和相关信息，都由 JS 载入进来的，也就是说爬虫爬不到，而且是随着图片的切换，一张一张地载入当前的幻灯图片。

这里我就只分享一下我的 JS 写法，HTML 什么就请各位看源码吧，代码我就不一一细说了，注释也都写得很明白了。

优势

同样的效果，只是实现方法不同？会不会很蛋疼？这有什么优势呢？

举个例子来说，优化前，假设首页切换的幻灯图片有5张，平均每张图片20K，也就是说你的首页至少要加载100K的图片，而这100K的图片你能保证每个用户都会去看吗？如果用户不看，岂不是白白浪费了这100K的载入速度？

优化后，在首页初次载入的时候，仅需加载一张1K左右的，甚至是可有可无的 loading 图片，当用户点击下一张或者达到定时器的设置时才会去加载下一张图片，大大节省了载入的时间。1K？100K？你懂的。

另外，用 JS 载入所需的图片还有一个好处，就是在一些不支持 JS 的手机浏览器上，载入 100K 的图片对于无法切换的轮播图而言，是一个极大的累赘，而且也会大大降低用户体验。

好了，大家各取所需吧，我也只是提供了一个思路，如果有更好的实现方法欢迎与我交流。

这个思路很不错，但是用 YUI 的童鞋毕竟是少数，我想 jQuery 应该也有类似的方法来处理异步跨域请求，果然，让我找到了 jQuery 的 getScript 方法，和 YUI 的 YAHOO.util.Get.script  有异曲同工之妙。就做了一个简单的 DEMO。

首先，先定义好最终要调用的数据格式：

这就是所谓的 JSONP，把数据以 JSON 的格式保存在一个对象中，方便我们之后去引用这个对象。

然后，我们就可以用 getScript 的方法去异步加载刚才保存的 JS，并处理返回结果，方法如下：

保存以上两个文件，在本地运行就能看到效果，当然，不要忘记加载 jQuery。

后记：

1、写习惯了原生的 JS，难得记录一下 jQuery，还真有点不习惯。

2、已经有童鞋再三催促我更新，再不写些东西，自己都觉得不好意思。