Виджет вращающегося списка в JavaScript

Чтобы выбрать элемент в коротком списке, кнопка лучше раскрывающегося меню. Этот виджет на самом деле сочетает кнопку и раскрывающееся меню.

Я даю имя вращающегося списка объекту <select>, объединенному с кнопкой, чтобы изменить выбранный элемент списка, без необходимости отображения списка. Мне нужно придумать новое имя, потому что я до сих пор не нашел ничего подобного в Сети.

Из выпадающего списка в список вращения

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

И кстати добавить кнопку ничего не стоит. Обратите внимание, что идеалом все равно было бы использование флажков, но это занимает больше места, а в пользовательском интерфейсе приложения предпочитают компактные страницы.

Принцип работы

Для преобразования выпадающего списка в вращающийся достаточно функции JavaScript с четырьмя строками.

Будет добавлена кнопка рядом с тегом <select> списка. Он используется для запуска функции next. 

<input type="button" name="Submit" value="Suivant" onClick="next()">

Определяется код JavaScript функции next.

function next()
{
    var element = document.form1.select1;
    var x = element.selectedIndex + 1;
    if(x >= element.options.length) x = 0;
    element.selectedIndex = x;
}

Функция увеличивает переменную selectedIndex из списка, соответствующий элемент отображается в поле отображения выпадающего списка. Это также содержимое этого элемента, которое будет отправлено вместе с данными формы.

Показ

Демонстрация объекта списка в одной строке, где отображаемый и, следовательно, выбранный элемент выбран кнопкой.
Формально это означает изменение указателя на изначально выбранном объекте кодом JavaScript.

Форма

Для демонстрации вместо отправки формы используется функция JavaScript, отображающая то, что будет отправлено.

Интерфейс вращающегося списка и приложения

Чтобы показать, как объект может действовать в рамках графического пользовательского интерфейса веб-приложения, вот сценарий, отображающий изображения на фоне панели.

Определяется простая функция, которая изменяет изображение. В качестве параметра функции указан URL-адрес этого изображения .

function update(lang)
{
    var panel = document.getElementById("langages");
    panel.style.backgroundImage = 'url(' + lang + ')';
}

При нажатии на кнопку вращающегося списка индекс увеличивается и извлекается значение объекта, выбранного для передачи функции пользовательского интерфейса:

var element = document.form1.select1;
var x = element.selectedIndex + 1;
if(x >= element.options.length) x = 0;
element.selectedIndex = x;

update(element.options[x].value);

Сценарий дополняется классическим режимом работы, при выборе элемента из выпадающего списка передаётся значение выбранного элемента в качестве параметра функции:

var element = document.form1.select1;
var x = element.selectedIndex ;

update(element.options[x].value);

Демонстрация с изображениями

Вот демонстрация «вращающегося списка» объекта, где выбор элемента списка выполняет действие на странице. Она покажет, как список действует в контексте интерфейса приложения.

Графический интерфейс пользователя

Каждый элемент <option> объекта <select> содержит URL-адрес изображения в значении и тексте с именем изображения.

HTML-код

<fieldset class="rotatinglist">
<legend>Interface utilisateur graphique </legend>
<form  method="post" action="">
  <select name="selectImage" id="selectImage"  onchange="change()">
    <option value="/images/language-c.png">Langage C</option>
    <option value="/images/language-cpp.png">C++</option>
    <option value="/images/language-php.png">PHP</option>
    <option value="/images/language-html.png">HTML</option>
  </select>
  <input type="button" name="Submit" value="Suivant" onClick="next()">
</form>
<img id="lang" src="/images/language-c.png" />
</fieldset>

Код JavaScript

function update(lang)
{
  var x = document.getElementById("lang");
  x.src = lang;
}
function next()
{
  var element = document.getElementById("selectImage");
  var x = element.selectedIndex + 1;
  if(x >= element.options.length) x = 0;
  element.selectedIndex = x;
  update(element.options[x].value);	
}
function change()
{
  var element = document.getElementById("selectImage");
  var x = element.selectedIndex ;
  update(element.options[x].value);
}

Код CSS

.rotatinglist
{
  width:260px;
  height:160px;
  min-height:160px;
  -moz-border-radius:8px;
  border-radius:8px;
  border: 2px solid #339900 !important;
  padding-left:8px;
  -padding:0 !important;
}
.rotatinglist img
{
  margin:8px;
  width:64px;
  height:64px;
}