具有下拉启用选项卡的jQuery UI选项卡 [英] jQuery UI Tabs with dropdown enabled tabs

问题描述

我目前正在使用jQuery UI进行页面导航，我正在尝试将下拉菜单集成到选项卡中，因为当有许多选项卡时，jQuery UI看起来不太好。要了解我到目前为止，我们来看看截图： http：// i。 imgur.com/T9lwLI8.png

顶部是jQuery-UI常规选项卡，下部是新菜单设计，鼠标悬停在'患者'。新的菜单设计是纯CSS - 只是分层的ul和li标签显示：none或块取决于：hover。

它是一个噩梦，试图替换默认的jQuery- UI标签。样式和jQuery功能似乎是混合在一起的，因为删除默认的ids和类会打破标签功能，但是如果我将默认的ids和类添加到新的选项卡部分，它会为其添加不必要的样式以及其他奇怪的错误。 >

我的猜测是，jQuery UI Tabs只需要一个包含选项卡的ul列表，但是因为我的CSS实现对于它不喜欢的每个启用下拉列表的选项都使用ul列表。我查看了.js和.css文件，但老实说，我不知道我在找什么，因为我不是专家。

我一直是谷歌搜索，但唯一可以找到的解决方案通常是采用转盘来隐藏/显示额外的标签，否则会被推到另一行。我如何获取jQuery UI选项卡来处理鼠标悬停的下拉菜单的选项卡？

解决方案

它花费了大量的搜索沮丧，但我终于设法得到解决方案。这不是很理想，但它的工作原理。

我将ul标签直接隐藏在tabsdiv下jQuery UI使用display：none然后滚动我的导航菜单

我写了这个简单的功能来在页面之间进行浏览（取自此处）：

  function changeTab（tabIndex）{
 $（＃tabs）。tabs 选项，活动，tabIndex）; 
} 
  

tabIndex是零索引的，所以如果你的标签是＃page-2， tabIndex将是1.给你的选项卡唯一的id属性，然后滚动一些jQuery像：

  $（'＃tabTwo' ）.click（function（）{
 changeTab（1）; 
}）; 
  

再次不是一个很好的解决方案，但重要的是它的工作。

I am currently using jQuery UI for page navigation and I am trying to integrate dropdown menus into the tabs because jQuery UI does not look good when there are many tabs. For an idea of what I've got so far, take a look at this screenshot: http://i.imgur.com/T9lwLI8.png

The top section is the regular jQuery-UI tabs and the lower section is the new menu design with the mouse hovered over 'patient'. The new menu design is pure CSS - simply layered ul and li tags display: none or block depending on :hover.

Its been a nightmare trying to replace the default jQuery-UI tabs. Styles and jQuery functionality appear to be mixed together because removing the default ids and classes breaks the tabbing functionality but if I add the default ids and classes to my new tabs section it adds unwanted styles to it as well as other bizarre errors.

My guess is that jQuery UI Tabs expects only one ul list containing the tabs but because my CSS implementation uses a ul list for every dropdown-enabled tab it doesn't like it. I've looked through the .js and .css files but to be honest I'm not sure what I'm looking for as I'm by no means an expert on the matter.

I've been Googling but the only solutions I can find usually resort to implementing a carousel to hide/show extra tabs that would otherwise get pushed to another line. How would I get jQuery UI tabs to work with tabs that have dropdown menus on mouseover?

解决方案

It took a lot of searching and frustration but I finally managed to come upon a solution. It's not exactly ideal, but it works.

I hide the ul tag directly under the 'tabs' div jQuery UI uses with display:none then roll out my navigation menu below it.

I wrote this simple function to navigate between pages (taken from here):

function changeTab(tabIndex) {
    $("#tabs").tabs( "option", "active", tabIndex );    
    }

tabIndex is zero-indexed, so if your tab is #page-2 then tabIndex would be 1. Give your tabs unique id attributes then roll it out with some jQuery like:

$('#tabTwo').click(function() {
    changeTab(1);
    });

Again not a great solution but importantly it does work.

这篇关于具有下拉启用选项卡的jQuery UI选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！