Архив

Архив раздела ‘Javascript’
24 августа 2018 Нет комментариев

При наведении на ссылку .link показываем блок .block, когда указатель мыши находится вне этого блока и вне ссылки — скрываем.

$(document).ready(function(){
	$('.link').hover(function(){
		$('.block').addClass('visible');
	});
	$(window).mousemove(function(event){
		if($(event.target).closest(".block").length||$(event.target).closest(".link").length)return;
		$('.block').removeClass('visible');
	});
});
.block{
	display:none;
}
.block.visible{
	display:block;
}
Categories: Javascript Tags:

Javascript:

ymaps.ready(init);
function init(){
	var groups=[
		{
			name:"Группа 1",
			style:"islands#blueCircleIcon",
			items:[
				{name:"Санкт-Петербург, Московский пр-т, д. 44"},
				{name:"Санкт-Петербург, ул. Байконурская, д. 14А, ТРК «Континент»"},
			]
		},
		{
			name:"Группа 2",
			style:"islands#greenCircleIcon",
			items:[
				{name:"Санкт-Петербург, Лиговский пр-т, д. 30А, ТРЦ «Галерея»"},
				{name:"Санкт-Петербург, Петергофское ш., д. 51, ТРЦ «Жемчужная Плаза»"},
			]
		},
	];
	var myMap=new ymaps.Map('map',{
		center:[59.939095,30.315868],
		zoom:10
	},{
		searchControlProvider:'yandex#search'
	}),
	menu=$('<div class="menu"></div>');
	for(var i=0,l=groups.length;i<l;i++){
		createMenuGroup(groups[i]);
	}
	function createMenuGroup(group){
		var menuItem=$('<div class="group"><p>'+group.name+'</p></div>'),
			collection=new ymaps.GeoObjectCollection(null,{preset:group.style}),
			submenu=$('<ul></ul>');
		myMap.geoObjects.add(collection);
		menuItem.append(submenu).appendTo(menu);
		for(var j=0,m=group.items.length;j<m;j++){
			createSubMenu(group.items[j],collection,submenu);
		}
	}
	function createSubMenu(item,collection,submenu){
		var submenuItem=$('<li><a href="#">'+item.name+'</a></li>');
		ymaps.geocode(item.name,{results:1}).then(function(res){
			var coords=res.geoObjects.get(0).geometry.getCoordinates();
			var placemark=new ymaps.Placemark(coords,{balloonContent:item.name});
			collection.add(placemark);
			submenuItem.appendTo(submenu).find('a').bind('click',function(){
				if(!placemark.balloon.isOpen()){
					placemark.balloon.open();
				}
				else{
					placemark.balloon.close();
				}
				return false;
			});
		});
	}
	menu.insertAfter($('#map'));
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script>
	//js here
</script>
<div id="map" style="height:400px;"></div>
Categories: Javascript, Web Tags:

В случае, когда возникает ошибка Uncaught TypeError: a.indexOf is not a function при использовании последних версий Jquery, например в этом случае:

$(window).load(function(){
});

использовать:

$(window).on('load',function(){
});
Categories: Javascript Tags:
var win=window.open('https://google.com/','_blank');
win.focus();
Categories: Javascript Tags:

Для имитации клика по якорю:

$('.element').on('click',function(){
	document.location.href='#anchor';
});
Categories: Javascript Tags:
26 апреля 2018 Нет комментариев

В примере нужно разделить категории и товары в autocomplete. Категории в теге <b>, товары без.

$.widget("custom.groupautocomplete",$.ui.autocomplete,{
	_create:function(){
		this._super();
		this.widget().menu("option","items",">:not(.ui-autocomplete-group)");
	},
	_renderMenu:function(ul,items){
		var self=this;
		var is_bold=0;
		$.each(items,function(index,item){
			if(item.label.indexOf("<b>")!=-1){
				if(is_bold!=1){
					ul.append("<li class='ui-autocomplete-group'>Категории по запросу:</li>");
				}
				is_bold=1;
			}
			else{
				if(is_bold!=0){
					ul.append("<li class='ui-autocomplete-group'>Товары по запросу:</li>");
				}
				is_bold=0;
			}
			self._renderItemData(ul,item);
		});
	},
	_renderItem:function(ul,item){
		var bold='';
		if(item.label.indexOf("<b>")!=-1){
			bold=' class="category"';
		}
		return $("<li"+bold+"></li>").data("item.autocomplete",item).append(item.label.replace(/(<([^>]+)>)/ig,"")).appendTo(ul);
	}
});
$("#search").groupautocomplete({
	source:"/ajax_search.php",
	minLength:3,
	select:function(event,ui){
		event.preventDefault();
		$(this).val(ui.item.value.replace(/(<([^>]+)>)/ig,""));
		$(this).parent('form').submit();
	}
});

Less:

.ui-autocomplete{
	max-width:400px !important;
	.ui-state-focus{
		background:fade(@color_link,80%) !important;
		color:@color_white !important;
		border-color:transparent !important;
	}
}
.ui-menu .ui-menu-item.category{
	font-weight:bold;
	color:@color_link;
	text-decoration:underline;
}
.ui-autocomplete-group{
	padding:3px 1em 3px .4em;
	font-weight:700;
	font-size:17px;
	color:@color_black;
	margin-top:10px;
}
.ui-autocomplete-group:first-child{
	margin-top:0;
}

по теме:
http://jsfiddle.net/bcbond/p924tge8/

Categories: Javascript Tags:
16 апреля 2018 Нет комментариев
mytext.replace(/(<([^>]+)>)/ig,"")
Categories: Javascript Tags: