jplist

by Akram kamal

HTML

<link rel="stylesheet" href="https://jplist.com/content/css/jplist-textbox-control.min.css">
<link rel="stylesheet" href="https://jplist.com/content/css/jplist-core.min.css">
<script src="https://jplist.com/content/js/jplist/jplist-core.min.js"></script>
<script src="https://jplist.com/content/js/jplist/jplist.textbox-control.min.js"></script>
<link rel="stylesheet" href="https://jplist.com/content/css/jplist-demo-pages.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css">
<!-- demo -->
<div id="demo" class="box jplist">
    
    <!-- panel -->
	<div class="jplist-panel box panel-top">
	
        <!-- filter by title -->
		<div class="text-filter-box">

		   <i class="fa fa-pencil jplist-icon"></i>
		   
		   <!--[if lt IE 10]>
		   <div class="jplist-label">Filter by Title:</div>
		   <![endif]-->
		   
		   <input 
			  data-path=".title" 
			  type="text" 
			  value="" 
			  placeholder="Filter by Title" 
			  data-control-type="textbox" 
			  data-control-name="title-filter" 
			  data-control-action="filter"
		   />
		</div>	
		
		<!-- data -->   
		<div class="list box text-shadow">
				
			<!-- item 1 -->
			<div class="list-item box">		
			
				<!-- img -->
				<div class="img">
					<img src="https://jplist.com/content/img/thumbs/calendar-1.jpg" alt="" title=""/>
				</div>
				
				<!-- data -->
				<div class="block">
					<p class="date">05/08/2003</p>
					<p class="title"> "æ", "ø" and "å"</p>
					<p class="desc">A calendar is a system of organizing days for social, religious, commercial, or administrative purposes. This is done by giving names to periods of time, typically days, weeks, months, and years. The name given to each day is known as a date. Periods in a calendar (such as years and months) are usually, though not necessarily, synchronized with the cycle of the sun or the moon.</p>
					<p class="theme">
						<span class="other">Other</span>
						<span class="group1">Group...

JavaScript

$('#demo').jplist({				
    itemsBox: '.list' 
    ,itemPath: '.list-item' 
    ,panelPath: '.jplist-panel'	
});