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

Категория: jQuery

Опубликовано: 02 марта 2011

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

• jquery
• ajax
• post
• get
• getjson
• авторизация

В библиотеке jQuery есть несколько методов для работы с ajax: jQuery.post, $.get, $.getJSON, $.ajax. В конечном счете, все они - более удобная надстройка над $.ajax. Объясню на простом ajax примере: 

Отправим на страницу index.php данные с формы. После того, как данные отправлены, выведем сообщение. В случае ошибки также сообщим об этом пользователю.

Сначала методом $.post

var data = $('#form').serialize(); 
$.post('index.php',data,function(data,status){
	if( status=='success' ){
		alert('Данные успешно отправлены!')
	}else{
		alert('В процессе отправки произошла ошибка :(')
	}
})

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

Категория: jQuery

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

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

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

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

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

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

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

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

• jquery
• plugin
• fancybox
• dialog
• window

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

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

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

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

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

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

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

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

• 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>

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