草庐IT

jquery - Bootstrap 3 - 可折叠的右侧面板，如 Google Drive Details/Activity 面板

coder 2023-08-04 原文

正在为我们现有的产品设计新的网络布局。我们希望集成的团队聊天和事件提要显示始终显示在每个页面的右侧。我们使用的是 Bootstrap 3，我有一个看起来不错的模拟。我正在使用 vanilla Bootstrap 12 列大小调整样式来执行此操作:

现在我们希望允许用户折叠右侧面板(水平)，特别是对于水平空间很重要的 View ( GridView 等)。

是否有 Bootstrap 方法可以做到这一点？我对垂直拆分器小部件、顶部导航中的切换按钮或任何其他有意义的表示都很好。我需要更多关于网格大小的建议。

最佳答案

我的一个元素需要类似的方法，全屏 View 是 here .

我修改了脚本和布局，以实现您想要实现的目标。 here是代码，全屏是 here .即使在页面刷新后，我也使用 jquery cookie 来保留 View 状态。单击齿轮图标 将切换侧边栏。脚本是:

    $(function () {
        var $menu = $('#sidebar-wrapper');
        var $content = $('#main-wrapper');
        if ($.cookie('offcanvas') == 'hide') {
            $content.addClass('no-transition');
            $menu.hide();
            $menu.css('right', -($menu.outerWidth() + 10));
            $content.removeClass('col-md-10').addClass('col-md-12');
        }
        else if ($.cookie('offcanvas') == 'show') {
            $menu.show(500).animate({ right: 0 });
            //  $menu.show();
            $content.removeClass('no-transition');
            $content.removeClass('col-md-12').addClass('col-md-10');
        }


        $('.toggle-button').click(function () {
            $content.removeClass('no-transition');
            if ($menu.is(':visible') && $content.hasClass('col-md-10')) {
                // Slide out
                $menu.animate({
                    right: -($menu.outerWidth() + 10)
                }, function () {
                    $menu.hide(1000);
                });
                $content.removeClass('col-md-10').addClass('col-md-12');
                $.cookie('offcanvas', 'hide');
            }
            else {
                // Slide in
                $menu.show(500).animate({ right: 0 });
                $content.removeClass('col-md-12').addClass('col-md-10');
                $.cookie('offcanvas', 'show');
            }
            if ($content.hasClass('col-md-12') && $menu.is(':hidden')) {
                $menu.animate({
                    right: 0
                }, function () {
                    $menu.show(1000);
                });
                //  $menu.show();
                $content.removeClass('no-transition');
                $content.removeClass('col-md-12').addClass('col-md-10');
            }
        });
        $('.bs-tooltip').tooltip();
    });

您可以自定义布局/css 以获得您想要的内容。

关于jquery - Bootstrap 3 - 可折叠的右侧面板，如 Google Drive Details/Activity 面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22951823/

BootstrapActivity39contentcol-mdjqueryhtmlcsstwitter-bootstrap-3

有关jquery - Bootstrap 3 - 可折叠的右侧面板，如 Google Drive Details/Activity 面板的更多相关文章

  1. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  2. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  3. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  4. ruby - Sublime Text 3 多行法折叠 - 2

    所以...SublimeText具有折叠方法的内置功能，但是一旦方法声明跨越多行，它就会失去这种能力。有谁知道插件或使它工作的方法吗？具体来说，我在使用ruby​​时遇到了这个问题(我的团队遵守关于行长度的严格风格指南)，但语言应该无关紧要。 最佳答案 无需单击出现在函数定义第一行旁边的装订线中的向下箭头，您需要做的就是将光标放在函数的一个缩进行上(不是缩进的函数参数，而是在函数定义本身)并使用CtrlShift[键绑定(bind)(在OSX上使用⌘Alt[)折叠函数及其参数。使用CtrlShift](⌘Alt]在OSX上)展开，或

  5. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  6. Unity Shader 学习笔记（5）Shader变体、Shader属性定义技巧、自定义材质面板 - 2

    写在之前Shader变体、Shader属性定义技巧、自定义材质面板，这三个知识点任何一个单拿出来都是一套知识体系，不能一概而论，本文章目的在于将学习和实际工作中遇见的问题进行总结，类似于网络笔记之用，方便后续回顾查看，如有以偏概全、不祥不尽之处，还望海涵。1、Shader变体先看一段代码......Properties{ [KeywordEnum(on,off)]USL_USE_COL("IsUseColorMixTex?",int)=0 [Toggle(IS_RED_ON)]_IsRed("IsRed?",int)=0}......//中间省略，后续会有完整代码 #pragmamulti_c

  7. jquery - 如何在 rails 3.1 上安装 jQuery - 2

    我以为它已经安装了，但在我的gemfile中有gem"jquery-rails"但是在我的asset/javascripts文件夹中accounts.js.coffeeapplication.js都被注释掉了这是我的虚拟railsapplication但是在源代码中没有jQuery并且删除链接不起作用......任何想法都丢失了 最佳答案 看看thisRailscast.您可能需要检查application.js文件并确保它包含以下语句。//=requirejquery//=requirejquery_ujs

  8. jquery - Rails 如何创建 Jquery flash 消息而不是默认的 Rails 消息 - 2

    我想在页面顶部创建自定义Jquery消息而不是标准RailsFlash消息。我想在我的投票底部附近创建一条即时消息。我的Controller:defvote_up@post=Post.find(params[:id])current_user.up_vote(@post)flash[:message]='Thanksforvoting!'redirect_to(root_path,:notice=>'Takforditindlæg,deternuonline!')rescueMakeVoteable::Exceptions::AlreadyVotedErrorflash[:error]

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. jquery - 在 Rails 中从原型(prototype)切换到 jquery，助手呢？ - 2

    我目前从prototype切换到jquery主要是为了支持简单的ajax文件上传。我使用:https://github.com/indirect/jquery-rails95%的javascript代码是由railshelper编写的，例如:-remote_function-render:updatedo|page|-page.replace_html'id',:partial=>'content'-page['form']['name']=something-page.visual_effect:highlight,'head_success'...我知道我必须为Jquery重写5%

随机推荐