JPList 插件仅在第一个 JQuery UI 选项卡上触发
Posted
技术标签:
【中文标题】JPList 插件仅在第一个 JQuery UI 选项卡上触发【英文标题】：JPList plugin only fires on first JQuery UI Tab 【发布时间】：2018-01-30 04:30:15 【问题描述】：我正在使用 jQuery UI 选项卡来显示 2 个选项卡。我有一个绑定到 JPList 插件的 Bootstrap 下拉过滤器。这应该在每个选项卡中过滤。过滤适用于第一个选项卡，但不适用于第二个选项卡。
要了解我的意思，请查看Fidddle。如果你运行它，你会注意到你可以选择空调和过滤器来过滤第一个选项卡上的项目。但是，如果您重新运行它并立即单击 Flyers 选项卡，则两个过滤器都不会过滤该选项卡中的项目。
我注意到的一件事是，我的“.list”类看起来应该包含所有“.list-item”类。我试过了，它在我身上爆炸了。除此之外，是否与初始化后过滤器列表的变化有关？
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'
);
);
【问题讨论】：
【参考方案1】：这里的问题是一个 jplist 实例不能有 2 个“.list”部分。 一种可能的解决方案是在每个选项卡内传输下拉菜单并在每个选项卡中调用单独的 jplist 实例。 第二个选项是围绕所有选项卡创建一个通用的“.list”包装器。
【讨论】：
以上是关于JPList 插件仅在第一个 JQuery UI 选项卡上触发的主要内容，如果未能解决你的问题，请参考以下文章