Информация о материале

Категория: jQuery

Опубликовано: 14 апреля 2015

Просмотров: 7635

Во времена сверх динамичных сайтов на ajax, никого не удивишь поиском по сайту с огромным числом параметров. Когда клик по чекбоксу вызывает подгрузку сотен элементов. Порой, такая загрузка продолжается приличное время. Во времена классических(однопоточных) сайтов мы просто кешировали всю страницу целиком и работали с ней. Сейчас такое не пройдет и чтобы проверить, как будет выглядеть элемент, надо дождаться полной загрузки. И ладно если это просто загрузка новостей. А если это сложная поисковая форма у туроператора, а на сервере запускается десяток парсеров при каждом смене параметров фильтра. Такие ajax запросы могут по времени быть очень и очень долгими. 

В почте я расскажу, как можно кешировать ajax запросы сделанные на jQuery, но принцип один и тот же для всех ajax библиотек. Нам просто каким-то образом надо добавить плагин, к ajax модулю jQuery, и сохранять в локальное хранилище запросы.

Информация о материале

Категория: Обзор плагинов

Опубликовано: 13 декабря 2014

Просмотров: 7647

• jquery
• plugin
• fancybox
• dialog
• window

Этот плагин назревал уже очень давно. В процессе создания Конструктора Яндекс карт, пришлось воспользоваться наиболее известным jQueryUI. Он безусловно хорош, но избыточен. Минифицированная версия основного файла весит более 200 кб плюс еще на 100 кб стилей, и на 50 файлов со спрайтами. В комплексе, этот пакет решает несколько проблем, поэтому я его и использовал в конструкторе, однако если нужен только определенный функционал, то лучше использовать другие плагины.

Мне потребовался плагин для создания диалоговых окон. При том без обилия настроек для первого использования, но при этом чтобы они были, когда я захочу, что-то не стандартное.

Таких плагинов очень много, но все они обладают рядом недостатков. Поэтому снова берем все в свои руки, и пишем нужный плагин с нуля. 

Вот, что из этого вышло.

Информация о материале

Категория: Обзор плагинов

Опубликовано: 03 июля 2014

Просмотров: 13268

• jquery
• input
• plugin
• ui
• slider
• 2d
• ползунок

​Вновь статья в названии содержит громогласное «самый лучший». Время показало, что когда я рассказывал про datetimepicker, эти слова оказались верны. Сейчас я более чем уверен, jQuery плагин range2DSlider придется многим по вкусу.

Море настроек конфигурации делают этот плагин одним из лучших в своем роде. Просто взгляните, на что он способен:

Та, конфигурация, для которой он был создан 2d слайдер. 

Показать код

$('#slider').range2DSlider({
    grid:false,
    axis:[[0,2,5,7,10],[0,5,10]],
    projections:true,
    showLegend:[1,1],
    allowAxisMove:['both'],
    printLabel:function( val ){
      this.projections&&this.projections[0].find('.xdsoft_projection_value_x').text(val[1].toFixed(5));
      return val[0].toFixed(5);
    }
  })
.range2DSlider('value',[[1,4],[3,1],[6,6]]);

Или обычный range слайдер (ползунок), альтернатива нативному input type="range", но с поддержкой нескольких значений

Показать код

$('#slider').range2DSlider({
	template:'horizontal',
	value:[[5,0],[7,0]],
	onlyGridPoint:true,
	round:true,
	axis:[[-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10]]
});

Вертикальный вариант исполнения, того же ползунка input type="range"

Показать код

$('#slider').range2DSlider({
    template:'vertical',
    value:[[0,5]],
    showRanges:[[0,1]],
    style:'float:left;margin-left:25px;',
    axis:[[0,1],[0,10]],
    round:true,
    printLabel:function( val ){
		return val[1]+' yo';
	}
});

В подсказке над(под/слева/справа) ползунком можно выводить не только текущие значения. Все кастомизируется довольно просто

Показать код

<input class="slider31">
<script>
  var values = [];
  var ranges = [];
  var cities = [
    'Abuja',
    'Accra',
    'Adamstown',
    'Addis',
    'Algiers',
    'Alofi',
    'Amman',
    'Amsterdam',	
    'Andorra',
    'Ankara',
    'Antananarivo',	
    'Apia',
    'Ashgabat',	
    'Asmara',
    'Astana',
    'Asuncion',	
    'Athens',
    'Avarua',
    'Baghdad',	
    'Baku',
    'Bamako',	
    'Bandar',
    'Bangkok',	
    'Bangui',
    'Banjul',
    'Basseterre',	
    'Beijing',
    'Beirut',
    'Belgrade',	
    'Belmopan'
  ];
  for(var i = -10,k=0;i<=10;i++,k++ ){
    values.push([i,Math.sin(i),cities[i+10]]);
    if( i<10 )
      ranges.push([k,k+1]);
  }	
  $('.slider31').range2DSlider({
    x:'right',
    y:'top',
    style:'margin-top:50px;',
    showLegend:[0,0],
    showRanges:ranges,
    axis:[[-10,10],[-1.5,1.5]],
    allowAxisMove:['y'],
    printLabel:function( val ){
      return val[1].toFixed(2)+'<br>'+val[2];
    }
  }).range2DSlider('value',values);
</script>

Не нравится внешний вид? Я старался, честно! Ну что же, добавим своих стилей, и легким движением руки, брюки превращаются...

Показать код

<input id="slider41" />
<style type="text/css">.
xdsoft_custom .xdsoft_range2dslider_runner{
	border-radius:1px;
	margin:0px 0px -4px -8px !important;
	background:rgba(0,0,127,0.5);
	border:1px outset #ddd;
}
.xdsoft_custom .xdsoft_range2dslider_box{
	min-height:8px;
	background:rgba(127,127,127,0.5);
	border-radius:1px;
	border-style:solid;
}
.xdsoft_custom .xdsoft_slider_label{
	background: red;
	color: #fff;
	bottom: 22px !important;
}
.xdsoft_custom .xdsoft_slider_label.xdsoft_slider_label_top:after{
	border-top-color:red;
}
</style>
<script>
$('#slider41').range2DSlider({
	grid:false,
	height:0,
	className:'xdsoft_custom',
     	style:'margin-top:50px;',
	showLegend:[1,0],
	axis:[[0,0.1]],
	tooltip:['top'],
	alwShowTooltip:[true],
	allowAxisMove:['x'],
	printLabel:function( val ){
		return val[0].toFixed(3);
	}
}).range2DSlider('value',[[0.05,0]]);
</script>

Все что вы увидели выше не строго зашито в слайдер, а является сочетанием определенных настроек. Можно создать конфигурации на все случаи жизни. Под катом описание настроек и их конфигураций, а заинтересовавшиеся могут сразу скачать плагин и поковырять его сами

Информация о материале

Категория: Обзор плагинов

Опубликовано: 11 ноября 2013

Просмотров: 3980

Написав один jQuery плагин и выложив его на plugins.jquery.com. Как его там выкладывать - тема отдельной статьи. Но дело не в этом. Далее я наблюдал, как homepage плагина посещают пользователи и откуда они идут. Стало интересно, а откуда идут посещения. Нашел один сайт, который освещает последние интересные плагины за неделю. Пожалуй открою и у себя эту рубрику, которая будет по сути не переводом их статей, а просто обзором по их обзорам. То, что они признали интересным скорее всего интересно, не так ли? Итак приступим.

1. iToggle

iToggle от Sébastien Rochis это  jQuery плагин, который трансформирует обычный input type="checkbox" в переключатель в стиле iOS. Что характерно новый элемент ведет себя также, как и обычный checkbox, реагирует на те же клавиши и Tab.

2. jQuery Sliding Pop Hover

http://thedesignblitz.com/best-jquery-plugins-of-the-week-12/