I can not figure out how to turn off switching between tabs on the keyboard keys? For some reason, the data-wrap-on-keys = "false" property does not work. Maybe someone ran into it? I just need to switch keyboard did not work
$(document).ready(function () {
$(document).foundation();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell medium-3">
<ul class="vertical tabs" data-tabs id="example-tabs" data-wrap-on-keys="false">
<li class="tabs-title is-active">Tab 1</li>
<li class="tabs-title">Tab 2</li>
<li class="tabs-title">Tab 3</li>
<li class="tabs-title">Tab 4</li>
<li class="tabs-title">Tab 5</li>
<li class="tabs-title">Tab 6</li>
</ul>
</div>
<div class="cell medium-9">
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1v">
<p>One</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel2v">
<p>Two</p>
<img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
</div>
<div class="tabs-panel" id="panel3v">
<p>Three</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel4v">
<p>Four</p>
<img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
</div>
<div class="tabs-panel" id="panel5v">
<p>Five</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel6v">
<p>Six</p>
<img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
</div>
</div>
</div>
</div>
</div>
You can do so by calling $('[data-tabs] *').off('keydown.zf.tabs') after initializing foundation
$(document).ready(function () {
$(document).foundation();
$('[data-tabs] *').off('keydown.zf.tabs')
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell medium-3">
<ul class="vertical tabs" data-tabs id="example-tabs" data-wrap-on-keys="false">
<li class="tabs-title is-active">Tab 1</li>
<li class="tabs-title">Tab 2</li>
<li class="tabs-title">Tab 3</li>
<li class="tabs-title">Tab 4</li>
<li class="tabs-title">Tab 5</li>
<li class="tabs-title">Tab 6</li>
</ul>
</div>
<div class="cell medium-9">
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1v">
<p>One</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel2v">
<p>Two</p>
<img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
</div>
<div class="tabs-panel" id="panel3v">
<p>Three</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel4v">
<p>Four</p>
<img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
</div>
<div class="tabs-panel" id="panel5v">
<p>Five</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel6v">
<p>Six</p>
<img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
</div>
</div>
</div>
</div>
</div>
Related
I have several materialize tabs, where each tab will have a different collapsible expandable lists (used as a sidebar).
The tabs work correctly, and the expandable works correctly on the first tab; however, the expandable does not work on any other tab. It simply works as an accordion, and does not call the onOpenStart function within the collapsible.
Here is a simplified example of what I have:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Using cdn for testing purposes -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3">Tab 1</li>
<li class="tab col s3"><a class="" href="#tab2">Tab 2</a></li>
</ul>
</div>
<!-- This Exandable works! -->
<div id="tab1" class="col s3">
<ul class="collapsible expandable">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Body content</div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body">Body content</div>
</li>
</ul>
</div>
<!-- This Expandable does not work (just accordion) -->
<div id="tab2" class="col s3 offset-s3">
<ul class="collapsible expandable">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Body content</div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body">Body content</div>
</li>
</ul>
</div>
</div>
</div>
<!-- cdn for testing purposes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script>
M.AutoInit();
document.addEventListener('DOMContentLoaded', function() {
let el = document.querySelector('.tabs');
let instance = M.Tabs.init(el, {});
});
document.addEventListener('DOMContentLoaded', function() {
let elem = document.querySelector('.collapsible.expandable');
let instance = M.Collapsible.init(elem, {
accordion: false,
onOpenStart: function(){console.log('collasible Open Start')}
});
});
</script>
</body>
</html>
Could someone help point out what I'm missing?
Thanks!
Your error is in this line:
let elem = document.querySelector('.collapsible.expandable');
You need to use querySelectorAll in order to init both the collapsible elements.
The snippet:
document.addEventListener('DOMContentLoaded', function() {
M.AutoInit();
let el = document.querySelector('.tabs');
let instance = M.Tabs.init(el, {});
let elem = document.querySelectorAll('.collapsible.expandable');
let instanceCollapsible = M.Collapsible.init(elem, {
accordion: false,
onOpenStart: function(){
//console.log('collasible Open Start');
}
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<div class="container">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3">Tab 1</li>
<li class="tab col s3"><a class="" href="#tab2">Tab 2</a></li>
</ul>
</div>
<div id="tab1" class="col s3">
<ul class="collapsible expandable">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Body content</div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body">Body content</div>
</li>
</ul>
</div>
<div id="tab2" class="col s3 offset-s3">
<ul class="collapsible expandable">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Body content</div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body">Body content</div>
</li>
</ul>
</div>
</div>
</div>
Hi I am new to bootstrap and jQuery. I have created a bootstrap Tab, which is working fine. The tabs are changing by header, but I also needs pagination to change Tab, which I am not able to do. Following is my scenario,
Tab 1 --> next button --> go to tab 2
Tab 1 <-- previous -- Tab 2 -- next ---> Tab 3
Tab 2 <-- previous -- Tab 3
Can any one help. Following is my HTML. This is just an example, I can have variable number of tabs.
<div class="row">
<!-- tabs -->
<div class="col-md-3 col-sm-3">
<ul class="nav nav-tabs nav-stacked nav-alternate">
<li>
Question - 1
</li>
<li>
Question - 2
</li>
<li>
Question - 3
</li>
</ul>
</div>
<!-- tabs content -->
<div class="col-md-9 col-sm-9">
<div class="tab-content tab-stacked nav-alternate">
<div id="tab_1" class="tab-pane active">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 1</p>
</div>
</div>
<ul class="pager">
<li class="next"><a class="radius-0" href="#" data-toggle="tab">Next →</a></li>
</ul>
</div>
<div id="tab_2" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 2</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
<li class="next"><a class="radius-0" href="#">Next →</a></li>
</ul>
</div>
<div id="tab_3" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 3</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
</ul>
</div>
</div>
</div>
</div>
Updated jQuery script to attach to the previouse/next link.
Updated class="active" to the li tag for Question-1.
<!-- tabs -->
<div class="col-md-3 col-sm-3">
<ul class="nav nav-tabs nav-stacked nav-alternate">
<li class="active">
Question - 1
</li>
<li>
Question - 2
</li>
<li>
Question - 3
</li>
</ul>
</div>
<!-- tabs content -->
<div class="col-md-9 col-sm-9">
<div class="tab-content tab-stacked nav-alternate">
<div id="tab_1" class="tab-pane active">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 1</p>
</div>
</div>
<ul class="pager">
<li class="next"><a class="radius-0" href="#" data-toggle="tab">Next →</a></li>
</ul>
</div>
<div id="tab_2" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 2</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
<li class="next"><a class="radius-0" href="#">Next →</a></li>
</ul>
</div>
<div id="tab_3" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 3</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
</ul>
</div>
</div>
</div>
<script>
$('.next').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.previous').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>
I am using Bookblock jQuery plugin as a transition effect between divs (consists of image and text) whenever the user clicks the link on the navigation bar.
Somehow, when the nav is at the top of the div, the links won't work.
<div class="container">
<ul class="bb-custom-grid" id="bb-custom-grid">
<li>
<ul id="services-submenu">
<li class="bb-current">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
</ul>
<div class="bb-bookblock">
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
</div>
</li>
</ul>
</div>
You need to add class for next, and previous in your
<li class="next"></li><li class="previous"></li>
to render from page 1 to page 5.
Example:
<ul class="services-submen" >
<li class="previous">
<a id="bb-nav-prev" data-toggle="popover" href="#"><i class="fa fa-chevron-left"></i> </a>
</li>
<li class="next">
<a id="bb-nav-next"data-toggle="popover" href="#"><i class="fa fa-chevron-right"></i></a>
</li>
</ul>
I am trying to create top bar using Foundation 6 similar to that of Airbnb but having trouble creating it, especially search box. (https://www.airbnb.co.uk)
Here's in codepen: http://codepen.io/anon/pen/WGarPp
Below is the html code I am working on:
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<!-- off-canvas title bar for 'small' screen -->
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">BRAND</span>
</div>
</div>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<ul class="vertical menu" data-drilldown>
<!-- start of the drilldown multi level menu -->
<li>
<a>Item 1</a>
<ul class="vertical menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
<li>Item 1D</li>
<li>Item 1E</li>
</ul>
</li>
<li>
<a>Item 2</a>
<ul class="vertical menu">
<li>Item 2A</li>
<li>Item 2B</li>
<li>Item 2C</li>
<li>Item 2D</li>
<li>Item 2E</li>
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="vertical menu">
<li>Item 3A</li>
<li>Item 3B</li>
<li>Item 3C</li>
<li>Item 3D</li>
<li>Item 3E</li>
</ul>
</li>
<li>Item 4</li>
</ul>
</div>
<!-- "wider" top-bar menu for 'medium' and up -->
<nav class="marketing-topbar show-for-medium">
<ul class="menu">
<li class="topbar-title">BRAND</li>
</ul>
<ul class="dropdown menu" data-click-open="false" role="menubar">
<li><input type="search" placeholder="Search"></li>
<li role="menuitem">
Sign Up
</li>
<li role="menuitem">
Login
</li>
</ul>
</nav>
</div>
Thanks!
I think this will get you where you are going. As usual, alter as needed and you will need to take care of the styling/css and magnifier icon link.
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<ul class="vertical menu">
<li>Menu Foo</li>
<hr/>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="content">
<div class="title-bar no-print" style="width:100%;">
<div class="title-bar-left hide-for-medium" style="width: 100%;">
<div class="title-bar-title text-center" style="width: 100%;">
<div class="row">
<div class="small-1 column position-left">
<button data-responsive-toggle="responsive-menu" class="menu-icon position-left" type="button" data-toggle="offCanvasLeft" style="padding:0;"></button>
</div>
<div class="small-10 column end">
<button data-open="exampleModal1" class="secondary hollow button small" style="width:80%;" >
Where to?
</button>
</div>
</div>
</div>
</div>
<div id="responsive-menu" >
<div class="top-bar-title">
<img src="http://placehold.it/80x38/f3a3fe/000000?text=Brand+Icon" alt="Brand Icon">
</div>
<div class="top-bar-left" style="width:50%;">
<ul class="horizontal menu">
<input type="text" class="" placeholder="Where to?" style="color:white;background: url('images/turn_page20.png') no-repeat left 10px center;padding-left:45px;border:0;" />
</ul>
</div>
<div class="top-bar-right">
<ul class="horizontal menu">
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</div>
<div class="reveal large text-center" id="exampleModal1" data-reveal>
Search
<p><input type="text" placeholder="Where to?" /></p>
<p><input type="submit" value="Submit" /></p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="column row">
Body content here.
</div>
</div><!-- end content -->
</div><!-- end of off-canvas content -->
</div><!-- end off-canvas-wrapper-inner -->
i have one page which have some div with different id for move between div , i move to one of div by panel but when i return to main page list of item(panel) does not work. this is Part of the code.... What should I do
<div data-role="page" id="main" data-theme="a">
<div data-role="panel" data-position-fixed="true" data-display="overlay" id="listpanel">
<ul data-role="listview" style="float:right">
<li>
item1
</li>
<li>
item2
</li>
</ul>
</div>
<div data-role="header">
<h1>mainheader</h1>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="panel" data-position-fixed="true" data-display="overlay" id="listpanel">
<ul data-role="listview" style="float:right">
<li>
item1
</li>
<li>
item2
</li>
</ul>
</div>
<div data-role="header">
<h1>item1</h1>
</div>
<div data-role="navbar">
<ul class="ui-btn ui-corner-all">
<li>list</li>
<li>mainpage</li>
</ul>
</div>
<div data-role="content">Content</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="panel" data-position-fixed="true" data-display="overlay" id="listpanel">
<ul data-role="listview" style="float:right">
<li>
item1
</li>
<li>
item2
</li>
</ul>
</div>
<div data-role="header">
<h1>item2</h1>
</div>
<div data-role="navbar">
<ul class="ui-btn ui-corner-all">
<li>list</li>
<li>mainpage</li>
</ul>
</div>
<div data-role="content">Content</div>
</div>