Jump to content
View in the app

A better way to browse. Learn more.

IPBMafia.ru - поддержка Invision Community, релизы, темы, плагины и приложения

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Как сделать фильтры в страницах?

Featured Replies

Posted

Здравствуйте.

Есть вот такая страничка у меня https://wc3.games/ht/ - тут есть фильтры, выборка. Как сделать такие же но через функционал IPS, мне нужно чтобы при выборе фильтра исчезал весь контент кроме нужного, а не просто применялась прозрачность.

Я себе сделал по другому) Через JavaScript

<ul class="theme-grid-filter" id="theme-filter">
            <li data-filter="tf-all" class="active"><i></i>Все темы</li>
            <li data-filter="tf-dark" class=""><i></i>Тёмные</li>
            <li data-filter="tf-light" class=""><i></i>Светлые</li>
            <li data-filter="tf-image" class=""><i></i>С фонами</li>
        </ul>
! function (t, e, i, a) {
	t.fn.doubleTapToGo = function (a) {
		return !!("ontouchstart" in e || navigator.msMaxTouchPoints || navigator.userAgent.toLowerCase().match(/windows phone os 7/i)) && (this.each(function () {
			var e = !1;
			t(this).on("click", function (i) {
				var a = t(this);
				a[0] !== e[0] && (i.preventDefault(), e = a)
			}), t(i).on("click touchstart MSPointerDown", function (i) {
				for (var a = !0, o = t(i.target).parents(), n = 0; n < o.length; n++) o[n] === e[0] && (a = !1);
				a && (e = !1)
			})
		}), this)
	}
}(jQuery, window, document), $(document).ready(function () {
	$("#theme-filter li").on("click", function () {
		$("#theme-filter li").removeClass(), $(this).addClass("active");
		var t = $(this).attr("data-filter");
		"tf-all" === t ? ($("#theme-grid li").removeClass("t-in").addClass("t-out"), setTimeout(function () {
			$("#theme-grid li").removeClass("t-hide t-out").addClass("t-in")
		}, 200)) : ($("#theme-grid li").removeClass("t-in").addClass("t-out"), setTimeout(function () {
			$("#theme-grid li").removeClass("t-hide t-out").addClass("t-in"), $("#theme-grid li:not(." + t + ")").addClass("t-hide")
		}, 200))
	});
	var t = function () {
		$(".link").each(function () {
			var t = $(this).height();
			$(this).css({
				"font-size": (t / 11).toFixed(0) + "px"
			})
		})
	};
	t();
	var e = function () {
		$(".iphone_flat .screenWrap").each(function () {
			var t = $(this).height(),
				e = .2841475573 * t;
			$(this).css({
				perspective: e + "px"
			})
		})
	};
	e();
	var i = function () {
		$(".iframePreview").each(function () {
			var t = $(this).width(),
				e = $(this).parent(".screen").width();
			$(this).css({
				transform: "scale(" + e / t + ")"
			})
		})
	};
	i();
	var a = function () {
		$(".videoScale").each(function () {
			var t = $(this).height(),
				e = t / 1080;
			$(this).find("#ytplayer").css({
				transform: "scale(" + e + ")"
			})
		})
	};
	a(), $(window).resize(function () {
		t(), e(), i(), a()
	}), $(".faqs li div").hide(), $(".faqs li strong").click(function () {
		$(this).parent().find("div").slideToggle("fast")
	}), $(".why").click(function () {
		return $(".why_text").slideToggle(), !1
	}), $("ul#filter a").click(function () {
		$(this).css("outline", "none"), $("ul#filter .current").parent().find("span").hide(), $("ul#filter .current").removeClass("current"), $(this).parent().addClass("current"), $(this).parent().find("span").show();
		var t = $(this).text().toLowerCase().replace(" ", "-");
		return "all" === t ? $("ul#portfolio li.hidden").fadeIn("fast").removeClass("hidden") : $("ul#portfolio li").each(function () {
			$(this).hasClass(t) ? $(this).fadeIn("fast").removeClass("hidden") : $(this).fadeOut("fast").addClass("hidden")
		}), !1
	}), $(".closePopup").click(function () {
		return $("#pricingPopup, .popupBackground").hide(), !1
	}), $(".showPopup").click(function () {
		return $(".popupBackground").show(), !1
	}), $(".ie .iewarning").html("<strong>Important:</strong> Your browser is outdated! To view this site correctly, please <a href='http://windows.microsoft.com/en-us/internet-explorer/download-ie'>upgrade your browser</a> or use a safe, modern browser such as <a href='https://www.mozilla.org/firefox/' target='_blank'>Firefox</a>, <a href='https://www.google.com/chrome' target='_blank'>Chrome</a>, <a href='https://www.apple.com/safari/' target='_blank'>Safari</a> or <a href='http://www.opera.com/' target='_blank'>Opera</a>.")
});
@media (max-width:550px) {
	.theme-grid {
		margin:0;
		padding:0
	}
	.theme-grid>li {
		padding:0 0 80px 0;
		width:100%
	}
}
.theme-grid-filter {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	text-align:center;
	margin-bottom:20px;
	background:#d8dee6;
	box-shadow:inset rgba(0,0,0,0.08) 0px -1px 0px
}
.theme-grid-filter li {
	padding:20px 30px;
	cursor:pointer;
	position:relative;
	-webkit-transition:color 0.1s linear;
	transition:color 0.1s linear
}
.theme-grid-filter li:hover,.theme-grid-filter li.active {
	color:#222
}
.theme-grid-filter li.active:before,.theme-grid-filter li.active:after {
	content:'';
	position:absolute;
	z-index:1;
	bottom:1px;
	left:50%;
	margin-left:-6px;
	width:12px;
	height:12px;
	border:6px solid transparent;
	border-bottom-color:rgba(0,0,0,0.08);
	box-sizing:border-box
}
.theme-grid-filter li.active:after {
	z-index:2;
	border-bottom-color:#fff;
	bottom:0px
}
.theme-grid-filter li.active {
	pointer-events:none
}

 

И создал доп поле по которому в страницах делаю выборку.

Добавил его в class="{доп поле}"

<section id="premadeThemes">
	<ul id="theme-grid" class="theme-grid">
	
 
    
		
		
        
        
       		
              
 










































           
        
      
        
        
             
 










































               
      
      
        
        
            
				
 










































            
      
      
        
        
            
				
 










































            
      
      
        
        
            
				
 










































            
      
      
        
        
            
				
 









































<li itemscope="" itemtype="http://data-vocabulary.org/Product" class="tf-light t-in">
				    <div class="tg-card">
					    	<a href="/portfolio/vtope-r2/" title="Подробнее о Vtope" class="theme-grid-link">
								<div class="theme-grid-item" style="background-image:url('/uploads/monthly_2016_11/583b5c668c754_.PNG.027135bef11d95a59672122b35c3d297.PNG');">
									<img src="/uploads/monthly_2017_03/583b5c668c754_.thumb.PNG.d6ade120039d470994aca3e16aab2e80.PNG" alt="" itemprop="image">
								</div>
							</a>
							
							<div class="theme-grid-text">
						    	<a href="http://cmsmafia.ru/portfolio/vtope-r2/" title="Подробнее о Vtope" itemprop="url"><h4 itemprop="name">Vtope</h4></a>
						    	<span class="adjustPrice" itemprop="price">₽ 500.00</span>
						    	<div itemprop="description" style="text-align: justify; word-wrap: break-word;" data-ipstruncate="" data-ipstruncate-size="4 lines" data-ipstruncate-type="remove" class="is-truncated">
	Vtope — это приятный светлый стиль, который подойдет для любого паблика. В ходе работы были созданы макеты: главной страницы, страницы отзывы, контакты, партнеры и других страниц. Особенности дизайна сайта: тематическое оформление шапки каждой страницы сайта... </div>
					    	</div>
					    </div>
				    	
</li>
            
      
      
      
	
    </ul>
</section>

 

13 часов назад, WOLF сказал:

 

  Показать контент

andros0789, почему так мало пробелов? 

:D да и спойлер не помешал бы ;) 

скрин не грузитсяo.O 



http://prnt.sc/etcrjr

 

 

сорян)))с телефона кидал)

Короче я сделал тупо через яваскрипт, и вкладки. К кнопкам вкладок прописал в класс дополнительное поле, то есть получается если я создавал новость (или шаблон как у меня) и при создании я выбирал "С фоном", то у меня через доп поле подставлялось  class="tf-dark, tf-image t-in"

ниже скрин как я выбираю сортировку при создании новости)

Снимок.PNG

В 06.04.2017 в 16:59, TemKa_SD сказал:

Есть вот такая страничка у меня https://wc3.games/ht/ - тут есть фильтры, выборка. Как сделать такие же но через функционал IPS

По приведенной ссылке кастомные фильтры, т.е. созданные отдельно от движка, хотя возможно чтото от js-фреймворка IPS использовалось. В то же время в IPS есть возможность  по некоторым типам полей, в частности Stlect Box задавать фильтрацию.

1.jpg

2.jpg

3.jpg

  • Author

kgb, Спасибо, примерно это мне и надо было. Можно через этот функционал реализовать и выборку выпадающим списком.

5 минут назад, TemKa_SD сказал:

Можно через этот функционал реализовать и выборку выпадающим списком

Я не знаю. Попробуй.  Выпаадющий спсок отменяет мультиселект

  • Author
7 часов назад, kgb сказал:

Я не знаю. Попробуй.  Выпаадющий спсок отменяет мультиселект

Всё супер, появилось пару проблем.

1. Как вывести ключ из выпадающего списка в шаблон?

2. Не работает вставка полей в шаблон, вставляю код:

{$record->customFieldDisplayByKey('мой ключ', 'listing')|raw}

Вылазиет ошибка.

2017-04-08_160725.png

2017-04-08_160802.png

3 часа назад, TemKa_SD сказал:

Вместо переменной $record нужно использовать $row

Ну так правильно, в display-шаблонах $record, в listing-шаблонах $rows котороая потом форичится в $row {{foreach $rows as $row}}

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.