Вперед Назад

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

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

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

Работа с кнопкой Apple

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

Включайте AppleButton класс в Вашем файле HTML
Обеспечьте a <div> в Вашем HTML для представления кнопки
Объявите onload обработчик, функция JavaScript, вызванная, когда Ваши загрузки виджета, который создает AppleButton объект
Поместите кнопку с помощью CSS
Создайте свою кнопку с помощью AppleButton класс в JavaScript

Как только кнопка была создана, можно также изменить ее параметры в JavaScript. Рисунок 27 показывает две стандартных версии AppleButton если Dashcode.

Большинство разработчиков интересуется использованием AppleButton класс для AppleGlassButton подкласс. AppleGlassButton кнопка стандартного стиля, обычно используемая на спинах виджета, и обсуждена в Подклассе Кнопки Стекла Apple.

Кнопка Apple, в HTML

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

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

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

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

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

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

<body onload="setup();">

...

    <div id="myButton"></div>

...

</body>

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

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

Кнопка Apple, в CSS

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

#myButton {

    position: absolute;

    right: 20px;

    bottom: 20px;

Кнопка Apple, в JavaScript

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

AppleButton(

    buttonElement,

    label,

    height,

    leftImage,

    leftImageDown,

    leftImageWidth,

    middleImage,

    middleImageDown,

    rightImage,

    rightImageDown,

    rightImageWidth,

    onclick

);

AppleButton параметры определяются как:

**Таблица 8** `AppleButton` Параметры конструктора
Параметр	Математическое ожидание	Пример
`buttonElement`	Объект DOM; а именно, `<div>` объявленный в HTML содержать кнопку	`document.getElementById("myButton")`
`label`	Строка; метка, которая будет показана на кнопке	`"Click Me"`
`height`	Число; высота всех изображений используется в кнопке	`23`
`leftImage`	Строка; путь к изображению, используемому для левой части кнопки	`"button/buttonLeft.png"`
`leftImageDown`	Строка; путь к изображению, используемому для левой части кнопки, поскольку по этому щелкают	`"button/buttonLeftDown.png"`
`leftImageWidth`	Число; ширина изображений для левой части кнопки	`11`
`middleImage`	Строка; путь к изображению, используемому для средней части кнопки	`"button/buttonMiddle.png"`
`middleImageDown`	Строка; путь к изображению, используемому для средней части кнопки, поскольку по этому щелкают	`"button/buttonMiddleDown.png"`
`rightImage`	Строка; путь к изображению, используемому для правильной части кнопки	`"button/buttonRight.png"`
`rightImageDown`	Строка; путь к изображению, используемому для правильной части кнопки, поскольку по этому щелкают	`"button/buttonRightDown.png"`
`rightImageWidth`	Число; ширина изображений для левой части кнопки	`11`
`onclick`	Имя функции; функция, которую вызовут, когда нажата кнопка	`buttonClicked`

AppleButton конструктор используется в onload обработчик, который Вы указали в своем HTML, который расположен в Вашем JavaScript и мог быть похожим:

var gMyButton;

function setup()

    gMyButton = new AppleButton(

        document.getElementById("myButton"),

        "Click Me",

23,

        "button/buttonLeft.png",

        "button/buttonLeftDown.png",

11,

        "button/buttonMiddle.png",

        "button/buttonMiddleDown.png",

        "button/buttonRight.png",

        "button/buttonRightDown.png",

11,

        buttonClicked);

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

**Таблица 9** `AppleButton` свойства объектов и методы
Опция	Ввести	Объяснение
`gMyButton.onclick`	Свойство	Чтение-запись; обработчик для того, когда нажата кнопка
`gMyButton.setDisabledImages(` `leftImageDisabled,` `middleImageDisabled,` `rightImageDisabled)`	Метод	Устанавливает изображения, используемые для представления кнопки после того, как она будет отключена с помощью `setEnabled(FALSE)`
`gMyButton.enabled`	Свойство	Только для чтения; возвращает булевскую переменную, отражающуюся, активна ли кнопка или нет
`gMyButton.setEnabled(boolean)`	Метод	Наборы, активна ли кнопка; берет в также `TRUE` или `FALSE`
`gMyButton.remove()`	Метод	Удаляет кнопку
`gMyButton.textElement`	Свойство	Чтение-запись; элемент текста метки; позволяет Вам разрабатывать текст метки

Подкласс кнопки стекла Apple

Apple обеспечивает подкласс AppleButton, вызванный AppleGlassButton, упростить использовать стандартные кнопки стеклянного стиля, находимые обычно на спинах виджета. Например, кнопка Done в конце виджета обычно является стеклянной кнопкой, как показано на рисунке 28.

Создать AppleGlassButton, следуйте за направлениями, найденными выше в Кнопке Apple, в HTML и Кнопке Apple, в CSS. Когда это прибывает время для использования AppleGlassButton в JavaScript, однако, использование AppleGlassButton конструктор вместо AppleButton конструктор, как показано ниже:

AppleGlassButton(

    buttonElement,

    label,

    onclick

);

AppleGlassButton конструктор использует предоставленное Apple искусство для рендеринга стандартной кнопки стеклянного стиля для виджета. Его параметры определяются как:

**Таблица 10** `AppleGlassButton` Параметры конструктора
Параметр	Математическое ожидание	Пример
`buttonElement`	Объект DOM; а именно, `<div>` объявленный в HTML содержать кнопку	`document.getElementById("myButton")`
`label`	Строка; метка, которая будет показана на кнопке	`"Click Me"`
`onclick`	Имя функции; функция, которую вызовут, когда нажата кнопка	`buttonClicked`

Как конструктор Кнопки Apple, конструктор Кнопки Стекла Apple используется в onload обработчик в Вашем JavaScript и мог быть похожим:

var gMyGlassButton;

function setup()

    gMyGlassButton = new AppleGlassButton(

        document.getElementById("myButton"),

        "Click Me",

        buttonClicked);

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

**Таблица 11** `AppleGlassButton` свойства объектов и методы
Опция	Ввести	Объяснение
`gMyGlassButton.onclick`	Свойство	Чтение-запись; обработчик для того, когда нажата кнопка
`gMyGlassButton.enabled`	Свойство	Только для чтения; возвращает булевскую переменную, отражающуюся, активна ли кнопка или нет
`gMyGlassButton.setEnabled(boolean)`	Метод	Наборы, активна ли кнопка; берет в также `TRUE` или `FALSE`
`gMyGlassButton.remove()`	Метод	Удаляет кнопку

Вперед Назад