Используя ползунок Apple

Apple обеспечивает класс JavaScript, функционирующий как управление ползунком, полезное для изображения диапазона значений, между которыми может выбрать пользователь. Класс, обеспечивающий это, AppleSlider, один из Классов Apple, включенных в OS X v10.4.3 и позже.

Для больше при использовании всех Классов Apple, включая AppleSlider, считайте Введение в Классы Apple.

Работа с ползунком Apple

Использовать AppleSlider, Вы должны:

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

Существует два типа ползунков, доступных Вам: вертикальный и горизонтальный. Необходимо принять во внимание, какой тип ползунка Вы хотите использовать при разработке и кодировании виджета. Оба - подклассы AppleSlider класс, и используется в JavaScript для построения типа ползунка, который Вы хотите использовать.

Рисунок 26  горизонтальный ползунок, создаваемый из AppleSlider класс

Ползунок Apple, в HTML

Для объявления AppleSlider и использовать его в JavaScript, необходимо включать класс в файл HTML виджета, обеспечить a <div> это представляет Ваш ползунок в структуре Вашего виджета, и имейте onload обработчик это вызывают, когда загружается HTML Вашего виджета; обработчик используется в JavaScript для построения AppleSlider.

Во-первых, необходимо включать AppleSlider класс в Вашем основном файле HTML. Если Вы планируете обратную совместимость с прееOS X v.10.4.3 версии, следуете за направлениями в Назад Совместимом Использовании и включаете этот путь:

<script type='text/javascript' src='AppleClasses/AppleSlider.js' charset='utf-8'/>

Если Вы планируете требование OS X v.10.4.3 или более новый для Вашего виджета, включаете AppleSlider класс в его расположении в /System/Library/WidgetResources/:

<script type='text/javascript' src='/System/Library/WidgetResources/AppleClasses/AppleSlider.js' charset='utf-8'/>

Как только Вы включали AppleSlider класс, также необходимо объявить a <div> элемент для представления ползунка:

<body onload="setup();">
    ...
    <div id="mySlider"></div>
    ...
</body>

Как правило, это влечет за собой использование a <div> элемент где-нибудь в <body> часть Вашего HTML. Единственный атрибут, требуемый этого элемента, id, который используется CSS для расположения ползунка и JavaScript для построения ползунка. id атрибут требуется по class атрибут, потому что элементы с id к атрибутам можно получить доступ через JavaScript.

Также отметьте объявление onload обработчик в <body> тег. Когда HTML Вашего виджета загружается, этот обработчик вызывают. Это используется для построения AppleSlider возразите в своем JavaScript, как обсуждено в Ползунке Apple, в JavaScript.

Ползунок Apple, в CSS

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

#mySlider {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100px;    /* use height for vertical sliders */
}

Особо значимый вот width атрибут, который необходим для горизонтальных ползунков. Если Вы планируете использование вертикального ползунка, укажите a height атрибут вместо этого.

Ползунок Apple, в JavaScript

В Вашем файле HTML Вы включали onload обработчик как атрибут <body> тег. Тот обработчик вызывают, как только Инструментальная панель загрузила файл HTML Вашего виджета и используется для вызова конструктора для AppleSlider подкласс. На основе которого типа ползунка Вы используете, Вы вызываете конструктора для любого AppleVerticalSlider или AppleHorizontalSlider. Конструкторы определяются как:

Таблица 6  AppleSlider Подклассы

Горизонтальный конструктор ползунка

Вертикальный конструктор ползунка

AppleHorizontalSlider(slider, onchanged)

AppleVerticalSlider(slider, onchanged)

Оба конструктора берут в двух параметрах: в Объекте DOM, представляющем, где ползунок должен быть создан, и обработчик, вызванный, когда изменяется значение ползунка. Объект DOM <div> то, что Вы определили в своем HTML и поместили в своем CSS. Для горизонтального ползунка, Вашего onload код обработчика похож:

var gMySlider;
 
function setup()
{
    gMySlider = new AppleHorizontalSlider(
        document.getElementById("mySlider"),
        sliderChanged
    );
}

onchanged обработчик является функцией, которую Вы обеспечиваете. Когда ползунок изменяется и должен взять один параметр, это вызывают. Когда Ваш обработчик вызывают, он передал текущую стоимость ползунка. Значение ползунка всегда является числом с плавающей точкой между 0 и 1.

function sliderChanged(currentValue)
{
    // Do something with the currentValue passed in
}

Отметьте глобальную переменную gMySlider, используемый в setup() функция. Эта переменная содержит ссылку на Ваш AppleSlider объект, позволяющий Вам взаимодействовать с ползунком в любой точке после того, как это было создано. Эти свойства и методы доступны для Вас для взаимодействия с:

Таблица 7  AppleSlider свойства объектов и методы

Опция

Ввести

Объяснение

gMySlider.onchanged

Свойство

Чтение-запись; когда ползунок перемещен, обработчик вызвал

gMySlider.continuous

Свойство

Чтение-запись; булевская переменная, указывающая, вызывают ли onchanged обработчик, в то время как ползунок ползунка перемещается (true) или только когда его перемещение закончено (false); значение по умолчанию true

gMySlider.padding

Свойство

Чтение-запись; целое число, указывающее дополнение, в пикселях, вокруг управления ползунком в границах <div> элемент, содержащий его

gMySlider.value

Свойство

Только для чтения; текущая стоимость ползунка

gMySlider.size

Свойство

Только для чтения; высота или ширина ползунка, в пикселях

gMySlider.trackStartPath

Свойство

Только для чтения; путь к текущему изображению, используемому для левого конца дорожки горизонтального ползунка или верхнего края дорожки вертикального ползунка

gMySlider.trackStartLength

Свойство

Только для чтения; если используется на горизонтальном ползунке, ширине изображения, указанного как trackStartPath ; если вертикальный, высота изображения, указанного как trackStartPath

gMySlider.trackMiddlePath

Свойство

Только для чтения; путь к текущему изображению использовал середину дорожки ползунка

gMySlider.trackEndPath

Свойство

Только для чтения; путь к текущему изображению, используемому для правильного конца дорожки горизонтального ползунка или заднего конца дорожки вертикального ползунка

gMySlider.trackEndLength

Свойство

Только для чтения; если используется на горизонтальном ползунке, ширине изображения, указанного как trackEndPath ; если вертикальный, высота изображения, указанного как trackEndPath

gMySlider.thumbPath

Свойство

Только для чтения; путь к текущему изображению используется для ползунка ползунка

gMySlider.thumbLength

Свойство

Только для чтения; если используется на горизонтальном ползунке, ширине изображения, указанного как thumbPath ; если вертикальный, высота изображения, указанного как thumbPath

gMySlider.remove()

Метод

Удалите ползунок из пользовательского интерфейса виджета и DOM

gMySlider.refresh()

Метод

Перерисовывает компоненты ползунка; используйте при изменении любого аспекта дисплея или состояния ползунка программно

gMySlider.slideTo(position)

Метод

Перемещает ползунок ползунка в position; берет целое число, в пикселях, в диапазоне 0 и высота (если вертикальный) или ширина (если горизонталь) ползунка

gMySlider.setSize(size)

Метод

Устанавливает ширину ползунка (если горизонталь) или высота (если вертикальный) к size, в пикселях; берет целое число

gMySlider.setTrackStart(imagePath, length)

Метод

Устанавливает изображение и ширину, в пикселях, левого конца дорожки горизонтального ползунка, или изображения и ширины, в пикселях, верхнего края дорожки вертикального ползунка

gMySlider.setTrackMiddle(imagePath)

Метод

Изображение наборов используется для средней части дорожки ползунка

gMySlider.setTrackEnd(imagePath, length)

Метод

Устанавливает изображение и ширину, в пикселях, правильного конца дорожки горизонтального ползунка, или изображения и ширины, в пикселях, заднего конца дорожки вертикального ползунка

gMySlider.setThumb(imagePath, length)

Метод

Изображение наборов и ширина, в пикселях, ползунка на горизонтальном ползунке, или изображения и высоты, в пикселях, ползунка на вертикальном ползунке

gMySlider.setValue(value)

Метод

Устанавливает значение ползунка и перемещает его ползунок в value; берет число с плавающей точкой между 0 и 1.