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

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

Опубликовано: 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>

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

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

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

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

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

Написав один 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/

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

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

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

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

• jquery
• plugin
• time
• date
• datepicker
• datetimepicker
• timepicker
• form
• format date

Как-то я описывал работу с jQueryUI datetimepicker. Приемлимым этот плагин назвать было сложно, потому как он тянул с собой весь jQueryUI, и еще 10-ок файлов. По функциональности он тоже весьма скуп. Ничего более стоящего, и тогда и сейчас найти не удалось. Поэтому написал свой плагин с преферансом и поэтессами.

Результатом трудов стал великолепный на мой взгляд плагин на jQuery DateTimePicker

Почему он лучше, чем стандартный jQuery UI виджет?

Во первых, потому, что не требует кроме себя и собственно jQuery ничего более. Во вторых в сжатом виде, весит менее 5кб вместе со стилями. Нет других дополнительных файлов с изображениями, только файл стилей и файл js.

Однако, главным преимуществом, я считаю, наличие отключаемого,  TimePicker'а. Да DatePicker тоже отключаем и это очень удобно.

То, что дает нам интернет, в этом сегменте виджетов, ужасно. Пикеры из 90-х. Такое ощущение, что их создателям было просто наплевать на внешний вид своего детища. Один из самых удачных, это безусловно jscal, но он настолько сложен и монструозен, что просто прикрутить его к тестовой странице мне не удалось. Да объем кода, ему сопутствующий оставляет желать лучшего.

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

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

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

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

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