Tag: twitter bootstrap

bootstrap.js手风琴活跃指数?

我试图检索活动索引,以便我可以使用上一个/下一个按钮,并在手风琴的每个阶段错误检查表单值。 有没有办法获得手风琴的主动索引?

选择class control-group,其子节点不是span.error

我正在使用twitter bootstrap和jquery validate插件 我有一个表格行,看起来像: home phone <input type="number" class="span4" class="input-xlarge" id="home_phone" name="home_phone" value="property->home_phone ?>” rel=”popover” data-content=”Re-enter your home phone.” data-original-title=”homephone” > <input type="number" class="span4" class="input-xlarge" id="cell_phone" name="cell_phone" value="property->cell_phone ?>” rel=”popover” data-content=”Re-enter your cell_phone.” data-original-title=”cell_phone” > 在validation之后,当我在firebug中查看它时,带有错误的输入后跟span.error。我想选择类控制组,其中没有子节点是span.error。 我将不胜感激任何帮助。 比尔,谢谢

使用jQueryUI Accordionfunction的Scrollspy

所以我已经设法弄清楚如何使用scrolllspy,但是我没有意识到我的目录对于导航来说太长了。 我想知道如何添加手风琴类型的function,以便我的导航栏目录在滚动后传递关联的锚点时会崩溃。 我基本上是在寻找与bootstrap网站相同的function,因为它附带了侧边栏。 我已经看过这个: 使用bootstrap scrollspy作为崩溃的div,到一个附加的侧边栏但是我不确定这是否与我正在寻找的东西相同。 我也考虑过使用Greg Franko编写的TOCIFY插件,但我不确定如何实现它。 我一直在阅读TOCIFY文档,但我不确定它是什么我必须改变。 目前我的scrollspyfunction正在使用此设置: Executive Summary Defining Mental Health Review Process Findings and Recommendations Acknowledgement Preamble Section One: Our Context Mount Royal University: A World of Difference Mount Royal’s Vision Mount Royal’s Mission Mount Royal’s Guiding Principles Health and Safety at Mount Royal University Student Services Plan Rationale for […]

确认删除模式/对话框在部分视图中使用时不起作用

案例1 :当点击Delete 1按钮时,会弹出Bootstrap的modal dialog,当您单击该弹出窗口的Delete按钮时,如下所示, jquery代码正确地在Chrome浏览器的控制台窗口中写入Test: id1 。 情况2 :但是当您使用局部视图渲染相同的html时, jquery代码(如下面的case 2所示)不会向Chrome浏览器的控制台窗口写入任何内容。 我认为它可能与Case 2的主视图中的id = DeleteBtnParentID有关。 注意 :两种情况下jqueries之间的jqueries在于,在Case 2我使用事件委派,而在Case 1我没有必要。 案例1 :以下工作。 查看 (所有本身没有局部视图) Delete1 Delete2 Delete3 × Delete Warning Are you sure? Delete Cancel @section Scripts{ $(document).ready(function () { $(‘#DeleteBtnID’).on(‘click’, function (event) { console.log(‘Test: ‘ + $(this).attr(‘value’)); }); $(‘#myModal’).on(‘show.bs.modal’, function (e) { var btnValue = […]

Bootstrap标签预先输入不使用jQuery ajax填充菜单

我使用bootstrap标签( https://github.com/bootstrap-tagsinput/bootstrap-tagsinput )来填充一些标签。 我正在使用jQuery 3和Bootstrap 3.下面是代码片段。 它从服务器获取数据但不处理。 你能告诉我怎么解决这个问题吗? 我已经包含了https://github.com/twitter/typeahead.js和https://github.com/bootstrap-tagsinput/bootstrap-tagsinput和相应的CSS function attachOrgRoleTypeAhead(){ console.log(‘attachOrgRoleTypeAhead called’); $(‘.roletag’).tagsinput({ tagClass:’form-control input-sm’, //itemValue: ‘rolename’, //itemText: ‘rolename’, //display: ‘rolename’, allowDuplicates: false, freeInput: false, typeaheadjs: { displayKey: ‘text’, afterSelect: function(val) { this.$element.val(“”); }, source: function (query, process,asynchProcess){ var typeaheadData = {}; var rolesdata = {}; var $items = new Array; rolesdata.orgid= $(‘#orgidselector’).find(“option:selected”).val(); rolesdata.query=query; […]

如何使用JQuery.noConflict()来修复rails 3.2.12中JQuery和bootstrap之间的冲突?

$.noConflict()被添加到rails 3.2.12主应用application.js中的application.js中,以解决jquery和bootstrap之间的冲突。 但它没有按预期工作。 这是application.js: //= require jquery //= require jquery_ujs //= require jquery-ui //= require_tree . //= require bootstrap $.noConflict(); 单击新客户表单上的add_more_contact链接时,firebug中出现错误: ReferenceError: add_fields is not defined add_fields是application.js中定义的js函数: function add_fields(link, association, content) { var new_id = new Date().getTime(); var regexp = new RegExp(“new_” + association, “g”) $(link).parent().before(content.replace(regexp, new_id)); } 调用add_fields是通过application_controller.rb中的方法完成的: def link_to_add_fields(name, f, association) new_object = […]

如何延迟删除下拉菜单Bootstrap 4的类?

我试图在导航栏上切换一个类切换,但是当您移动鼠标时,下拉菜单会快速删除该类并隐藏菜单。 我认为它需要的只是延迟上课,但课程的表现仍然是即时的。 以下是hover问题http://sofzh.miximages.com/jquery/o8ccCn9.gifv的屏幕截图 是否有手动方式来编写切换? Codepen: https ://codepen.io/JacobLett/pen/jaaQYG ?编辑= 0110 到目前为止这是脚本 $(document).ready(function() { // executes when HTML-Document is loaded and DOM is ready // when you hover a toggle show its dropdown menu $(“.navbar .dropdown-toggle”).hover(function () { $(this).parent().toggleClass(“show”); $(this).parent().find(“.dropdown-menu”).toggleClass(“show”); }); // hide the menu when the mouse leaves the dropdown $( “.navbar .dropdown-menu” ).mouseleave(function() { $(this).removeClass(“show”); […]

Bootstrap 4导航栏有两行,底行可折叠

我希望2个导航栏显示在两个单独的行中,所有链接(可折叠项目)位于底部,顶部和标题和切换按钮位于顶行。 像这样: —————————————————— ONE_________BIG_________TITLE [Toggle] —————————————————— Nav items Icon Links Forms … —————————————————— 顶行将在移动和桌面设备中展开,但切换按钮应隐藏在桌面上。 底行将在桌面上展开,并在移动设备上折叠。 通过将所有内容包装在一个div.navbar中并使用display:table定位和垂直对齐徽标/标题并相互切换,我能够在bootstrap 3中执行此操作。 仅在桌面设备中,滚动后,我希望底行固定在顶部。 我曾经在bootstrap 3中使用词缀来实现这一点,任何想法如何用新版本来做到这一点? 同样在移动设备中,未折叠的顶行应固定在顶部。 这是我的bootstrap 3代码: #navcollapse { top: 0; width: 100%; z-index: 10050; } @media (max-width: 767px) { #navcollapse { position: static; } } #topnavrow.affix { top: 0; width: 100%; z-index: 10050; } @media (min-width: 768px) { […]

如何在更改选择框时打开Bootstrap模式

我试图在选择Box的更改事件上打开一个模态? 这是我的模态 × Add Comment Submit 并选择Box是: New Old Scrap 我需要做的是打开选择框的更改事件的模态 。 我试过的 在$(document).ready(function () {}); 方法1 $(“#selectNEWBox”).change(function(){ $(‘#fileUploadModal’).modal({ show: true }); }); 方法2 $(“#selectNEWBox”).change(function (){ $(‘#fileUploadModal’).modal(‘show’); }); 但这些都行不通。 我错过了什么吗?

如何在回发ASP.Net Core后保持标签处于活动状态

我有一个视图,其中包含一组选项卡,每个选项卡呈现不同的局部视图。 在阅读了这些引导选项卡的文档和W3Schools示例之后,我无法找到使活动选项卡在Postback上保持活动状态的方法。 我见过的所有示例都使用旧版本的.Net,也不适用。 这是我的代码。 我的控制器动作: public IActionResult DisplayCharts(DashboardChartsByMonthModel model) { //…do stuff model.MonthOrQuarterChart = monthChart; model.UserChart = userChart; return View(model); } 在视图@Scripts部分中: $(function(){ var hash = window.location.hash; hash && $(‘ul.nav a[href=”‘ + hash + ‘”]’).tab(‘show’); $(‘.nav-tabs a’).click(function (e) { $(this).tab(‘show’); var scrollmem = $(‘body’).scrollTop() || $(‘html’).scrollTop(); window.location.hash = this.hash; $(‘html,body’).scrollTop(scrollmem); }); }); $(‘a[data-toggle=”tab”]’).on(‘shown.bs.tab’, function(e) { […]