FacetWP – Flyout
این افزونه یک سایدبار ایجاد می کند که می تواند به پشتیبانی تلفن همراه کمک کند.
برای دیدن آن در عمل، به دموی ما بروید و سپس عرض مرورگر خود را کوچک کنید تا دکمه بنفش “نمایش فیلترها” را ببینید.
موارد استفاده
یک دکمه یا لینک با کلاس Css از facetwp-flyout-open اضافه کنید تا شروع به کار کند.
<button class = "facetwp-flyout-open"> فیلتر </ Button>
اگر می خواهید دکمه را برای کاربران دسکتاپ مخفی کنید، این را به style.css اضافه کنید:
@media (min-width: 780px) {
.facetwp-flyout-open {
display: none;
}
}
مهم: اگر از لینک استفاده می کنید، مطمئن شوید که href حاوی (“#”) نیست. برخی از سازندگان صفحه هنگام ایجاد یک دکمه یا لینک عنصر، آن را بصورت خودکار اضافه می کنند.
خودشه! همه موارد زیر کاملاً اختیاری است.
JS hooks
(function($) { FWP.hooks.addFilter('facetwp/flyout/facets', function(facets) { return ['facet3', 'facet1', 'facet2']; // change the facet display order }); FWP.hooks.addAction('facetwp/flyout/open', function() { // flyout opened }); FWP.hooks.addAction('facetwp/flyout/close', function() { // flyout closed }); })(jQuery);
افزودن محتوای اضافی
برای افزودن محتوای اضافی ، یک عنصر HTML .facetwp-flyout-tpl در صفحه اضافه کنید. با CSS بصورت خودکار پنهان می شود.
در این عنصر، یک نگهدارنده {content} اضافه کنید تا بصورت خودکار خارج شود. سپس محتوا را در بالا یا پایین این نگهدارنده اضافه کنید. در اینجا یک مثال کامل آورده شده است:
<div class="facetwp-flyout-tpl"> This text appears above the facets! {content} This text goes below the facets. </div>
دیدگاهها
هیچ دیدگاهی برای این محصول نوشته نشده است.