0
J'utilise les onglets de l'interface utilisateur jQuery pour afficher 2 onglets. J'ai un seul filtre Dropdown Bootstrap lié au plugin JPList. Cela devrait filtrer dans chaque onglet. Le filtrage fonctionne sur le premier onglet, mais pas sur le deuxième onglet.Le plugin JPList se déclenche uniquement sur le premier onglet de l'interface utilisateur JQuery
Pour voir ce que je veux dire, regardez ce Fidddle. Si vous l'exécutez, vous remarquerez que vous pouvez sélectionner Climatisation et Filtres pour filtrer les éléments sur le premier onglet. Toutefois, si vous le réexécutez et que vous cliquez immédiatement sur l'onglet Flyers, aucun filtre ne filtre les éléments de cet onglet. Une chose que j'ai remarquée est qu'il semble que ma classe ".list" devrait entourer toutes les classes ".list-item". J'ai essayé ça et ça a explosé sur moi. Autre que cela, pourrait-il avoir quelque chose à voir avec la liste de filtres changeant après l'initialisation?
HTML
<div class="container-fluid">
<div id="init">
<div id="tabs" class="ui-tabs ui-corner-all ui-widget ui-widget-content">
<ul role="tablist" class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
<li role="tab" tabindex="0" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true"><a href="#tabs-1" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-1">Promotions</a></li>
<li role="tab" tabindex="-1" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false"><a href="#tabs-2" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-2">Flyers</a></li>
<!--<li><a href="#tabs-3">Social Media</a></li>
<li><a href="#tabs-4">Articles</a></li>-->
</ul>
<!-- START Promotion Category Dropdown-->
<div class="row catrow">
<div class="jplist-panel">
<div class="dropdown text-center filter" data-control-type="boot-filter-drop-down" data-control-name="category-filter" data-control-action="filter" data-default="true">
<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" id="dropdown-menu-1" aria-expanded="true">
<span data-type="selected-text">Filter by category</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdown-menu-1">
<li class="defaultItem" role="presentation" style="display: none;"><a role="menuitem" tabindex="-1" href="#" class="default" data-path="default" data-jplist-selected="true">Filter by category</a></li>
<li role="presentation" class="filterMenu"><a role="menuitem" tabindex="-1" href="#" data-path=".AirConditioning" data-jplist-selected="false">Air Conditioning</a></li>
<li role="presentation" class="filterMenu"><a role="menuitem" tabindex="-1" href="#" data-path=".Filters" data-jplist-selected="false">Filters</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".FlyerTestCategory1" data-jplist-selected="false">Flyer Test Category 1</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".FlyerTestCategory2" data-jplist-selected="false">Flyer Test Category 2</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".Heating" data-jplist-selected="false">Heating</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".Holidays" data-jplist-selected="false">Holidays</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".HVACRTips" data-jplist-selected="false">HVACR Tips</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".IAQ" data-jplist-selected="false">IAQ</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".LaborShortage" data-jplist-selected="false">Labor Shortage</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".NowHiring" data-jplist-selected="false">Now Hiring</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".Products" data-jplist-selected="false">Products</a></li>
</ul>
</div>
</div>
</div>
<!-- /END Promotion Category Dropdown-->
<!-- START Tab 1 -->
<div id="tabs-1" aria-labelledby="ui-id-1" role="tabpanel" class="ui-tabs-panel ui-corner-bottom ui-widget-content" aria-hidden="false" style="display: block;">
<div class="row">
<div class="col-xs-6 header">Promotion Title</div>
<div class="col-xs-6 header">Download PDF</div>
</div>
<!-- Start List -->
<div class="list">
<!-- Query for Promotion PDF files -->
<!-- START List Item -->
<!-- /END List Item -->
<!-- START List Item -->
<!-- /END List Item -->
<div class="list-item">
<div class="container">
<div class="row">
<span class="promotions AirConditioning hide">Air Conditioning</span>
<div class="col-xs-6 text-center mt10">
<a href="http://www.crescentparts.com/assets/IAQ-Allergies-Promo-Flyer-Template.pdf" target="_blank">
Promo 1 </a>
</div>
<div class="col-xs-6 text-center mb10">
<a href="http://www.crescentparts.com/assets/IAQ-Allergies-Promo-Flyer-Template.pdf" download="Promo 1">
<button type="button" class="btn btn-primary btn-lg">Download</button>
</a>
</div>
</div>
</div>
</div>
<div class="list-item">
<div class="container">
<div class="row">
<span class="promotions Filters hide">Filters</span>
<div class="col-xs-6 text-center mt10">
<a href="http://www.crescentparts.com/assets/IAQ-Allergies-Promo-Flyer-Template.pdf" target="_blank">
Promo 2 </a>
</div>
<div class="col-xs-6 text-center mb10">
<a href="http://www.crescentparts.com/assets/IAQ-Allergies-Promo-Flyer-Template.pdf" download="Promo 2">
<button type="button" class="btn btn-primary btn-lg">Download</button>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /END List-->
</div>
<!-- /END Tab 1 -->
<!-- START Tab 2 -->
<div id="tabs-2" aria-labelledby="ui-id-2" role="tabpanel" class="ui-tabs-panel ui-corner-bottom ui-widget-content" aria-hidden="true" style="display: none;">
<div class="row">
<div class="col-xs-6 header">Flyer Title</div>
<div class="col-xs-6 header">Download Flyer</div>
</div>
<!-- Start List -->
<div class="list">
<!-- Query for PDF files -->
<!-- Start List Item -->
<div class="list-item">
<div class="container">
<div class="row">
<span class="flyers FlyerTestCategory1 hide">Flyer Test Category 1</span>
<div class="col-xs-6 text-center mt10">
<a href="http://www.crescentparts.com/assets/Honeywell-Lyric-Product-Bundle-Sell-Sheet-Template.pdf" target="_blank">
Honeywell Lyric Product Bundle Sell Sheet Template </a>
</div>
<div class="col-xs-6 text-center mb10">
<a href="http://www.crescentparts.com/assets/Honeywell-Lyric-Product-Bundle-Sell-Sheet-Template.pdf" download="Honeywell Lyric Product Bundle Sell Sheet Template">
<button type="button" class="btn btn-primary btn-lg">Download</button>
</a>
</div>
</div>
</div>
</div>
<!-- /END List item -->
<!-- Start List Item -->
<div class="list-item">
<div class="container">
<div class="row">
<span class="flyers FlyerTestCategory2 hide">Flyer Test Category 2</span>
<div class="col-xs-6 text-center mt10">
<a href="http://www.crescentparts.com/assets/IAQ-Allergies-Promo-Flyer-Template.pdf" target="_blank">
Are You Ready For Allergy Season? IAQ Product Promo Template </a>
</div>
<div class="col-xs-6 text-center mb10">
<a href="http://www.crescentparts.com/assets/IAQ-Allergies-Promo-Flyer-Template.pdf" download="Are You Ready For Allergy Season? IAQ Product Promo Template">
<button type="button" class="btn btn-primary btn-lg">Download</button>
</a>
</div>
</div>
</div>
</div>
<!-- /END List item -->
<!-- Start List Item -->
<div class="list-item">
<div class="container">
<div class="row">
<span class="flyers FlyerTestCategory2 hide">Flyer Test Category 2</span>
<div class="col-xs-6 text-center mt10">
<a href="http://www.crescentparts.com/assets/Humidifier-Winter-Graphic.pdf" target="_blank">
Why Get A Humidifier This Winter? </a>
</div>
<div class="col-xs-6 text-center mb10">
<a href="http://www.crescentparts.com/assets/Humidifier-Winter-Graphic.pdf" download="Why Get A Humidifier This Winter?">
<button type="button" class="btn btn-primary btn-lg">Download</button>
</a>
</div>
</div>
</div>
</div>
<!-- /END List item -->
<!-- Start List Item -->
<div class="list-item">
<div class="container">
<div class="row">
<span class="flyers FlyerTestCategory2 hide">Flyer Test Category 2</span>
<div class="col-xs-6 text-center mt10">
<a href="http://www.crescentparts.com/assets/Financing-Promo.png" target="_blank">
Financing Promo </a>
</div>
<div class="col-xs-6 text-center mb10">
<a href="http://www.crescentparts.com/assets/Financing-Promo.png" download="Financing Promo">
<button type="button" class="btn btn-primary btn-lg">Download</button>
</a>
</div>
</div>
</div>
</div>
<!-- /END List item -->
<!-- Start List Item -->
<div class="list-item">
<div class="container">
<div class="row">
<span class="flyers FlyerTestCategory1 hide">Flyer Test Category 1</span>
<div class="col-xs-6 text-center mt10">
<a href="http://www.crescentparts.com/assets/Laundry-Scrubber-Homeowner-Promo-Sheet-Template.pdf" target="_blank">
Laundry Scrubber Homeowner Promo Sheet Template </a>
</div>
<div class="col-xs-6 text-center mb10">
<a href="http://www.crescentparts.com/assets/Laundry-Scrubber-Homeowner-Promo-Sheet-Template.pdf" download="Laundry Scrubber Homeowner Promo Sheet Template">
<button type="button" class="btn btn-primary btn-lg">Download</button>
</a>
</div>
</div>
</div>
</div>
<!-- /END List item -->
<!-- Start List Item -->
<div class="list-item">
<div class="container">
<div class="row">
<span class="flyers FlyerTestCategory1 hide">Flyer Test Category 1</span>
<div class="col-xs-6 text-center mt10">
<a href="http://www.crescentparts.com/assets/Air-Scrubber-Plus-Homeowner-Promo-Sheet-Template-1.pdf" target="_blank">
Air Scrubber Plus Homeowner Promo Sheet Template </a>
</div>
<div class="col-xs-6 text-center mb10">
<a href="http://www.crescentparts.com/assets/Air-Scrubber-Plus-Homeowner-Promo-Sheet-Template-1.pdf" download="Air Scrubber Plus Homeowner Promo Sheet Template">
<button type="button" class="btn btn-primary btn-lg">Download</button>
</a>
</div>
</div>
</div>
</div>
<!-- /END List item -->
</div>
<!-- /END List -->
</div>
<!-- /END Tab 2 -->
</div>
<!-- /END Init -->
</div>
<!-- /END Tabs -->
</div>
jQuery
jQuery.noConflict();
jQuery(document).ready(function() {
'use strict';
// On Current Tab Click Run functions
jQuery("#tabs").tabs({
active: false,
collapsible: true,
activate: function(event, ui) {
function getCategories(){
//Show All Categories Before Running Filter
var $filterMenu = jQuery('.filterMenu');
$filterMenu.show();
// Get current tab text
var $tabText = jQuery(ui.newTab).text().toLowerCase();
//Get list of categories found in current tab
var catText = jQuery('.' + $tabText).map(function(i, cat) {
return jQuery(cat).text();
}).get();
// Create Array from Current Tab Categories
var currCatTextList = catText.join(','),
currCatTextArray = currCatTextList.split(","),
currArray = currCatTextArray;
// Log Current Tab Category Array
console.log(currCatTextArray);
//Hide li's in all category list not found in current tab
jQuery('#tabs .dropdown-menu li').filter(function(idx, ele) {
return currArray.indexOf(ele.textContent) == -1;
}).hide();
}
// Call getCategories Function on Tab Initialization and Each Tab Click
getCategories();
}
})
.tabs('option', 'active', 0)
.tabs('option', 'collapsible', false);
jQuery('#init').jplist({
itemsBox: '.list'
,itemPath: '.list-item'
,panelPath: '.jplist-panel'
});
});