65.9K
CodeProject 正在变化。 阅读更多。
Home

为 Superfish 菜单和 Superfish 菜单 RTL 添加 jQuery UI 主题

Nikfazan
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.71/5 (5投票s)

2012 年 8 月 16 日

CPOL

4分钟阅读

viewsIcon

65046

downloadIcon

4551

本文展示了如何为 Superfish 菜单和 Superfish 菜单 RTL 添加 jQuery UI 主题。

引言

Superfish 是一个增强型的 Suckerfish 风格菜单 jQuery 插件，它使用现有的纯 CSS 下拉菜单，因此即使没有 JavaScript 也能优雅地降级（Superfish）。Superfish 之所以是一个非常好的插件，是因为除了基于纯 CSS 之外，每当你需要一个好的RTL 菜单时，你都可以使用 Superfish。 这里你可以找到一篇关于如何 RTL (从右到左) Superfish Menu (jQuery Plugin) 的好文章。

所以 Superfish 工作得很好。让我们通过添加 jQuery UI 主题来使其更好。 这里你可以找到关于如何使用 jQuery UI 的完整文档。

获取 jQuery UI 主题

首先，让我们从 这里 下载一个jQuery UI 主题。

选择好主题并下载后，你应该会得到一个类似这样的文件 "jquery-ui-1.10.1.custom.zip"。解压它，你会发现如下的文件夹：

  • css
    • custom-theme (你选择的主题名称)
      • 图像 
      • jquery-ui-1.10.1.custom.css
      • jquery-ui-1.10.1.custom.min.css
  • development-bundle (这个我们用不上)
  • js
    • jquery-1.9.1.js
    • jquery-ui-1.10.1.custom.js
    • jquery-ui-1.10.1.custom.min.js
  • index.html

将 jQuery UI 添加到 Superfish

现在，下载 (Superfish 的 zip 压缩包可在此处获得：superfish-master.zip) Superfish 插件及其示例。解压 zip 文件后，你会找到一个名为 "superfish-master" 的文件夹，其中包含：

  • css
    • superfish.css
    • superfish-navbar.css
    • superfish-vertical.css
  • images 
  • js
    • hoverIntent.js
    • jquery.bgiframe.min.js
    • jquery-1.9.0.min.js
    • superfish.js
    • supersubs.js
  • example.html

你应该从 js 文件夹中删除 "jquery-1.9.0.min.js"，并从中添加 jQuery UI 主题文件夹中的 "jquery-1.9.1.min.js" 和 "jquery-ui-1.10.1.custom.min.js"。另外，从 jQuery UI 的 css 文件夹中添加 "images" 和 "jquery-ui-1.10.1.custom.min.css" 到 superfish 的 css 文件夹。你的 superfish 文件夹应该如下所示：

  • css
    • 图像
    • jquery-ui-1.10.1.custom.min.css
    • superfish.css
    • superfish-navbar.css
    • superfish-vertical.css
  • images 
  • js
    • hoverIntent.js
    • jquery.bgiframe.min.js
    • jquery-1.9.1.min.js
    • jquery-ui-1.10.1.custom.min.js
    • superfish.js
    • supersubs.js
  • example.html

现在我们拥有了所有需要的材料。
打开 "superfish.css" 进行编辑，搜索 "/*** DEMO SKIN ***/"。由于我们要为 superfish 添加 jQuery UI 主题，因此我们不需要任何设置了颜色、背景或边框的 CSS，所以我们将那里的一切都替换为：

/*** DEMO SKIN ***/
.sf-menu {
    float:        left;
    margin-bottom:    1em;
}
.sf-menu a {
    border: none;
    padding:     .75em 1em;
    text-decoration:none;
}

现在打开 "example.html" 进行编辑。我们必须添加 "jquery-ui-1.10.1.custom.min.css" 样式表以及 "js/jquery-1.9.1.min.js" 和 "js/jquery-ui-1.10.1.custom.min.js" JavaScript 文件到 "example.html"，所以添加这些标签：

<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.1.custom.min.css" media="screen">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.1.custom.min.js"></script>
并删除这个（我们之前已经删除了 "jquery-1.9.0.min.js"）：
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
同样，
  • 我们需要将 "ui-state-default" 类添加到 "ul.sf-menu li"
    $("ul.sf-menu li").addClass("ui-state-default");
    (你可以在 addClass 中找到关于 "addClass" 的信息，并在 这里找到关于 "sf-menu" 的信息。)
  • 当鼠标指针进入 "ul.sf-menu li" 时，我们需要为 "ul.sf-menu li" 添加 "ui-state-hover" 类，并在鼠标指针离开 "ul.sf-menu li" 时移除 "ui-state-hover" 类。
    $("ul.sf-menu li").hover(function () { $(this).addClass('ui-state-hover'); },
                         function () { $(this).removeClass('ui-state-hover'); });
    (你可以在 hover 中找到关于 "hover" 的信息)
所以你的脚本应该大致如下：
<script type="text/javascript"> 
   // initialise plugins
   jQuery(function(){
        jQuery('#example').superfish({
                //useClick: true
            });
            
        $("ul.sf-menu li").addClass("ui-state-default");
    
        $("ul.sf-menu li").hover(function () { $(this).addClass('ui-state-hover'); },
                                 function () { $(this).removeClass('ui-state-hover'); });
    
    });
</script>

好的，工作完成了。现在用网页浏览器打开 "example.html" 查看结果。你的菜单应该如下所示：

将 jQuery UI 添加到 Superfish RTL

要制作 **Superfish Menu RTL**，你需要执行更多步骤。首先，从 这里下载 **Superfish RTL** (Superfish RTL 的 zip 压缩包可在此处获得：jquery.superfish.zip)。解压 zip 文件后，你会找到一个名为 "rtling-superfish" 的文件夹，其中包含：

  • css
    • superfish.css
    • superfish-navbar.css
    • superfish-navbar-rtl.css
    • superfish-rtl.css
    • superfish-vertical.css
    • superfish-vertical-rtl.css
  • 图像
    • arrows-ffffff.png
    • arrows-ffffff-rtl.png
    • shadow.png
  • js
  • index.html

我们需要将 "superfish-navbar-rtl.css"、"superfish-rtl.css" 和 "superfish-vertical-rtl.css" 复制到 css 文件夹，同时打开 "superfish-rtl.css" 进行编辑，并将 "/*** DEMO SKIN ***/" 部分替换为：

/*** DEMO SKIN ***/
.sf-menu {float:right;}

为了在 IE7、IE6 中正确显示 Superfish RTL 菜单，我们需要将以下代码添加到 "superfish-rtl.css" 中：

.sf-menu{ width:100%;}
.sf-menu.sf-vertical {width:10em;}
.sf-menu li a {position:static;}

同时将 arrows-ffffff-rtl.png 复制到 images 文件夹。

你的 RTL 菜单的 superfish 文件夹应该如下所示：

  • css
    • images 
    • jquery-ui-1.10.1.custom.min.css 
    • superfish.css
    • superfish-navbar.css 
    • superfish-navbar-rtl.css
    • superfish-rtl.css
    • superfish-vertical.css
    • superfish-vertical-rtl.css
  • 图像
    • arrows-ffffff.png
    • arrows-ffffff-rtl.png
    • shadow.png
  • js
    • hoverIntent.js
    • jquery.bgiframe.min.js
    • jquery-1.9.1.min.js 
    • jquery-ui-1.10.1.custom.min.js
    • superfish.js
    • supersubs.js 
  • example.html 

现在打开 "example.html" 进行编辑。我们必须添加 "superfish-rtl.css"，所以添加这个标签：

<link rel="stylesheet" type="text/css" href="css/superfish-rtl.css" media="screen" />

如果你需要垂直或导航栏菜单，可以添加 "superfish-vertical-rtl.css" 或 "superfish-navbar-rtl.css" 样式表：

<link rel="stylesheet" type="text/css" href="css/superfish-vertical-rtl.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/superfish-navbar-rtl.css" media="screen" />

同样，找到 <ul class="sf-menu" id="example"> 并将其放入 <div style="direction: rtl;"> 或类似的标签中。

好的，工作又完成了。现在用网页浏览器打开 "example.html" 查看结果。你的菜单应该如下所示：

历史 

参考

  1. Superfish
  2. RTLing Superfish Menu
  3. jQuery UI
  4. addClass
  5. hover 
© . All rights reserved.