JavaScript Awesome Bar

• 下载源代码 - 6.63 KB

引言

jawBar 是用 JavaScript 实现的 Firefox 3 的 "Awesome Bar"。虽然不是一个完美的实现，但它确实包含了一个类似的外观和感觉。

背景

最近下载了 Firefox 3，我发现他们新的地址栏非常令人愉快，即使有点过于复杂。我决定我希望有一个类似的控件用于我自己的网页设计中。

使用代码

在你的 script 标签中包含 jawbar.js 文件。在 window.onload 事件（或任何在 DOM 准备好时发生的事件）中，创建你的 jawBar 对象并添加任何你想要的条目。

    <script type="text/javascript" src="jawbar.js"></script>
    <script type="text/javascript">
    window.onload = function()
    {
        var jbar = new jawBar('awesome');
        jbar.add({text: 'Ubuntu', 
            subtext: 'The best linux desktop around.', 
            icon: 'ubuntu.png', 
            searchValue: 'ubuntu linux os technology', 
            displayValue: 'http://www.ubuntu.com'});
        jbar.add({text: 'CodeProject', 
            subtext: 'Free Source code and Programming help', 
            icon: 'codeproject.png', 
            searchValue: 'asp.net c# .net programming code technology', 
            displayValue: 'https://codeproject.org.cn'});
        jbar.add({text: 'Wikipedia', 
            subtext: 'An encyclopedia anyone can edit', 
            icon: 'wikipedia.png', 
            searchValue: 'wiki', 
            displayValue: 'http://en.wikipedia.com'});
        jbar.add({text: 'JCritters', 
            subtext: 'MSAgent-style interactive critters', 
            icon: 'star.png', 
            searchValue: 'jcritter', 
            displayValue: 'http://www.jcritters.com'});
        jbar.add({text: 'Slashdot', 
            subtext: 'News for nerds.', 
            icon: 'slashdot.png', 
            searchValue: 'slashdot code programming nerds technology', 
            displayValue: 'http://slashdot.org'});
        jbar.add({text: 'Dictionary.com', 
            subtext: 'An online dictionary.', 
            icon: 'dictionary.png', 
            searchValue: 'dictionary', displayValue: 'http://www.dictionary.com'});
    }    </script>

构造函数

构造函数非常简单，只需要一个参数，你想要转换成 awesome bar 的文本框的 ID。

var bar = new jawBar('myid');
...
<input type="text" id="myid"/>

方法

• object.add(options)：向 awesome bar 添加一个新的条目。options 是一个 JavaScript 对象，包含你想要添加的文本，以及其他内容。
• object.position()：尝试为你的 awesome bar 定位一个隐藏的 div 和 iframe。通常你不需要调用它，但是如果你改变了元素的位置，你可能需要调用它。
• object.show()：使 div 和 iframe 可见。有效地显示搜索结果。
• object.hide()：隐藏 div 和 iframe。有效地隐藏你的搜索结果。
• object.remove(index)：移除索引为 index 的条目。如果未提供 index，则移除**所有**条目。

Add() 方法

add() 方法目前支持（并要求）传递以下选项

• text：将在 awesome bar 中出现的文本。
• subtext：将在文本下方以较小、倾斜的字体出现的文本。
• icon：显示在条目旁边的图标。应该是 16x16 像素。
• searchValue：在 awesome bar 中输入时实际搜索的文本。
• displayValue：当你点击一个条目时，实际会出现在 awesome bar 中的文本。

技术

即将到来的更新....

Bug

目前，如果 text 属性换行到下一行，subtext 可能无法正确显示。我怀疑这与 div 的 offsetHeight 没有被正确更新有关，因为这只发生在某些浏览器中，而不是所有浏览器中。

我确信还有很多其他的。这段代码更多的是一个概念，而不是一个完成的产品，所以出现 bug 和浏览器不一致的情况并不意外。

关注点

在 IE6 中，<select> 元素不遵守 z-index 顺序，并且始终在顶部。这个规则的一个例外是 iframe，它可以覆盖 <select>。目前，这个 iframe hack 被用于所有浏览器，但我计划在将来只用于 IE6。

历史

• 2008 年 6 月 18 日星期三 -- 文章创建。