Архив

Публикации с меткой ‘jquery’
chosen + autocomplete
15 октября 2019 Нет комментариев

Когда нужно совместить Chosen (https://harvesthq.github.io/chosen/) и Autocomplete Widget (https://api.jqueryui.com/autocomplete/), например, при очень большом списке.

$("select.chosen").chosen({width:"100%"});
$('.accessories .search-field input').each(function(i,el){
	el=$(el);
	el.autocomplete({
		minLength:3,
		delay:2000,
		source:function(request,response){
			var select=el.closest('.accessories').find('select');
			$.ajax({
				url:"/?sc="+request.term,
				dataType:"json",
				success:function(data){
					select.find('option').not(':selected').remove();
					response($.map(data,function(item){
						if(!(select.find('option[value='+item.id+']').length>0)){
							select.append('<option value="'+item.id+'">'+item.name+' ['+item.part+']</option>');
						}
					}));
					select.trigger("chosen:updated");
				}
			});
		},
	});
});

Пример php для ajax:

if(isset($_GET['sc'])){
	header("Content-Type: application/json");
	$result=get_from_base('`id`,`part`,`name`','catalog',"`part` LIKE '%".$_GET['sc']."%'",'`parent`,`pos`');
	echo json_encode($result);
	exit();
}

Сам select:

<div class="accessories">
	<select name="accessories[]" multiple="multiple" class="chosen" data-placeholder="Выбрать позиции">
		<?if(count($catalog_accessories)>0){?>
			<?foreach($catalog_accessories as $v){?>
				<option value="<?=$v['id']?>"<?if(in_array($v['id'],$change_catalog_accessories)){?> selected="selected"<?}?>><?=$v['name']?> [<?=$v['part']?>]</option>
			<?}?>
		<?}?>
	</select>
</div>

Другие данные:

$change_catalog_accessories=array();
$change_catalog=get_by_id($_GET["uid"],'catalog');
if($change_catalog['accessories']!=''){
	$change_catalog_accessories=explode(',',str_replace("'","",$change_catalog['accessories']));
	$catalog_accessories=get_from_base('`id`,`name`,`part`','catalog',"`shown`=1 and `id`!='".$change_catalog['id']."' and `id` in (".$change_catalog['accessories'].")",'`parent`,`pos`');
}
Categories: Javascript Tags:
owl carousel n from all
10 августа 2019 Нет комментариев 
var owl=$('#owl');
owl.owlCarousel({
	loop:true,
	margin:0,
	items:1,
	dots:true,
	nav:true,
	navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
});
owl.on('changed.owl.carousel',function(e){
	$('.counter span').text(e.page.index+1);
});
<div class="owl-carousel owl-theme" id="owl">
	<?php
	foreach($items as $item){?>
		<div class="item"></div>
	<?}?>
</div>
<div class="counter"><span>1</span> | <?=count($items)?></div>
Categories: Javascript Tags: ,
fancybox 2 touchwipe
8 июля 2019 Нет комментариев 
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").fancybox({
	helpers:{title:{type:'over'}},
	padding:'0',
	afterShow:function(){
		$('.fancybox-wrap').touchwipe({
			wipeLeft:function(){$.fancybox.next();},
			wipeRight:function(){$.fancybox.prev();},
			preventDefaultEvents:false,
		});
	}
});

https://www.netcu.de/jquery-touchwipe-iphone-ipad-library

Categories: Javascript Tags:
jquery — скрыть блоки с пустыми вложенными блоками
5 июля 2019 Нет комментариев 
$('.block').each(function(){
	if($(this).find('.content').html()==''){
		$(this).hide();
	}
});
Categories: Javascript Tags:
jquery before css
18 июня 2019 Нет комментариев

Применить стили к :before (1200 — ширина рабочей области)

$(window).load(function(){
	var half=(parseInt($(window).width())-1200)/2;
	$('head').append('<style>.title:before{width:'+(half-15)+'px;left:-'+half+'px;}</style>');
});
Categories: CSS, Javascript Tags: ,
change inputs values after reset form
28 марта 2019 Нет комментариев 
$('.params_full input[type=reset]').on('click',function(){
	this.form.reset();
	$('.params_full input[type=text]').each(function(){
		if($(this).val()!=''){
			//$(this).val(number_format(replaceAll($(this).val(),' ',''),0,'.',' '));
		}
	});
	return false;
});
Categories: Javascript Tags:
reset all ui slider
28 марта 2019 3 комментария

.params_full .range > div — slider selector

$('.params_full input[type=reset]').on('click',function(){
	$('.params_full .range > div').each(function(){
		var options=$(this).slider('option');
		$(this).slider('values',[options.min,options.max]);
	});
});
Categories: Javascript Tags: