Comments (8)
This doesn't seem to be possible at the moment, since Tabby runs querySelector
on the selector, which by default only returns the first instance of the elements matching the selector.
You could probably solve this by running your own querySelectorAll
to find all instances of your tabs, then initiate all of them separately. Try something like this (untested):
const tabSelectors = document.querySelectorAll('[data-tabs]');
for (const [i, tabs] of [...tabSelectors].entries()) {
tabs.setAttribute(`data-tabs-${i}`, '');
new Tabby(`[data-tabs-${i}]`);
}
from tabby.
That makes sense and your suggestion works perfectly. Many thanks for looking at this.
from tabby.
@arnojong I think this should work (untested):
const tabsSelectors = document.querySelectorAll('[data-tabs]');
for (const [i, tabsContainer] of [...tabsSelectors].entries()) {
tabsContainer.setAttribute(`data-tabs-${i}`, '');
const tabs = new Tabby(`[data-tabs-${i}]`);
tabs.toggle('#harry');
}
Please note that all code needs to be within the for..of
loop
from tabby.
The isolation is done on purpose because of how events are attached in Tabby. It would not work properly otherwise.
Closing this out since a solution was provided that seems to be working.
from tabby.
The instantiating works great now, still having trouble with getting the toggle functionality to work.
The documentation shows us you can do the following:
var tabs = new Tabby('data-tabs');
tabs.toggle('#harry');
However with this new way of instantiating multiple instances, the tabs are not defined with variables anymore.
new Tabby(`[data-tabs-${i}]`);
Is there a way to get the seperate tabs as variables so you can call tabs.toggle on them?
from tabby.
This doesn't seem to be possible at the moment, since Tabby runs
querySelector
on the selector, which by default only returns the first instance of the elements matching the selector.You could probably solve this by running your own
querySelectorAll
to find all instances of your tabs, then initiate all of them separately. Try something like this (untested):const tabSelectors = document.querySelectorAll('[data-tabs]'); for (const [i, tabs] of [...tabSelectors].entries()) { tabs.setAttribute(`data-tabs-${i}`, ''); new Tabby(`[data-tabs-${i}]`); }
Thanks for sharing this @danielpost
I wonder if it might be better doing something like:
const tabSelectors = document.querySelectorAll('[data-tabs]'); if (tabSelectors) { for (const [i, tabs] of [...tabSelectors].entries()) { tabs.setAttribute('data-tabs', i); new Tabby(`[data-tabs="${i}"]`); } }
Adds an if statement to check that tabs exist and also saves adding another data attribute? Still seems to work well. Semantics I know.
from tabby.
Yes, please address this in the README or add support for this. thanks!
from tabby.
This worked for me, though it has a O(nĀ²) problem since it toggles all matching tabs regardless of if it's currently on the right "parent" tab container:
const tabSelectors = document.querySelectorAll('[data-tabs]');
if (tabSelectors) {
for (const [i, tabs] of [...tabSelectors].entries()) {
tabs.setAttribute('data-tabs', i);
new Tabby(`[data-tabs="${i}"]`);
}
}
function toggleTabs(sel) {
for ([i, tabs] of [...tabSelectors].entries()) {
tabs = new Tabby(`[data-tabs="${i}"]`);
document.querySelectorAll(sel).forEach(tab => tabs.toggle(tab));
}
}
from tabby.
Related Issues (20)
- Nested tabs HOT 2
- Init Tabby only on mobile HOT 4
- Callback events? HOT 1
- Add previous tab to event HOT 3
- TypeError when no tabs exist on a page HOT 2
- Stop video when tab is inactive HOT 1
- Add ES6 module HOT 4
- 'tabby' event is not emitted when the tab ID is specified in the URL hash HOT 3
- CustomEvent polyfill is required for IE9+ support HOT 1
- CSS file not available via CDN HOT 2
- Implement Manual Activation HOT 3
- Add to documentation - instantiate multiple instances HOT 1
- Ability to call nested tabs with anchors?
- Make Tabby Work with Anchor Links from Outside HOT 2
- It is recommended that the Chinese character set is freely configured
- Where is download page? HOT 2
- bug occur when use sz (lrzsz utils) HOT 1
- Allow passing a node instead of a selector
- Scroll jump to anchor then back to top HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ššš
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ā¤ļø Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tabby.