Добро пожаловать, Гость
Логин: Пароль: Запомнить меня
  • Страница:
  • 1
  • 2
  • 3

ТЕМА: jQuery UI Slider — ползунок диапазон цен

jQuery UI Slider — ползунок диапазон цен 5 года 10 мес. назад #660

  • Stebgo
  • Stebgo аватар
  • Не в сети
  • Захожу иногда
  • Сообщений: 64
  • Спасибо получено: 19
  • Репутация: 5
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]
не знаю php, jquery, css - все что я на них делаю лишь эксперименты и не стоит их воспринимать серьезно :)
Последнее редактирование: 5 года 10 мес. назад от Stebgo.
Администратор запретил публиковать записи гостям.

Re: jQuery UI Slider — ползунок диапазон цен 5 года 10 мес. назад #666

  • Stebgo
  • Stebgo аватар
  • Не в сети
  • Захожу иногда
  • Сообщений: 64
  • Спасибо получено: 19
  • Репутация: 5
тут уже не актуальная инфа :)
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]

Это сообщение содержит прикрепленные изображения.
Пожалуйста, войдите или зарегистрируйтесь, чтобы увидеть их.

не знаю php, jquery, css - все что я на них делаю лишь эксперименты и не стоит их воспринимать серьезно :)
Последнее редактирование: 5 года 10 мес. назад от Stebgo.
Администратор запретил публиковать записи гостям.

Re: jQuery UI Slider — ползунок диапазон цен 5 года 10 мес. назад #689

  • Stebgo
  • Stebgo аватар
  • Не в сети
  • Захожу иногда
  • Сообщений: 64
  • Спасибо получено: 19
  • Репутация: 5
делаем ползунок так

1)
подключаем библиотеки, где нибудь между
<head>
</head>
вашего шаблона
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/sss/jquery.ui-slider.js"></script>

jquery.ui-slider.js

Это вложение скрыто для гостей.
Пожалуйста, зарегистрируйтесь или войдите, чтобы увидеть его.



2)

пихаем, куда вам будет удобно, CSS стили для вашего ползуна
/* Ширина слайдера */
#slider {
	width: 200px;
}
/* Контейнер слайдера */
.ui-slider {
	position: relative;
}
/* Ползунок */
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 13px;   /* Задаем нужную ширину */
	height: 13px;  /* и высоту */
	background: url(../img/slider.png) no-repeat; /* картинка изображающая ползунок. Или можно залить цветом, задать бордюр и скругления */
	cursor: pointer
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	overflow: hidden;
}
/* горизонтальный слайдер (сама полоса по которой бегает ползунок) */
.ui-slider-horizontal {
	 height: 3px; /* задаем высоту согласно дизайна */
}
/* позиционируем ползунки */
.ui-slider-horizontal .ui-slider-handle { 
	top: -5px;
	margin-left: -6px;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min { 
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}
/* оформление полосы по которой ходит ползунок */
.ui-widget-content { 
	border: 1px solid #D4D4D4;
	background: #fff;
}
/* оформление активного участка (между двумя ползунками) */
.ui-widget-header { 
	border: 1px solid #D4D4D4;
	background: #f00;
}
/* скругление для полосы слайдера */
.ui-corner-all {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

3)

создаем поле Free Text и в нем пишем следующее, либо пишем в шаблон
<div id="slider"></div>
это то место где будет выводиться ползунок

далее если вы делаете через Free Text, при редактировании поля внизу есть такая маленькая стрелочка, там можно вставить яваскрипт
jQuery(document).ready(function(){
 
 
/* слайдер цен */
var value1=jQuery("input#cena2").val();
var value2=jQuery("input#cena_do").val();
 
jQuery("#slider").slider({
	min: 0,
	max: 1000,
	values: [value1,value2],
	range: true,
	stop: function(event, ui) {
		jQuery("input#cena2").val(jQuery("#slider").slider("values",0));
		jQuery("input#cena_do").val(jQuery("#slider").slider("values",1));
    },
 
    slide: function(event, ui){
		jQuery("input#cena2").val(jQuery("#slider").slider("values",0));
		jQuery("input#cena_do").val(jQuery("#slider").slider("values",1));
    }
});
 
 
jQuery("input#cena2").change(function(){
 
	var value1=jQuery("input#cena2").val();
	var value2=jQuery("input#cena_do").val();
 
    if(parseInt(value1) > parseInt(value2)){
		value1 = value2;
		jQuery("input#cena2").val(value1);
	}
	jQuery("#slider").slider("values",0,value1);	
});
 
 
jQuery("input#cena_do").change(function(){
 
	var value1=jQuery("input#cena2").val();
	var value2=jQuery("input#cena_do").val();
 
	if (value2 > 1000) { value2 = 1000; jQuery("input#cena_do").val(1000)}
 
	if(parseInt(value1) > parseInt(value2)){
		value2 = value1;
		jQuery("input#cena_do").val(value2);
	}
	jQuery("#slider").slider("values",1,value2);
});
 
 
// фильтрация ввода в поля
	jQuery('input').keypress(function(event){
		var key, keyChar;
		if(!event) var event = window.event;
 
		if (event.keyCode) key = event.keyCode;
		else if(event.which) key = event.which;
 
		if(key==null || key==0 || key==8 || key==13 || key==9 || key==46 || key==37 || key==39 ) return true;
		keyChar=String.fromCharCode(key);
 
		if(!/\d/.test(keyChar))	return false;
 
	});
 
 
});
 

в этом коде меняем cena2 и cena_do на Name ваших полей.
ЗЫ если вы делаете ползунок через шаблон то этот скрипт можно подключить где и первые два


ЗЫ ЗЫ

Возможные проблемы и их решение

ползунок сворачивается по вертикали (конфликт jquery и мутулсом )
1) Цитирую
"У меня тоже проявилась такая проблема. Выяснилось что дело в конфликте между мутулсом и джейквери, лечится это дело так:

jQuery("#slider")[0].slide = null;

У джейквери это висит в багрепортах, вроде как к концу года они это поправят.
http://bugs.jqueryui.com/ticket/4168 "

2) Цитирую
"Обнаружил баг с ползунком цены, при одновременном использовании библиотек "jQuery UI Slider" и "Mootools".

Симптом: при попытке переместить ползунок - прогрессбар сворачивается по вертикали.

Лечение: Открываем файл плагина "jquery.ui-slider.js" и заменяем в нем "slide" на "superslide" (ищите полное соответствие, к примеру заменять "slider" уже нельзя). Должно быть 2 соответствия."


Вроде бы все

НА основе материала http://www.xiper.net/collect/js-plugins/ui/jquery-ui-slider.html
усложненный ползунок http://www.xiper.net/collect/js-plugins/ui/jquery-ui-slider-add.html

Это сообщение содержит прикрепленные файлы.
Пожалуйста, войдите или зарегистрируйтесь, чтобы увидеть их.

не знаю php, jquery, css - все что я на них делаю лишь эксперименты и не стоит их воспринимать серьезно :)
Последнее редактирование: 5 года 10 мес. назад от Stebgo.
Администратор запретил публиковать записи гостям.
Спасибо сказали: admin, viocassel, slonnik, samliman, ss777, SKA240486

Re: jQuery UI Slider — ползунок диапазон цен 5 года 10 мес. назад #692

  • admin
  • admin аватар
  • Не в сети
  • Администратор
  • Сообщений: 668
  • Спасибо получено: 194
  • Репутация: 66
Stebgo, большое спасибо за столь полезную информацию и развернутую инструкцию!
С уважением,
Юрий Посохов
www.seblod.pro
Реквизиты для поддержки проекта seblod.pro:
WMR: R244179985703, WMZ: Z130736735723, WME: E359359968529
PayPal: moscowfly(cобаCHка)gmail.сом
Яндекс.Деньги: 410011637395363

Для ваших проектов рекомендую хостинг от Beget! Стабильная работа сайтов Joomla, отличная поддержка. БЕСПЛАТНЫЙ тестовый месяц без ограничений! Регистрируясь по реферальной ссылке Вы также поддерживаете наш проект! http://beget.ru?id=21871
Администратор запретил публиковать записи гостям.

Re: jQuery UI Slider — ползунок диапазон цен 5 года 9 мес. назад #942

  • samliman
  • samliman аватар
  • Не в сети
  • Новый участник
  • Сообщений: 8
  • Репутация: 0
Сделал всё как в инструкции, в результате слайдер вообще не показывается - просто пустое место( Понимаю, что сложно что-то сказать удалённо, но может есть идеи отчего может он не отображаться?
Администратор запретил публиковать записи гостям.

Re: jQuery UI Slider — ползунок диапазон цен 5 года 9 мес. назад #943

  • Stebgo
  • Stebgo аватар
  • Не в сети
  • Захожу иногда
  • Сообщений: 64
  • Спасибо получено: 19
  • Репутация: 5
возможно где то забыли изменить название поля на свое, так же у меня почему то только для зарегистрированных показывается, посмотри так же на сайте по примеру которого я делал.
не знаю php, jquery, css - все что я на них делаю лишь эксперименты и не стоит их воспринимать серьезно :)
Администратор запретил публиковать записи гостям.
Спасибо сказали: samliman

Re: jQuery UI Slider — ползунок диапазон цен 5 года 9 мес. назад #945

  • samliman
  • samliman аватар
  • Не в сети
  • Новый участник
  • Сообщений: 8
  • Репутация: 0
Спасибо за ответ. Названия полей в скрипте я поменял с помощью замены в текстовом редакторе, так что пропустить едва ли смог бы. Если вас не затруднит, посмотрите пожалуйста алгоритм, которому я следовал при реализации:

1. в head шаблона подключил библиотеки, с путями разобрался - всё работает.

2. там же подключил css из отдельного файла. Плюс изменил в css путь до картинки, которой, кстати, нет в статье.

3. Добавил в форму поле с <div id="slider"></div>, в этом же поле под стрелочкой ввёл скрипт с изменёнными полями.

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

Re: jQuery UI Slider — ползунок диапазон цен 5 года 9 мес. назад #952

  • Stebgo
  • Stebgo аватар
  • Не в сети
  • Захожу иногда
  • Сообщений: 64
  • Спасибо получено: 19
  • Репутация: 5
могу посмотреть, если на хостинге
если на локалке через TeamViewer
не знаю php, jquery, css - все что я на них делаю лишь эксперименты и не стоит их воспринимать серьезно :)
Администратор запретил публиковать записи гостям.

Re: jQuery UI Slider — ползунок диапазон цен 5 года 9 мес. назад #953

  • admin
  • admin аватар
  • Не в сети
  • Администратор
  • Сообщений: 668
  • Спасибо получено: 194
  • Репутация: 66
Привет. Samliman, проблема может быть в том, что noconflict уже подгружается в другом скрипте.
У меня например $j используется как псевдоним jQuery, а по коду Stebgo - "jQuery". Я просто удалил в начале скрипта "jQuery(document).ready(function()" и в конце кода "})", и заменил по коду везде "jQuery" на $j.
И jquery.min.js уже грузит Seblod, поэтому дополнительно подключать его нет необходимости.
В дополнение скажу, что в коде можно использовать дополнительные опции, такие как например step - задает минимальный шаг ползунка.. С доп. опциями можно ознакомиться здесь http://jqueryui.com/demos/slider/
С уважением,
Юрий Посохов
www.seblod.pro
Реквизиты для поддержки проекта seblod.pro:
WMR: R244179985703, WMZ: Z130736735723, WME: E359359968529
PayPal: moscowfly(cобаCHка)gmail.сом
Яндекс.Деньги: 410011637395363

Для ваших проектов рекомендую хостинг от Beget! Стабильная работа сайтов Joomla, отличная поддержка. БЕСПЛАТНЫЙ тестовый месяц без ограничений! Регистрируясь по реферальной ссылке Вы также поддерживаете наш проект! http://beget.ru?id=21871
Администратор запретил публиковать записи гостям.

Re: jQuery UI Slider — ползунок диапазон цен 5 года 9 мес. назад #954

  • samliman
  • samliman аватар
  • Не в сети
  • Новый участник
  • Сообщений: 8
  • Репутация: 0
Stebgo пишет:
могу посмотреть, если на хостинге
если на локалке через TeamViewer

Ой, вы что. Был бы бесконечно благодарен. Я пока на локальном сервачке играюсь и модем, к сожалению порт форвардинг игнорирует. По-этому только тимвьювер. Напишите пожалуйста ваш скайп или аську в личку и когда с вами лучше связаться. Заранее благодарен.

admin, спасибо, буду осмысливать)
Последнее редактирование: 5 года 9 мес. назад от samliman.
Администратор запретил публиковать записи гостям.

Re: jQuery UI Slider — ползунок диапазон цен 5 года 9 мес. назад #958

  • samliman
  • samliman аватар
  • Не в сети
  • Новый участник
  • Сообщений: 8
  • Репутация: 0
Блин, оказывается в себлоде даже сортировку нельзя предложить юзерам. Только если список через джаву выводить. Грусть-печаль. Что-то я склоняюсь к мысли, что не подойдёт он мне(
Администратор запретил публиковать записи гостям.

Re: jQuery UI Slider — ползунок диапазон цен 5 года 9 мес. назад #960

  • admin
  • admin аватар
  • Не в сети
  • Администратор
  • Сообщений: 668
  • Спасибо получено: 194
  • Репутация: 66
Быстро сдаетесь) Более функционального приложения вряд ли найдете. В других компонентах может быть сортировка есть и по дефолту, но зато много чего нет того, что есть у Seblod.
Скриптик навесить на таблицу вполне можно
С уважением,
Юрий Посохов
www.seblod.pro
Реквизиты для поддержки проекта seblod.pro:
WMR: R244179985703, WMZ: Z130736735723, WME: E359359968529
PayPal: moscowfly(cобаCHка)gmail.сом
Яндекс.Деньги: 410011637395363

Для ваших проектов рекомендую хостинг от Beget! Стабильная работа сайтов Joomla, отличная поддержка. БЕСПЛАТНЫЙ тестовый месяц без ограничений! Регистрируясь по реферальной ссылке Вы также поддерживаете наш проект! http://beget.ru?id=21871
Администратор запретил публиковать записи гостям.

Re: jQuery UI Slider — ползунок диапазон цен 5 года 9 мес. назад #962

  • samliman
  • samliman аватар
  • Не в сети
  • Новый участник
  • Сообщений: 8
  • Репутация: 0
Спасибо за ответ. Да просто вижу, что потрачу кучу времени на себлод, а потом окажется, что выше головы не прыгнешь( Решил начать осваивать друпал - времени потрачу больше, но не придётся перределывать на корню когда разростётся функционал.
Администратор запретил публиковать записи гостям.

Re: jQuery UI Slider — ползунок диапазон цен 5 года 9 мес. назад #966

  • viocassel
  • viocassel аватар
  • Не в сети
  • Модератор
  • Web Designer / Developer
  • Сообщений: 337
  • Спасибо получено: 122
  • Репутация: 25
Привет Samliman. К сожалению (а может и к лучшему), будешь ты делать свои проекты на Drupal или на Seblod... везде надо много писать "ручками". Накликать мышкой проект с хорошим функционалом не получится.
Seblod, как и любой другой проект, развивается и относительно "молодой" продукт. У него все еще впереди. Правильно сказал Admin: "Быстро сдаетесь)".

P.S. Drupal знать тоже полезно и нужно.
Joomla! + SEBLOD + UIKit
Рекомендую хостинг IHC
Последнее редактирование: 5 года 9 мес. назад от viocassel.
Администратор запретил публиковать записи гостям.

Re: jQuery UI Slider — ползунок диапазон цен 5 года 9 мес. назад #967

  • samliman
  • samliman аватар
  • Не в сети
  • Новый участник
  • Сообщений: 8
  • Репутация: 0
Да я не то, чтобы сдаюсь. Просто вижу, что это какая-то утопия. Сделал макет каталога своего на себлоде - то одно не работает, то другое, на официальном форуме сутками можно ждать ответ. Сейчас вот поставил Друпал - совсем другое пальто, хоть и с тысячей карманов) Ну да ладно, не буду оффтоп разводить. Спасибо всем, кто откликнулся и спасибо админу за дружелюбный и отзывчивый форум. До встречи!
Администратор запретил публиковать записи гостям.

Re: jQuery UI Slider — ползунок диапазон цен 5 года 4 мес. назад #2306

  • Shvapsss
  • Shvapsss аватар
  • Не в сети
  • Живу я здесь
  • Сообщений: 681
  • Спасибо получено: 97
  • Репутация: 20
samliman пишет:
Да я не то, чтобы сдаюсь. Просто вижу, что это какая-то утопия. Сделал макет каталога своего на себлоде - то одно не работает, то другое, на официальном форуме сутками можно ждать ответ. Сейчас вот поставил Друпал - совсем другое пальто, хоть и с тысячей карманов) Ну да ладно, не буду оффтоп разводить. Спасибо всем, кто откликнулся и спасибо админу за дружелюбный и отзывчивый форум. До встречи!

Слабак :evil: :woohoo: :cheer:
Администратор запретил публиковать записи гостям.

jQuery UI Slider — ползунок диапазон цен 4 года 6 мес. назад #5293

  • Azazel
  • Azazel аватар
  • Не в сети
  • Захожу иногда
  • Сообщений: 78
  • Спасибо получено: 1
  • Репутация: 0
Попробовал сделать эту штуку, результата нет, тупо пустое место :(
Администратор запретил публиковать записи гостям.

jQuery UI Slider — ползунок диапазон цен 4 года 6 мес. назад #5294

  • Shvapsss
  • Shvapsss аватар
  • Не в сети
  • Живу я здесь
  • Сообщений: 681
  • Спасибо получено: 97
  • Репутация: 20
Жалко
Администратор запретил публиковать записи гостям.

jQuery UI Slider — ползунок диапазон цен 4 года 6 мес. назад #5295

  • Azazel
  • Azazel аватар
  • Не в сети
  • Захожу иногда
  • Сообщений: 78
  • Спасибо получено: 1
  • Репутация: 0
Хотя я подключил этот скрипт и у меня упала галерея, может поэтому он тоже не работает из-за конфликта?
Администратор запретил публиковать записи гостям.

jQuery UI Slider — ползунок диапазон цен 4 года 6 мес. назад #5296

  • Shvapsss
  • Shvapsss аватар
  • Не в сети
  • Живу я здесь
  • Сообщений: 681
  • Спасибо получено: 97
  • Репутация: 20
Напиши где то в скрипте alert("111") как то так.
Если оно отработает, значит скрипт работает, если ничего не выведет, значит у тебя джеквери не подключен или не работает или конфликтует, вообщем.

надо дебажить.
Администратор запретил публиковать записи гостям.
  • Страница:
  • 1
  • 2
  • 3

roundtheme