I am currently trying to make a dynamic vertical tab table in AngularJS. In other words, I would like for the user to add in their own tabs on the press of a button. I am aware of how to do this if the tabs are horizontal over the table but if the tabs are vertically on the right of the table, I have to put them in different divs. Im having a hard time relating the data from the tabs to the table content.
<div class="col-sm-9">
<div class="tab-content">
<div ng-show="view_tab == 'tab1'">
Campaign Name:
<input ng-model="tab1name">
<br>Campaign Info:
<br>This is tab 1 content
</div>
<div ng-show="view_tab == 'tab2'">
Campaign Name:
<input ng-model="tab2name">
<br>Campaign Info:
<br>This is tab 2 content
</div>
</div>
</div>
<div class="col-sm-3">
<ul class="nav nav-tabs nav-stacked nav-pills" role="tablist" ng-init="view_tab = 'tab1'">
<li ng-class="{'active': view_tab == 'tab1'}">
<a class="btn-lg" ng-click="changeTab('tab1')" href=""> Campaign: {{tab1name}}</a>
</li>
<li ng-class="{'active': view_tab == 'tab2'}">
<a class="btn-lg" ng-click="changeTab('tab2')" href=""> Campaign: {{tab2name}}</a>
</li>
<li ng-class="{'active': view_tab == 'tab3'}">
<a class="btn-lg" ng-click="changeTab('tab2')" href="">Add a Tab</a>
</li>
</ul>
</div>
I'm aware that I need to use a ng-repeat and some kind of template to push onto an object holding all the table data. But I'm unclear of how to actually implement this. I have included a JSFiddle of the vertical tab table I am currently working with. Any help would be greatly appreciated.
http://jsfiddle.net/eRGT8/1032/
Yes you need to create a array of all tabs and use ng-repeat
this is the tamplate
<ul class="nav nav-tabs nav-stacked nav-pills" role="tablist" ng-init="view_tab = 'tab1'">
<li ng-class="{'active': view_tab == $index}" ng-repeat="tab in tabs">
<a class="btn-lg" ng-click="changeTab($index)" href=""> Campaign: {{tab.name}}</a>
</li>
And this is the array:
$scope.tabs = [{
name: ''
}, {
name: ''
}]
here is the full code in jsfiddle
http://jsfiddle.net/jekvu1br/
Related
How to create a custom odoo walker for the website navbar
Similar to what Wordpress allows to create a html template which them odoo uses to add the menus so I can design the navigation
<nav>
<div class="logo"></div>
<ul>
<!-- odoo menu items--->
<!-- formatting--->
<!-- <li class="nav-item"> $name </li>--->
</ul>
<div>
<ul>
<li>$name</li>
<li> $name</li>
</ul>
</div>
</nav>
Is there a similar function in odoo
if not how to get all the active menus in odoo in JS
example of a Wordpress walker
this is a work around, you can find the code in addons/portal/views/portal_templates.xml.
<div class="collapse navbar-collapse" id="top_menu_collapse">
<!-- FIXME We want menu to open to the right by default (except cases handled in JS) -->
<ul class="nav navbar-nav ml-auto text-right" id="top_menu">
<li class="nav-item divider" t-ignore="true" t-if="not user_id._is_public()"/>
<li class="nav-item dropdown" t-ignore="true" t-if="not user_id._is_public()">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
<b>
<span t-esc="user_id.name[:23] + '...' if user_id.name and len(user_id.name) > 25 else user_id.name"/>
</b>
</a>
<div class="dropdown-menu js_usermenu" role="menu">
<a id="o_logout" class="dropdown-item" t-attf-href="/web/session/logout?redirect=/" role="menuitem">Logout</a>
</div>
</li>
</ul>
</div>
the method _is_public() return True if the "user" is not logged else false
I use quiet complex multi-level navigation and I need to wrap content of the dropdown in the bootstrap container, so it's max height fit's the grid height. However, when I do so, dropdown doesn't open at all.
See the fiddle (I put the comment right after the issue causing div, so if you comment that div, the dropdown will open normally): https://jsfiddle.net/s5ug07t4/7/
Here's the HTML with the container:
<ul class="nav navbar-nav">
<li class="dropdown">
Main menu item
<div class="container"><!-- That's the issue causing container -->
<ul class="dropdown-menu row">
<li class="col-sm-3 col-xs-6">
<ul>
<li class="dropdown-header">abc</li>
<li class="dropdown-header">def</li>
<li class="dropdown-header">ghi</li>
</ul>
</li>
<li class="col-sm-3 col-xs-6">
<ul>
<li class="dropdown-header">abc</li>
<li class="dropdown-header">def</li>
<li class="dropdown-header">ghi</li>
</ul>
</li>
<li class="col-sm-3 col-xs-6">
<ul>
<li class="dropdown-header">abc</li>
<li class="dropdown-header">def</li>
<li class="dropdown-header">ghi</li>
</ul>
</li>
<li class="col-sm-3 col-xs-6">
<ul>
<li class="dropdown-header">abc</li>
<li class="dropdown-header">def</li>
<li class="dropdown-header">ghi</li>
</ul>
</li>
</ul>
</div><!-- /That's the issue causing container -->
</li>
</ul>
Here's my updated fiddle, so you see exactly what I need: https://jsfiddle.net/s5ug07t4/9 Currently it's not a valid HTML because there is div container inside ul, however, moving it one level up wrapping ul with that container breaks dropdown so it doesn't open anymore.
guys I need your assistance in my current project.
I want to give for my img button a "side effect" , which should be interactive.
For instance, it must listen an event on click and should be opened and closed by clicking on img. I was to hardly trying to make this thing happened. Unfortunately, something wrong in my coding. And it should hide all div id="left"elements, since I'm doing responsive design for this project.
Please guys I need your help. I might assume my approach is totally wrong maybe you have some another recommendations.
Here is my HTML code:
<div id="main">
<!-- This img "button" should do slide effect to the right side -->
<img class="door_open" src="/templates/shablon/images/door_open.png">
<div id="left">
<div class="moduletable">
<div class=" modtit">По материалу</div>
<ul class="nav menu">
<li class="item-118">Металлические двери</li>
<li class="item-119">Клееный брус</li>
<li class="item-121">Пластиковые двери</li>
<li class="item-122">Шпонированные двери</li>
<li class="item-157">Массив древесины</li>
</ul>
</div>
<div class="moduletable">
<div class=" modtit">Фурнитура</div>
<ul class="nav menu">
<li class="item-163">Каталог дверных ручек</li>
<li class="item-164">Замки и защелки</li>
<li class="item-165">Наличники и короба</li>
<li class="item-166">Арки</li>
<li class="item-167">Лестницы</li>
</ul>
</div>
<div class="moduletable diz">
<div class=" modtit">По дизайну</div>
<ul class="nav menu">
<li class="item-136">Барокко</li>
<li class="item-137">Классика</li>
<li class="item-158">Ампир</li>
<li class="item-159">Минимализм</li>
<li class="item-160">Поп-арт</li>
<li class="item-161">Эклектика</li>
<li class="item-162">Модерн</li>
</ul>
</div>
<div class="moduletable">
<div class=" modtit">По производителю</div>
<ul class="nav menu">
<li class="item-156">Бульдорс</li>
</ul>
</div>
</div>
and here is my jQuery:
$('#left').on('click', function(){
$('.moduletable').toggle('slide', { direction: 'left' }, 1000);
$('#main-content').animate({
'margin-left' : $('#main-content').css('margin-left') == '0px' ? '210px' : '0px'
}, 1000);
});
Here is how it's supposed to look like
enter image description here
I am using bootstrap 3 tabs in my mvc view. I want to render another partial view on tab change. Here is the code for the tab
<ul class="nav nav-tabs">
<li class="active" id="studentList">
<a href="#tab_1_1" data-toggle="tab" aria-expanded="true">
Student List </a>
</li>
<li class="" id="studentAddEdit">
<a href="#tab_1_2" data-toggle="tab" aria-expanded="false">
Student Add/Edit </a>
</li>
<div class="tab-content">
<div class="tab-pane fade active in" id="tab_1_1">
<p>
#Html.Action("StudentList","Student")
</p>
</div>
<div class="tab-pane fade" id="tab_1_2">
<p>
#Html.Action("StudentAddEdit","Student", new {id=Model.StudentId})
</p>
</div>
It renders the studentAddEdit view on view load. I want to render studentAddEdit view again when the user changes the tab and selects the studentAddEdit tab. Any solution suggested? I am currently doing it with jquery but not succeeding.
First of all slight changes in your html like adding a class to your anchor tags and adding extra data-* attribute to the same and the you can render partial view through jquery as below:
<ul class="nav nav-tabs">
<li class="active" id="studentList">
<a href="#tab_1_1" class="tbs" data-info="stdlist" data-toggle="tab" aria-expanded="true">
Student List </a>
</li>
<li class="" id="studentAddEdit">
<a href="#tab_1_2" data-toggle="tab" class="tbs" data-info="stdaddedit" aria-expanded="false">
Student Add/Edit </a>
</li>
</ul>
Your JS would be something like below:
$('.tbs').on('click',function(){
var info=$(this).data('info');
switch(info)
{
case 'stdlist':$('#tab_1_1 p').load('/Student/StudentList'); //Controller method which returns partial view
break;
case 'stdaddedit':$('#tab_1_2 p').load('/Student/StudentAddEdit');//Controller method which returns partial view
break;
//Add cases if you want
default:break;
}
});
I thought I ask SO for help before I file a bugreport. I have a twitter bootstrap tab inside another tab, and wenn I click to change to the next inner tab, bootstrap.js does not only remove the .active from the closest .tab-pane, but also from the outer .tab-pane. I tried to dive into the code, but my javascript isn't good enough to fully understand it. I tried to manually add the active class to the outer .tab-pane with jquery and also tried .tab('show') on the data-toggle="tab" element. It seems like that bootstrap.js finds all .tab-content and then removes the .active from its children. Or maybe I have a mistake in my markup (well from experience 99% of the time it's human error). The javascript is all boilerplate, I just call the first tab with tab('show'). Here's my markup:
<ul id="sidebar" class="unstyled naviTab">
<li class="accordion-group">...</li>
<li class="accordion-group active">
<h2 id="module1-title1" class="module-header" href="#getting-started" data-toggle="tab" data-original-title="">...</h2>
</li>
</ul>
...
...
<ul class="unstyled tab-content">
<li id="course" class="tab-pane">
<li id="getting-started" class="tab-pane active">
<div class="wizard stepTab">
<a class="active" href="#module1-step1" data-toggle="tab">1.Step</a>
<a class="" href="#module1-step2" data-toggle="tab">2.Step</a>
<a class="" href="#module1-step3" data-toggle="tab">3.Step</a>
</div>
<ul class="links unstyled tab-content">
<li id="module1-step1" class="tab-pane active" data-original-title="">...</li>
<li id="module1-step2" class="tab-pane">
<li id="module1-step3" class="tab-pane">
</ul>
</li>
</ul>
And after clicking a href="#module1-step2":
<ul id="sidebar" class="unstyled naviTab">
<li class="accordion-group">...</li>
<li class="accordion-group active">
<h2 id="module1-title1" class="module-header" href="#getting-started" data-toggle="tab" data-original-title="">...</h2>
</li>
</ul>
...
...
<ul class="unstyled tab-content">
<li id="course" class="tab-pane">
<li id="getting-started" class="tab-pane">
<div class="wizard stepTab">
<a class="" href="#module1-step1" data-toggle="tab">1.Step</a>
<a class="active" href="#module1-step2" data-toggle="tab">2.Step</a>
<a class="" href="#module1-step3" data-toggle="tab">3.Step</a>
</div>
<ul class="links unstyled tab-content">
<li id="module1-step1" class="tab-pane" data-original-title="">...</li>
<li id="module1-step2" class="tab-pane active">
<li id="module1-step3" class="tab-pane">
</ul>
</li>
</ul>
Notice how the outer tab-panes are all inactive.
If anybody has run into this problem or can tell me where I messed up I'd be very grateful!
EDIT1
Here's my javascript. I actual don't have to include any js because bootstrap.js works just fine just with the html attributes(and that's probably the reason why it breaks). I tried different approaches (.each(), e.preventDefault()) but nothing seemed to work. But here's my js anyway:
<script>
/*global $*/
"use strict";
$(function () {
$('.naviTab li:first-child h1').tab('show'); //shows the first child of the outer tab on load. Could just add an .active to the markup instead
$('#sidebar li:first-child').addClass('active'); //this is for the accordion that the outer tab links are enbedded in
$('.stepTab a').click(function () {
if ($(this).closest('li').hasClass('active') == false) { //this is supposed to check if the outer tab has .active and add it if it doesn't. Unfortunately it doesn't work...
$(this).closest('li').addClass('active');
}
$(this).siblings().removeClass('active'); //this is for css styling purposes on the inner tab a's
$(this).addClass('active');
});
});
</script>
Cheers for any suggestions!
As stated by albertedevigo you only need to provide a unique ID's to each tab, no matter if the tab is nested, this is because the javascript action will open/close this specific tab:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 3</li>
<li>Section 4</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab3">
<p>I'm in Section 3.</p>
</div>
<div class="tab-pane" id="tab4">
<p>Howdy, I'm in Section 4.</p>
</div>
</div>
</div>
</div>
</div>
Take a look at jsfiddle.net/simbirsk/RS4Xh/2
maybe this should help http://www.juvenpajares.com/?p=204 Custom Accordion Using Bootstrap Framework
The problem was that I didn't use an for the links in the inner tabs, but just a div with a's(had to do it for css reasons). I didn't know that bootstrap requires the links to be in a ul > li > a format. Now it know! I'll leave the question in case somebody has the same problem. Cheers for the help!