草庐IT

jquery-ui - 在 jQuery UI 选项卡之间共享一个元素?

coder 2023-08-11 原文

我正在使用 jQuery UI 的选项卡来划分页面上的内容。我有一个“链接栏”,我想卡在每个选项卡的底部。 (选项卡文本会发生变化,但通常它们会在选项卡中向左或向右导航用户。)

在第一个选项卡内托管#linkBar div 使其“看起来”正确,在 Themeroller 的边框内。将它放在“父选项卡”div 之外,将链接置于主题边框下方。我试过创建一个间隔 div,但它只会将 #linkBar 进一步向下推。

当然,当用户切换到另一个选项卡时,链接栏就会消失。如何在选项卡之间组织元素的所有权?我是否应该动态销毁正在导航离开的选项卡上的#linkBar div 并在导航到的选项卡中重建它?或者是否有更好的方法在它们之间移动它,或者只是管理可见性?

我想让链接栏作为页脚跟随每个选项卡上的内容,在每个选项卡的最后一个内容下方“ float ”一两行(而不是将其置于相对于选项卡栏的固定位置) .

最佳答案

好的...它只是将 jQuery UI 类添加到 linkBar。 Check out my working jsFiddle demo:

我将 linkBar div 移出 tabOne div,并将其放在 tabs div 的底部:

<div id="container">
    <div id="title">
      <h1>title bar</h1>
    </div>
    <div id="tabs">
        <ul>  
            <li><a href="#tabone">one</a></li>  
            <li><a href="#tabtwo">two</a></li>  
            <li><a href="#tabthree">three</a></li>
        </ul>  
        <div id="tabone">
            content goes here
            <br><br><br><br>more stuff<br><br><br>more stuff<br><br>
        </div>    
        <div id="tabtwo">
             content goes here...
        </div>
        <div id="tabthree">
             content goes here...
        </div>
        <div id="linkBar">
            <span id="leftLink"><< left link</span>
            <span id="rightLink">right link >></span>
        </div>
    </div>
</div>

我稍微改变了 linkBar 样式,给它一个顶部和底部边距,并默认隐藏它:

#linkBar {
    display: none;
    margin: 10px auto;
}

然后我简单地将 jQuery UI 类添加到 $linkBar。我稍微修改了 jQuery 以使其更具可读性:

$("#accordion").accordion({ header: "h3" });

var $tabs = $("#tabs"),
    $linkBar = $("#linkBar");

$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$linkBar.show();
$tabs.tabs();

$('#title').click(function() {

    $tabs.tabs('select', 0);
    return false;

});

注意:您可以将 class="ui-tabs-panel ui-widget-content ui-corner-bottom" 添加到 linkBar div 中,然后完成它。但是,我想我更喜欢在 JS 中更好地管理它。

关于jquery-ui - 在 jQuery UI 选项卡之间共享一个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6192798/

有关jquery-ui - 在 jQuery UI 选项卡之间共享一个元素?的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序,虽然我自己可以处理一大堆yml文件,但我说的语言(非常)有限,最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器,其中一些翻译器不愿意或无法处理存储库中的100多个文件,处理语言数据。谢谢&问候,安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题,我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby - 使用 Vim Rails,您可以创建一个新的迁移文件并一次性打开它吗? - 2

    使用带有Rails插件的vim,您可以创建一个迁移文件,然后一次性打开该文件吗?textmate也可以这样吗? 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件,这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails,您可以创建一个新的迁移文件并一次性打开它吗?,我们在StackOverflow上找到一个类似的问题: https://sta

  3. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前,我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它,但这似乎不是“ruby方式”,我将需要在不久的将来访问更多模型。这可能会变得很脏,是否有针对这种情况的任何技术?注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展,本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向,这似乎很麻烦。最终从任何

  4. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller,client和test_client。客户端Controller已经构建,我想创建一个test_clientController,我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集,然后呈现客户端Controller的索引View,以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  5. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如,一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情,所以我什至不知道从哪里开始。任何帮助,将不胜感激。谢谢! 最佳答案 无论Rails是什么,几乎所有Web应用程序都有您的要求,大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去,网站不应直接访问彼此

  6. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  7. ruby - 通过 ruby​​ 进程共享变量 - 2

    我正在编写一个gem,我必须在其中fork两个启动两个webrick服务器的进程。我想通过基类的类方法启动这个服务器,因为应该只有这两个服务器在运行,而不是多个。在运行时,我想调用这两个服务器上的一些方法来更改变量。我的问题是,我无法通过基类的类方法访问fork的实例变量。此外,我不能在我的基类中使用线程,因为在幕后我正在使用另一个不是线程安全的库。所以我必须将每个服务器派生到它自己的进程。我用类变量试过了,比如@@server。但是当我试图通过基类访问这个变量时,它是nil。我读到在Ruby中不可能在分支之间共享类变量,对吗?那么,还有其他解决办法吗?我考虑过使用单例,但我不确定这是

  8. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象,为什么它会起作用? - 2

    如果您尝试在Ruby中的nil对象上调用方法,则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而,有一个tryRails中的方法,如果它被发送到一个nil对象,它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常? 最佳答案 像Ruby中的所有其他对象

  9. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串? - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串?SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复?

  10. ruby - #之间? Cooper 的 *Beginning Ruby* 中的错误或异常 - 2

    在Cooper的书BeginningRuby中,第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee

随机推荐