آموزش jQuery Mobile - فیلتر شدن(Fliterable)

ویجت فیلتر شدن jQuery Mobile

با استفاده از صفت data-filter = "true"، می توانید فیلتر کردن کنید. فرزندان هر المان شامل متنی هستند که به طور پیش فرض برای فیلترینگ استفاده می شوند.

با این حال، شما گزینه دیگری برای تنظیم صفت data-filtertext به یک رشته در هر فرزند دارید که برای فیلترینگ در نظر گرفته می شود.

جدول زیر نوع های فیلترینگ استفاده شده در jQuery mobile را نشان می دهد:

۱	فیلتر پایه (Basic filter) شما می‌توانید با تنظیم صفت data-filter به true بر روی یک لیست نمایشی، یک فیلتر برای آیتم‌های لیست ایجاد کنید.
۲	فیلتر جدول (Table filter) برای تولید یک فیلتر جدول، صفت data-filter را بر روی المان جدول با مقدار true تنظیم کنید تا فیلتر برای سطرها ایجاد شود.
۳	فیلتر گروه کنترل(Controlgroup Filter) دکمه‌های گروه کنترل (controlgroup) همچنین می‌توانند با استفاده از صفت data-filter روی المان‌ها که گروه کنترل را ایجاد می‌کند، فیلتر شوند.
۴	فیلتر مجموعه قابل جمع (Filter Collapsible Set) ابزارک فیلتر (Filter Widget) همچنین می‌تواند بر روی مجموعه قابل جمع استفاده شود. شما باید صفت data-filter را بر روی المانی که مجموعه قابل جمع را ایجاد می‌کند تنظیم کرده و به مقدار true برسانید.
۵	فیلتر مجموعه قابل جمع و زیر المان‌ها (Filter Collapsible Set and collapsible children) ابزارک فیلتر (Filter Widget) همچنین می‌تواند بر روی مجموعه قابل جمع و زیر المان‌های قابل جمع استفاده شود.
۶	فیلتر هر چیزی (Filter Anything) ابزارک فیلتر (Filter Widget) همچنین می‌تواند برای فیلتر کردن هر المانی که شامل المان دیگری است، استفاده شود.
۷	استایل فیلتر (Filter Styling) شما می‌توانید یک پوسته‌ی خاص برای فیلد متنی تنظیم کنید و همچنین یک متن را به عنوان Placeholder برای آن فراهم کنید.
۸	نمایش خودکار فیلتر (Filter Reveal) این ویژگی به شما امکان می‌دهد به راحتی یک عملکرد خودکار کامل کنشی برای ورود داده‌ها به صورت پیشنهادهای خودکار ایجاد کنید.
۹	کالبک سفارشی فیلتر (Filter Custom Callback) همان‌طور که با توسعه‌ی لیست‌ویو (Listview) امکان‌پذیر است، می‌توانید یک تابع کالبک (Callback Function) برای فیلتر ارائه دهید و یا حتی فیلتر را به طور کامل با رویداد filterablebeforefilter جایگزین کنید.
۱۰	پیش‌بارگیری (Pre-rendering) با تعیین ویژگی data-enhanced = "true" می‌توانید از اجرای فیلتر در زمان بارگذاری صفحه خودداری کنید.

1-فیلتر پایه (Basic filter):

می‌توانید ویژگی data-filter را روی true در یک listview تنظیم کنید تا یک فیلتر برای موارد آن در لیست ایجاد کنید.

برای وارد کردن رشته جستجو، باید یک فیلد متنی در نشانه گذاری خود ارائه دهید و قابل فیلتر کردن با دادن انتخابگر برای دسترسی به مقدار مشخصه داده ورودی فیلد متنی، از آن استفاده کند.

<!DOCTYPE html>
<html>
   <head>
      <title>Filterable basics</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form class = "ui-filterable">
         <input id = "filterBasic-input" data-type = "search">
      </form>
      
      <ul data-role = "listview" data-filter = "true" data-input = "#filterBasic-input">
         <li>Audi</li>
         <li>Benz</li>
         <li>BMW</li>
         <li>Datsun</li>
         <li>Ferrari</li>
         <li>Ford</li>
         <li>Mahindra</li>
         <li>Maruti Suzuki</li>
         <li>Renault</li>
         <li>Volkswagen</li>
      </ul>
      
   </body>
</html>

2-فیلتر جدول (Table filter):

برای تولید فیلتر جدول، ویژگی data-filter را روی عنصر جدول روی true تنظیم کنید تا فیلتری برای ردیف‌ها تولید شود.

<!DOCTYPE html>
<html>
   <head>
      <title>Filterable Table</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <input id = "filterTable-input" data-type = "search">
      </form>
      
      <table data-role = "table" id = "movie-table" data-filter = "true" 
         data-input = "#filterTable-input" class = "ui-responsive">
         <thead>
            <tr>
               <th data-priority = "1">Rank</th>
               <th data-priority = "persist">Country</th>
               <th data-priority = "2">Area sq.km.</th>
               <th data-priority = "3">Capital</th>
               <th data-priority = "4">Currency</th>
            </tr>
         </thead>
      
         <tbody>
            <tr>
               <th>1</th>
               <td>Russia</td>
               <td>17,075,200</td>
               <td>Moscow</td>
               <td>Russian ruble</td>
            </tr>
        
            <tr>
               <th>2</th>
               <td>Canada</td>
               <td>9,984,670</td>
               <td>Ottawa</td>
               <td>Canadian dollar</td>
            </tr>
        
            <tr>
               <th>3</th>
               <td>United States of America</td>
               <td>9,826,630</td>
               <td>Washington, D.C.</td>
               <td>US Dollar</td>
            </tr>
        
            <tr>
               <th>4</th>
               <td>China</td>
               <td>9,596,960</td>
               <td>Beijing</td>
               <td>Renminbi</td>
            </tr>
        
            <tr>
               <th>5</th>
               <td>Brazil</td>
               <td>8,511,965</td>
               <td>Brasilia</td>
               <td>Brazilian real</td>
            </tr>
        
            <tr>
               <th>6</th>
               <td>Australia</td>
               <td>7,686,850</td>
               <td>Canberra</td>
               <td>Australian dollar</td>
            </tr>
        
            <tr>
               <th>7</th>
               <td>India</td>
               <td>3,287,590</td>
               <td>New Delhi</td>
               <td>Indian Rupee</td>
            </tr>
         </tbody>
      </table>
      
   </body>
</html>

3-فیلتر گروه کنترل(Controlgroup Filter):

دکمه های گروه کنترل را نیز می توان با استفاده از ویژگی فیلتر داده روی عناصر فیلتر کرد که گروه کنترل را ایجاد می کند. همچنین می توانید عناصر را بر اساس رشته متن اعلام شده در ویژگی data-filtertext فیلتر کنید.

<!DOCTYPE html>
<html>
   <head>
      <title>Filterable controlgroup</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <input data-type = "search" id = "filterControlgroup-input">
      </form>
      
      <div data-role = "controlgroup" data-filter = "true" 
         data-input = "#filterControlgroup-input">
         <a href = "#" class = "ui-btn ui-shadow ui-corner-all">Button 1</a>
         <a href = "#" class = "ui-btn ui-shadow ui-corner-all" 
            data-filtertext = "two">Button 2</a>
         <a href = "#" class = "ui-btn ui-shadow ui-corner-all" 
            data-filtertext = "three">Button 3</a>
         <a href = "#" class = "ui-btn ui-shadow ui-corner-all">Button 4</a>
         <a href = "#" class = "ui-btn ui-shadow ui-corner-all">Button 5</a>
      </div>
      
   </body>
</html>

4-فیلتر مجموعه قابل جمع (Filter Collapsible Set):

ویجت فیلتر همچنین می تواند در مجموعه تاشو استفاده شود. شما باید از ویژگی data-filter استفاده کنید و روی عنصری که مجموعه جمع شونده را ایجاد می کند روی true تنظیم کنید.

<!DOCTYPE html>
<html>
   <head>
      <title>Filterable collapsible set</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <input data-type = "search" id = "searchForCollapsibleSet">
      </form>
      
      <div data-role = "collapsibleset" data-filter = "true" data-inset = "true" 
         id = "collapsiblesetForFilter" data-input = "#searchForCollapsibleSet">
         <div data-role = "collapsible" data-filtertext = "India">
            <h3>India</h3>
            <ul data-role = "listview" data-inset = "false">
               <li>Bengaluru</li>
               <li>Chennai</li>
               <li>Mumbai</li>
               <li>New Delhi</li>
            </ul>
         </div>
      
         <div data-role = "collapsible" data-filtertext = "Australia">
            <h3>Australia</h3>
            <ul data-role = "listview" data-inset = "false">
               <li>Canberra</li>
               <li>Sydney</li>
               <li>Perth</li>
               <li>Melbourne</li>
            </ul>
         </div>
      
         <div data-role = "collapsible" data-filtertext = "United Kingdom">
            <h3>United Kingdom</h3>
            <ul data-role = "listview" data-inset = "false">
               <li>London</li>
               <li>Birmingham</li>
               <li>Cardiff</li>
               <li>Glasgow</li>
            </ul>
         </div>
      </div>
      
   </body>
</html>

5-فیلتر مجموعه قابل جمع و زیر المان‌ها (Filter Collapsible Set and collapsible children):

ویجت فیلتر همچنین می تواند در مجموعه تاشو و کودکان تاشو استفاده شود.

<!DOCTYPE html>
<html>
   <head>
      <title>Filterable collapsible set and collapsible children</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <input data-type = "search" id = "searchForCollapsibleSetChildren">
      </form>
      
      <div data-role = "collapsibleset" data-filter = "true" data-children = "> div, 
         > div div ul li" data-inset = "true" id = "collapsiblesetForFilterChildren" 
         data-input = "#searchForCollapsibleSetChildren">
         
         <div data-role = "collapsible" 
            data-filtertext = "India Bengaluru Chennai Mumbai New Delhi">
            <h3>India</h3>
            <ul data-role = "listview" data-inset = "false">
               <li data-filtertext = "India Bengaluru">Bengaluru</li>
               <li data-filtertext = "India Chennai">Chennai</li>
               <li data-filtertext = "India Mumbai">Mumbai</li>
               <li data-filtertext = "India New Delhi">New Delhi</li>
            </ul>
         </div>
      
         <div data-role = "collapsible" 
            data-filtertext = "Australia Canberra Sydney Perth Melbourne">
            <h3>Australia</h3>
            <ul data-role = "listview" data-inset = "false">
               <li data-filtertext = "Australia Canberra">Canberra</li>
               <li data-filtertext = "Australia Sydney">Sydney</li>
               <li data-filtertext = "Australia Perth">Perth</li>
               <li data-filtertext = "Australia Melbourne">Melbourne</li>
            </ul>
         </div>
      
         <div data-role = "collapsible" 
            data-filtertext = "United Kingdom London Birmingham Cardiff Glasgow">
            <h3>United Kingdom</h3>
            <ul data-role = "listview" data-inset = "false">
               <li data-filtertext = "United Kingdom Canberra">London</li>
               <li data-filtertext = "United Kingdom Birmingham">Birmingham</li>
               <li data-filtertext = "United Kingdom Cardiff">Cardiff</li>
               <li data-filtertext = "United Kingdom Glasgow">Glasgow</li>
            </ul>
         </div>
      </div>
      
   </body>
</html>

6-فیلتر هر چیزی (Filter Anything):

ویجت فیلتر همچنین می تواند برای فیلتر کردن هر عنصر حاوی عنصر دیگری مانند عنصر <div> حاوی <p> استفاده شود.

<!DOCTYPE html>
<html>
   <head>
      <title>Filterable Anything</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <input data-type = "search" id = "divOfPs-input">
      </form>
      
      <div class = "elements" data-filter = "true" data-input = "#divOfPs-input">
         <p><strong>Paragraph one</strong> Lorem ipsum dolor sit amet, 
         consectetur adipiscing elit</p>
         
         <p><strong>Paragraph two</strong> sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua</p>
         
         <p><strong>Paragraph three</strong> quis nostrud exercitation ullamco 
         laboris nisi ut aliquip ex ea commodo consequa </p>
         
         <p><strong>Paragraph four</strong>  Duis aute irure dolor in reprehenderit 
         in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
         
         <p><strong>Paragraph five</strong>  Excepteur sint occaecat cupidatat non 
         proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
      </div>
      
   </body>
</html>

7-استایل فیلتر (Filter Styling):

می توانید با استفاده از data-filter-theme یک موضوع خاص برای فیلد متنی تنظیم کنید و همچنین با استفاده از data-filter-placeholder یک مکان نگه دارید.

علاوه بر این، ویجت گزینه های همگام سازی را ارائه می دهد که بین ویجت ورودی متن و ویجتی که فرزندان آن را فیلتر می کند به اشتراک گذاشته می شود. این تضمین می کند که مقدار گزینه ویجت textinput با مقدار گزینه ویجت یکسان است.

به عنوان مثال، هر زمان که data-inset = "true" در listview تنظیم شود، ویجت متنی مربوطه نیز درج می شود.

<!DOCTYPE html>
<html>
   <head>
      <title>Filter Styling</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <ul data-role = "listview" data-filter = "true" 
         data-filter-placeholder = "Find cars..." data-filter-theme = "a" 
         data-inset = "true">
         <li>Audi</li>
         <li>BMW</li>
         <li>Ford</li>
         <li>Hyundai</li>
         <li>Mahindra</li>
         <li>porsche</li>
         <li>Renault</li>
         <li>Toyota</li>
      </ul>
   </body>
</html>

8-نمایش خودکار فیلتر (Filter Reveal):

ویژگی آشکارسازی فیلتر به شما این امکان را می دهد که به راحتی با داده های محلی یک تکمیل خودکار ساده بسازید.

شما می توانید از ویژگی data-filter-reveal = "true" برای پنهان کردن خودکار همه موارد لیست زمانی که فیلد نوشتاری مورد استفاده برای جستجو خالی است استفاده کنید.

<!DOCTYPE html>
<html>
   <head>
      <title>Filter Reveal</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <ul data-role = "listview" data-filter = "true" data-filter-reveal = "true" 
         data-filter-placeholder = "Search your products..." data-inset = "true">
         <li><a href = "#">Electronics</a></li>
         <li><a href = "#">Clothing</a></li>
         <li><a href = "#">Home and furnitures</a></li>
         <li><a href = "#">Media and books</a></li>
         <li><a href = "#">Babies and kids</a></li>
         <li><a href = "#">Mobile and tablets</a></li>
      </ul>
   </body>
</html>

9-کالبک سفارشی فیلتر (Filter Custom Callback):

همانند بسط لیست نمای، تابع callback را می توان به فیلتر ارائه کرد یا حتی فیلتر را به طور کامل در رویداد filterablebeforefilter نادیده گرفت. قبل از اینکه فیلتر عملاً روشن شود، 250 میلی‌ثانیه تأخیر طول می‌کشد. این باعث می شود که عملکرد فیلتر چندین بار در حالی که کاربر در حال تایپ است اجرا شود.

برای ایجاد یک پیش‌فرض جدید برای همه ویجت‌های قابل فیلتر، یک تابع فیلتر سفارشی تنظیم کنید، همانطور که در کد زیر نشان داده شده است، گزینه filtercallback را در نمونه اولیه ویجت در یک کنترل‌کننده سیگنال mobileinit لغو کنید.

$( document ).one( "mobileinit", function() {
   $.mobile.filterable.prototype.options.filterCallback = function( index, searchValue ) {
      // The this keyword in this function refers to the element
      // for the code which decide whether or not to filter.
      // The true return value shows that the element referred
      // to by this keyword is to be filtered.
      // If returns false specifies that the item is to be displayed.
      //
      // Custom filtering logic goes here.
   });
});

با تنظیم گزینه های filterCallback، می توانید یک تابع فیلتر سفارشی را برای یک ویجت قابل فیلتر، همانطور که در کد زیر نشان داده شده است، تنظیم کنید.

$.mobile.document.one( "filterablecreate", "#myFilterable", function() {
   $( "#myFilterable" ).filterable( "option", "filterCallback", 
      function( index, searchValue ) {
      // The above example explains the callback function's signature.
      //
      // Custom filtering logic goes here.
   });
});

برای لغو کامل فیلتر (به عنوان مثال، هر زمان که داده ها در سمت سرور یا ذخیره محلی بارگیری می شوند)، همانطور که در کد زیر نشان داده شده است، به رویداد filterablebeforfilter متصل شوید.

$( ".selector" ).on( "filterablebeforefilter", function( e, data ) {
   var value;

   e.preventDefault();
   value = data.input.value;
   // trigger own request to database
});

10-پیش‌بارگیری (Pre-rendering):

ویجت قابل فیلتر یک بار در طول راه اندازی فیلتر را اجرا می کند تا اطمینان حاصل شود که لیست فرزند مقدار وارد شده در ورودی جستجو را برمی گرداند. برای جلوگیری از این امر، ویژگی data-enhanced = "true" را مشخص کنید.

هر زمان که این ویژگی روی true تنظیم شود، فرض بر این است که کلاس uiscreen را به درستی برای آن دسته از کودکانی که باید در ابتدا پنهان شوند، اعمال کرده اید. ویجت قابل فیلتر از ورودی جستجو برای تعیین اینکه آیا ورودی جستجو از قبل خود را رندر کرده است یا خیر استفاده می کند.

مثال زیر ورودی جستجو و قابل فیلتر را از قبل ارائه می دهد.

<!DOCTYPE html>
<html>
   <head>
      <title>Filterable Pre-rendering</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <div class = "ui-input-search ui-body-inherit ui-corner-all 
            ui-shadow-inset ui-input-has-clear">
            <input data-type = "search" data-enhanced = "true" data-inset = "false" 
               id = "pre-rendered-example-input" placeholder = "search cars..." value = "or" />
         </div>
         
         <div data-role = "controlgroup" data-enhanced = "true" data-filter = "true" 
            data-filter-reveal = "true" data-input = "#pre-rendered-example-input" 
            class = "ui-controlgroup ui-controlgroup-vertical ui-corner-all">
            <div class = "ui-controlgroup-controls">
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow 
                  ui-screen-hidden">Audi</a>
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-first-child 
                  ui-shadow ui-last-child">Ford</a>
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow 
                  ui-screen-hidden">Hyundai</a>
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow 
                  ui-screen-hidden">Tata</a>
            </div>
         </div>
      </form>
      
   </body>
</html>

گروه کنترلی(Controlgroup) - درس قبلی