Fork me on GitHub

jQuery jPList plugin is deprecated. Please check pure JavaScript (ES6) jPList Library alternative instead.

Bootstrap Dropdown Filter Usage

Bootstrap Dropdown Filter

Add jPList scripts to the HEAD:

    
<!-- bootstrap css and js -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
		
<!-- jplist core -->
<script src="jplist.core.min.js"></script>	
<!-- jplist bootstrap filter dropdown control -->			
<script src="jplist.bootstrap-filter-dropdown.min.js"></script>
<script>
$('document').ready(function(){
	$('#demo').jplist({				
		itemsBox: '.list' 
		,itemPath: '.list-item' 
		,panelPath: '.jplist-panel'	
	});
	
});
</script>
			
	

Add basic HTML structure to the BODY:

    
<!-- demo -->
<div id="demo">
	
	<!-- panel -->
	<div class="jplist-panel">						
		
		<!-- bootstrap filter dropdown control -->
		<div 
			class="dropdown pull-left"
			data-control-type="boot-filter-drop-down" 
			data-control-name="category-filter" 
			data-control-action="filter">
			<button 
				class="btn btn-primary 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" role="menu" aria-labelledby="dropdown-menu-1">
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#" data-path=".architecture">Architecture</a>
				</li>
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#" data-path=".christmas" data-default="true">Christmas</a>
				</li>
				
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#" data-path=".food">Food</a>
				</li>
				
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#" data-path=".nature">Nature</a>
				</li>
				<li role="presentation" class="divider"></li>
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#" data-path=".other">Other</a>
				</li>
			</ul>						  
		</div>
		
	</div>				 
	
	<!-- HTML data -->   
	<div class="list">
		
		<!-- item 1 -->
		<div class="list-item">	
			...
		</div>
		
		<!-- item 2 -->
		<div class="list-item">	
			...
		</div>
		
		...
		
	</div>	
					
</div>