JQuery UI экземпляр - Кнопка (Button)
При надлежащем использовании висения (зависания) и активации (активные) стили могут быть кнопки тематические для повышения стандартные элементы формы (например, кнопки, поля ввода, якоря) функции.
Для получения более подробной информации о компонентах кнопки см API документации элемент кнопки (кнопка виджете) .
По умолчанию функция
Примерами маркеров могут быть использованы для кнопок: кнопочный элемент, тип входных элементов и представить якорь.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> Кнопка JQuery UI (кнопка) - функция по умолчанию </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "Input [тип = представить], а, кнопка")
.button ()
.click (функция (событие) {
event.preventDefault ();
});
});
</ Script>
</ Head>
<Body>
<Button> элемент кнопки </ кнопка>
<INPUT TYPE = "Отправить" значение = "Отправить Button">
<a href="#"> якорь </a>
</ Body>
</ HTML>
флажок
С помощью контрольной кнопки коробки кнопка переключения стиль. Элементы маркировки, связанные с коробкой как текст кнопки.
В этом случае, позвонив на публичный контейнер .buttonset() , как показано три дисплея стилей кнопки окно.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> Кнопка JQuery UI (кнопка) - флажок </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Проверяем") .button ();
$ ( "#format") .buttonset ();
});
</ Script>
<Style>
#format {маржа-топ: 2em;}
</ Style>
</ Head>
<Body>
<Тип входного = "флажок" ID = "чек"> <метка для = "чек"> переключатель </ метка>
<Div ID = "Формат">
<Тип входного = "флажок" ID = "check1"> <метка для = "check1"> В </ метка>
<Тип входного = "флажок" ID = "Check2"> <метка для = "Check2"> I </ метка>
<Тип входного = "флажок" ID = "check3"> <метка для = "check3"> U </ метка>
</ Div>
</ Body>
</ HTML>
иконка
Некоторые с различными комбинациями текста и пиктограмм кнопок
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> Кнопка JQuery UI (кнопка) - значок </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "Button: первая") .button ({
иконки: {
первичная обмотка: "UI-значок выхода к морю"
},
Текст: ложная
}). Далее (). Кнопка ({
иконки: {
первичная обмотка: "UI-значок выхода к морю"
}
}). Далее (). Кнопка ({
иконки: {
первичная обмотка: "Пользовательский интерфейс-значок-шестерня",
вторичная: "Пользовательский интерфейс-значок-треугольник-1-х"
}
}). Далее (). Кнопка ({
иконки: {
первичная обмотка: "Пользовательский интерфейс-значок-шестерня",
вторичная: "Пользовательский интерфейс-значок-треугольник-1-х"
},
Текст: ложная
});
});
</ Script>
</ Head>
<Body>
<Кнопка> значок кнопки только кнопки </>
<Кнопка> значок кнопки на левой </ кнопка>
<Button> кнопка с двумя значками </ кнопка>
<Button> с двумя кнопками с текстом значком без кнопки </>
</ Body>
</ HTML>
радио
Три кнопки радио в кнопку.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> Кнопка JQuery UI (кнопка) - Радио </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#radio") .buttonset ();
});
</ Script>
</ Head>
<Body>
<Форма>
<Div ID = "радио">
<Тип входного = ID = имя "радио" "радио1" = "радио"> <метка для = "Radio1"> Выберите 1 </ метка>
<Тип входного = "радио" ID = "Radio2" имя = "радио" проверено = "проверено"> <метка для = "Radio2"> выберите 2 </ метка>
<Тип входного = ID = имя "радио" "radio3" = "радио"> <метка для = "radio3"> Выберите 3 </ метка>
</ Div>
</ Форма>
</ Body>
</ HTML>
кнопка Split
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> Кнопка JQuery UI (кнопка) - Split Кнопка </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui меню {позицию: абсолютная; ширина: 100px;}
</ Style>
<Script>
$ (Function () {
$ ( "#rerun")
.button ()
.click (функция () {
предупреждение ( "Запуск последнего действия");
})
.next ()
.button ({
Текст: ложь,
иконки: {
первичная обмотка: "Пользовательский интерфейс-значок-треугольник-1-х"
}
})
.click (функция () {
Меню переменная = $ (это) .parent (). Следующий (). шоу (). Положение ({
мой: "левый верх",
в: "левом нижнем углу экрана",
из: это
});
$ (Документ) .one ( "щелчок", функция () {
menu.hide ();
});
возвращение ложным;
})
.parent ()
.buttonset ()
.next ()
.hide ()
.menu ();
});
</ Script>
</ Head>
<Body>
<Div>
<Div>
<Кнопка ID = "перекладка"> Выполнить последнее действие кнопку </>
Кнопка <ID = "выберите"> выберите действие </ Кнопка>
</ Div>
<Ul>
<Li> <a href="#"> открыт ... </a> </ li>
<Li> <a href="#"> сохранить </a> </ li>
<Li> <a href="#"> удалить </a> </ li>
</ UL>
</ Div>
</ Body>
</ HTML>
Панель инструментов
Панель инструментов мультимедийный проигрыватель. Посмотрите на основе маркеров: Некоторые кнопки элемент, кнопка воспроизведения в случайном порядке является флажок для типа входа, параметры повтора три типа ввода радио.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> Кнопка JQuery UI (кнопка) - Панель инструментов </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
#toolbar {
обивка: 4px;
Дисплей: встроенный блок;
}
/ * Поддержка: IE7 * /
* + Html #toolbar {
Дисплей: встроенный;
}
</ Style>
<Script>
$ (Function () {
$ ( "#beginning") .button ({
Текст: ложь,
иконки: {
первичная обмотка: "Пользовательский интерфейс-значок-искать начало"
}
});
$ ( "#rewind") .button ({
Текст: ложь,
иконки: {
первичная обмотка: "Пользовательский интерфейс-значок-искать пред"
}
});
$ ( "#play") .button ({
Текст: ложь,
иконки: {
первичная обмотка: "UI-значок-игра"
}
})
.click (функция () {
Параметры VAR;
если ($ (это) .text () === "играть") {
Варианты = {
метка: "пауза",
иконки: {
первичная обмотка: "UI-значок-пауза"
}
};
} Else {
Варианты = {
метка: "играть",
иконки: {
первичная обмотка: "UI-значок-игра"
}
};
}
$ (Это) .button ( "вариант", опционы);
});
$ ( "#STOP") .button ({
Текст: ложь,
иконки: {
первичная обмотка: "Пользовательский интерфейс-значок-стоп"
}
})
.click (функция () {
$ ( "#play") .button ( "Option", {
метка: "играть",
иконки: {
первичная обмотка: "UI-значок-игра"
}
});
});
$ ( "#forward") .button ({
Текст: ложь,
иконки: {
первичная обмотка: "Пользовательский интерфейс-значок-искать дальше"
}
});
$ ( "#end") .button ({
Текст: ложь,
иконки: {
первичная обмотка: "Пользовательский интерфейс-значок-искать конец"
}
});
$ ( "#shuffle") .button ();
$ ( "#repeat") .buttonset ();
});
</ Script>
</ Head>
<Body>
<Div ID = "Панель инструментов" класс = "UI-виджета-заголовка пользовательский интерфейс угла всех">
Кнопка <ID = "начало"> начала </ кнопка>
Кнопка <ID = "перемотка"> перемотка назад </ кнопка>
Кнопка <ID = "играть"> Play </ кнопка>
<Кнопка ID = "стоп"> Стоп </ Кнопка>
<Кнопка ID = "вперед"> Быстрая перемотка вперед </ кнопка>
<Button ID = "конец"> конец кнопки </>
<Тип входного = "флажок" ID = "перетасовать"> <метка для = "перетасовки"> В случайном порядке </ метка>
<SPAN ID = "повторить">
нет <тип входного = "радио" ID = "repeat0" имя = "повторить" проверено = "проверено"> <метка для = "repeat0"> Без повтора </ метка>
<Тип входного = ID = имя "радио" "REPEAT1" = "повторить"> <метка для = "Repeat1"> После </ метка>
<Тип входного = ID = имя "радио" "repeatall" = "повторить"> <метка для = "repeatall"> Все </ метка>
</ Span>
</ Div>
</ Body>
</ HTML>