2013-05-28 8 views
0

Меня интересует использование ползунка jQuery для ввода в моей HTML-форме.Разница между слайдером формы jQuery, слайдером скрипта?

В некоторых examples, я вижу, что вызывается в качестве входных данных, как так:

<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" /> 

Однако в других examples, я вижу, что вызывается так:

<head> 
<script> 
$(function() { 
$("#slider").slider(); 
}); 
</script> 
</head> 
<body> 
<div id="slider"></div> 
</body> 
  • Что такое функциональная разница между этими двумя фрагментами? Предоставляет ли одна из них большую настройку, чем другая (например, я могу настроить фон слайдера с помощью первого кода)?
  • Если я хочу использовать второй в форме, мне нужно `` скрытые поля "?

ответ

1

<input type="range"/> - это тип ввода HTML5, поэтому он поддерживается только современными браузерами (список поддерживаемых браузеров см. В разделе this link). В старых браузерах в качестве текстового ввода появится ввод диапазона. Подробнее о типе диапазона можно найти на документах MDN. here

Если вам нужно поддерживать старые браузеры (например, IE 9 или ниже, что вы, вероятно, захотите), вам нужно будет использовать слайдер jQuery UI или другую библиотеку. Эти библиотеки используют javascript для создания слайдера, но это не то же самое, что собственный ползунок HTML range.

Вы можете найти документы для слайдера UI jQuery here.

+0

Вы видели ссылку, которую я снабжал ''? Это в документации jQuery, я не уверен, почему это HTML5? – jaynp

+0

@ user1850672 Позже в этом примере они объясняют, как инициализировать плагин 'slider', вызывая' $ ('input'). Slider(); '. Невозможно инициализировать виджет jQuery UI через разметку, это всегда будет выполняться в javascript. Они использовали 'type =" range "' в примере, вероятно, потому что большинство людей будут использовать jQuery UI для полиполнения, чтобы добавить функции HTML5 для браузеров, которые его не поддерживают. – cfs

+0

@ user1850672 «Структура найдет все входные элементы с типом =« диапазон »и автоматически улучшит их в слайдер с сопроводительным вводом« Плагин поддерживает только тип = «диапазон» и использует стандартные атрибуты этого элемента для постройте плагин. Но это не означает, что наличие «диапазона» ввода на вашей странице автоматически станет виджем jQuery, вам все равно придется явно вызвать плагин. – cfs

0

вам не нужен яваскрипт код. Существует Diferent путь реализации этого.

на первый <input type="range"....................> вам нужно только Jquery livrarias, а затем эту работу

JQuery библиотека (самая старая версия):.

http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css 
http://code.jquery.com/jquery-1.9.0.min.js 
http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js 

слайд Вы также можете настроить. jquery.mobile-1.3.1.min.css есть стиль, и если вы wante изменить, в основном на таблицу стилей выберите:

input[type=range]{background-color:black} 

и так далее ..

надеюсь, что вы должны понять это. На мой взгляд, реализовать тип ввода с помощью библиотеки jquery.

Смежные вопросы