19.6 C
Москва
01.09.2026

79

Как создать кнопку в php

Создание асинхронной кнопки

Не мне рассказывать вам про преимущества использования асинхронного метода в таких случаях.

Дело в том, что AJAX очень удобен, когда следует совершить какое-либо действие на сайте — оставить комментарий, поставить «Like» к статье, либо даже подгрузить более старые комменты.

Но делать сайт полностью 100% на AJAX… по-моему не стоит даже и думать об этом и я не имею ввиду индексируемость у поисковиков, где-то в документации google даже есть отличная статья как сделать свой AJAX-сайт нормально индексируемым. Всё дело в удобстве.

Итак, с этого поста начинается цикл статей про AJAX, только скорее всего это будет AJAX через jQuery, а не через XMLHttpRequest или что-нибудь ещё.

Короче это было что-то вроде вступления))

Начну пожалуй с примера кнопки:

form style="color: #c1ef65;">"follow-form" method="POST" action="follow.php"> input type="hidden" name="user_ID" value="31" /> button type="submit" value="Actions" style="color: #c1ef65;">"async_button follow"> i>i>span>подписатьсяspan> button> form>

Как видите, это самая обычная POST-форма, уверен, что вы знаете, как работать с такими формами через PHP.

При помощи скрытых полей и будут передаваться все необходимые параметры.

Теперь CSS, это кстати те же самые стили, которые я использовал в примере выше, конечно же вы можете оформить кнопку и по-своему.

button.async_button { background-attachment:scroll; cursor:pointer; background:#ddd url(https://misha.agency/demo/async-ajax-jquery-button/background.gif) 0 0 repeat-x; color:#333; padding:4px 8px 5px 8px; border:1px solid #ddd; font-family:"Lucida Grande",sans-serif; font-size:11px; line-height:14px; text-shadow:1px 1px 0 #fff; -webkit-border-radius:4px; -moz-border-radius:4px; vertical-align:top; border-bottom:1px solid #ccc; } button.async_button span { color:#333; } button.async_button:hover { color:#000; border:1px solid #999; background-position:0 -6px; background-color:#d5d5d5; border-bottom-color:#888; } button.async_button:active { text-shadow:none !important; background-image:none !important; } button.async_button i { display:inline-block; margin:0 5px -1px 0; height:13px; width:15px; background:url(https://misha.agency/demo/async-ajax-jquery-button/icons.png) -176px -32px no-repeat; } button.async_button i.active { background:url(https://misha.agency/demo/async-ajax-jquery-button/loading.gif); } /* эти свойства присваиваются элементу после выполнения php-скрипта */ span.ok { color:#777; font-size:12px; padding:5px 10px; } span.ok span { display:inline-block; margin-right:5px; height:9px; width:10px; background:url(https://misha.agency/demo/async-ajax-jquery-button/icons.png) no-repeat -160px -16px; }

и jQuery: (только не забудьте перед этим подключить саму библиотеку)

jQuery(function ($) { /* получаем элементы и отключаем событие формы по умолчанию */ $("form.follow-form").submit(function (e) { /* останавливаем событие */ e.preventDefault(); /* "при нажатии кнопки" */ $(this).find('i').addClass('active'); /* посылаем ajax запрос */ $.post('follow.php', { followID: $(this).find('input').val() }, function () { /* находим и скрываем кнопку, создаем новый элемент */ $(e.currentTarget) .find('button').hide() .after('); }); }); });

Обратите внимание на файл follow.php, он должен находиться в той же папке, что и js-файл, в противном случае следует указать абсолютный путь.

Ну вот и всё готово, на самом деле ничего сложного, больше всего кода — это CSS-стили)) Я надеюсь, что вы знаете, что куда вставлять.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Как создать кнопку в php

Написать в поддержку

headphone

Помощь онлайн

search

Проверить домен

key

Войти Валюта:

CSS: создание кнопки

calendar

14 июня

heart

12161

question

Комментариев: 0

О том, как создать кнопку в HTML, мы уже рассказывали. Теперь же рассмотрим, как это сделать при помощи таблицы стилей.

Для создания простой кнопки используйте тег :

height:60px;

border-color:#000080 #6A5ACD #8470FF #0000FF;

border-style:solid;

border-width:5px;

background:#4682B4;

cursor:pointer;

Кнопка в браузере:

Рассмотрим таблицу стилей, в которой прописаны эффекты наведения на кнопку, где :hover отвечает за отображение кнопки при наведении, :active 一 при нажатии, а :focus 一 после нажатия:

border-color:#7CFC00 #7CFC00 #7CFC00 #7CFC00;

border-style:solid;

border-width:5px;

background:#FFFF99;

background:#ddd;

border-color:#ddd #333 #333 #ddd;

border-style:solid;

border-width:5px;

background:#228B22;

border-color:#ddd #333 #333 #ddd;

border-style:solid;

border-width:5px;

Кнопка в браузере:

soc-1

Также рекомендуем почитать:

CSS: стилизация цитат Как подключить CSS к HTML CSS: свойства шрифта CSS: текстовые эффекты CSS: свойства цвета и фона CSS: создание горизонтального меню CSS: работа с блоками

  • Блог
  • Хостинг, домены, мировые новости, обзоры ПО
  • Рейтинги, обзоры, отзывы
  • Наши новости, акции, нововведения
  • Руководства, статьи, инструкции
  • RSS

Популярное в категории

blog-img-1

calendar

Июнь

heart

77780

blog-img-1

calendar

Июнь

heart

68392

blog-img-1

calendar

Октябрь

heart

56094

blog-img-1

calendar

Март

heart

44443

blog-img-1

calendar

Сентябрь

heart

37639

Как создать HTML кнопку, которая действует как ссылка

Есть много способов создания HTML кнопки, которая действует как ссылка, т.е., когда вы нажимаете на эту кнопку, она перенаправляется на указанный URL-адрес.

Вы можете выбрать один из следующих методов добавления ссылки на HTML кнопку.

Добавьте строчный onclick event

Пример

html> html> head> title>Заголовок документа title> head> body> button onclick="window.location.href = 'https://w3docs.com';">Click Here button> body> html>

Этот пример может не работать, если кнопка находится внутри тега .

Пример

html> html> head> title>Заголовок документа title> head> body> form> input type="button" onclick="window.location.href = 'https://www.w3docs.com';" value="w3docs"/> form> body> html>

Ссылки не будут работать, если JavaScript не используется, а поисковая система может проигнорировать такие ссылки.

Используйте атрибут action или formaction внутри элемента .

  1. атрибут action

Пример

html> html> head> title>Заголовок документа title> head> body> form action="https://www.w3docs.com/"> button type="submit">Click me button> form> body> html>

Для того, чтобы открыть ссылку в новой вкладке, добавьте атрибут target=»_blank» .

Пример

html> html> head> title>Заголовок документа title> head> body> form action="https://www.w3docs.com/" method="get" target="_blank"> button type="submit">Click me button> form> body> html>

Так как нет форм и данных, этот пример семантически не будет иметь смысла. Но данная разметка допустима.

  1. б. атрибут HTML5 formaction .

Пример

html> html> head> title>Заголовок документа title> head> body> form> button type="submit" formaction="https://www.w3docs.com">Click me button> form> body> html>

Атрибут formaction используется только для кнопок с type=”submit”. Так как этот атрибут является HTML5-specific, он может слабо поддерживаться в старых браузерах.

Добавьте ссылку в стиле HTML кнопки (используя CSS)

Пример

html> html> head> title>Заголовок документа title> style> .button < background-color: #FF4500; border: none; color: white; padding: 20px 34px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin: 4px 2px; cursor: pointer; > style> head> body> a href="https://www.w3docs.com/" class="button">Click Here a> body> html>

Так как требуется сложное стилевое оформление, этот метод может не работать в некоторых браузерах.

Класс BX.UI.Button

Создает объект типа BX.UI.Button с указанными настройками options .

    options Коллекция опций кнопки. Все настройки являются необязательными.

      text Текст кнопки. 

    var button = new BX.UI.Button(< id: "my-button", text: "Hello, Button!", noCaps: true, round: true, menu: < items: [ < text: "Детальное описание", href: "/path/to/page" >, < text: "Редактировать", disabled: true >, < text: "Перенести", onclick: function(event, item) < alert("Обработка нажатия на пункт"); >>, < delimiter: true >, < text: "Закрыть", onclick: function(event, item) < item.getMenuWindow().close(); >> ], closeByEsc: true, offsetTop: 5, >, props: < id: "xxx" >, className: "ddddd-dddd", onclick: function(btn, event) < console.log("onclick", btn); >, events: < mouseenter: function(button, event) < console.log("mouseenter", button, event, this); >, mouseout: function(button, event) < console.log("mouseout", button, event, this); >>, size: BX.UI.Button.Size.MEDIUM, color: BX.UI.Button.Color.PRIMARY, tag: BX.UI.Button.Tag.BUTTON, icon: BX.UI.Button.Icon.ADD_FOLDER, state: BX.UI.Button.State >);

    Методы GET

    button.getContainer(): Element

    Возвращает ссылку на DOM-элемент кнопки.

    var button = new BX.UI.Button(< text: "Привет, кнопка!" >); var layout = BX.create("div", < props: < className: "container" >, children: [button.getContainer()] >);
    button.getText(): string

    Возвращает текст кнопки.

    button.getProps(): object.

    Возвращает заданные HTML-атрибуты.

    button.getDataSet(): DOMStringMap

    Возвращает Data-атрибуты кнопки.

    button.getTag(): BX.UI.Button.Tag

    Возращает тег кнопки (значение перечисления BX.UI.Button.Tag ).

    button.getSize(): BX.UI.Button.Size

    Возвращает размер кнопки.

    button.getColor(): BX.UI.Button.Color

    Возвращает цвет кнопки.

    button.getState(): BX.UI.Button.State

    Возвращает состояние кнопки.

    button.getIcon(): BX.UI.Button.Icon

    Возвращает иконку кнопки.

    button.getId(): string|null

    Возвращает идентификатор кнопки. Если идентификатор не задан, возвратит null .

    button.getMenuWindow(): BX.PopupMenuWindow|null

    Возвращает объект контекстного меню.

    Методы SET

    button.setText(text): BX.UI.Button

    Устанавливает текст кнопки.

    • text — текст кнопки.
    var button = new BX.UI.Button( < text: "Активировать", size: BX.UI.Button.Size.LARGE, color: BX.UI.Button.Color.SUCCESS, onclick: function(button, event) < if (button.isActive()) < button.setText("Активировать"); button.setActive(false); >else < button.setText("Деактивировать"); button.setActive(); >> >);
    button.setProps(props:object. ): BX.UI.Button
    • props — коллекция HTML-атрибутов кнопки. Если значение атрибута равно null , он будет удален.
    var button = new BX.UI.Button(); button .setText("Моя кнопка") .setProps(< "data-role": "action", "id": null //удалить атрибут >);
    button.setDataSet(dataset:object. ): BX.UI.Button
    • dataset — коллекция Data-атрибутов кнопки. Если значение атрибута равно null , он будет удален.
    var button = new BX.UI.Button(); button .setText("Моя кнопка") .setDataSet(< "role": "action", "id": null //удалить атрибут >);
    button.setClass(className:string): BX.UI.Button

    Устанавливает дополнительный CSS-класс.

    • className — название CSS-класса или нескольких классов, разделенных пробелом.
    button.setSize(size:BX.UI.Button.Size): BX.UI.Button

    Устанавливает или сбрасывает размер кнопки.

    • size — размер кнопки. Задается перечислением BX.UI.Button.Size. Чтобы установить размер по умолчанию, необходимо указать значение null .
    button.setColor(color:BX.UI.Button.Color): BX.UI.Button

    Устанавливает или сбрасывает цвет кнопки.

    • color — цвет кнопки. Задается перечислением BX.UI.Button.Color . Чтобы установить цвет по умолчанию, необходимо указать значение null .
    button.setState(state:BX.UI.Button.State): BX.UI.Button

    Устанавливает или сбрасывает состояние кнопки.

    • state — состояние кнопки. Задается перечислением BX.UI.Button.State . Чтобы установить состояние по умолчанию, необходимо указать значение null .
    button.setIcon(icon:BX.UI.Button.Icon): BX.UI.Button

    Устанавливает или сбрасывает иконку кнопки.

    • icon — иконка кнопки. Задается перечислением BX.UI.Button.Icon . Чтобы убрать иконку, необходимо указать значение null .
    button.setId(id:string): BX.UI.Button
    • id — идентификатор кнопки.
    button.setMenu(options:object|false): BX.UI.Button

    Устанавливает или сбрасывает контекстное меню.

    • options — настройки меню. Список параметров определяется опциями конструктора BX.PopupMenuWindow . Чтобы сбросить контекстное меню, установите options в значение false .
    button.setNoCaps([flag=true]): BX.UI.Button

    Отменяет приведение текста кнопки к верхнему регистру. Чтобы вернуть поведение по умолчанию, установите flag в значение false .

    button.setDropdown([flag=true]): BX.UI.Button

    Показывает иконку в виде стрелочки справа от текста кнопки.

    Чтобы вернуть поведение по умолчанию, установите flag в значение false .

    button.setRound([flag=true]): BX.UI.Button

    Делает кнопку круглой. Чтобы вернуть поведение по умолчанию, установите flag в значение false .

    Методы RENDER

    button.renderTo(container): Element

    Вставляет кнопку в DOM-узел.

    • container — DOM-узел, в который будет вставлена кнопка.

    Методы REMOVE

    button.removeClass(className:string): BX.UI.Button

    Удаляет дополнительный CSS-класс.

    • className — название CSS-класса или нескольких классов, разделенных пробелом.

    Методы BIND, UNBIND

    button.bindEvent(eventName:string, callback:function): BX.UI.Button

    Устанавливает обработчик события.

    • eventName — название события.
    • callback — функция-обработчик события.
    button.unbindEvent(eventName:string): BX.UI.Button

    Удаляет обработчик события.

    • eventName — название события.
    button.bindEvents(events:object. ): BX.UI.Button

    Устанавливает обработчики событий.

    • events — коллекция обработчиков событий.
    button.unbindEvents(events:string[]): BX.UI.Button

    Удаляет обработчики событий.

    • events — массив названий событий.

    Вспомогательные методы

    Удобные вспомогательные методы для работы с состоянием кнопки:

    • button.setActive([flag=true]) — устанавливает или сбрасывает активность кнопки.
    • button.isActive() — возвращает true , если кнопка активна.
    • button.setHovered([flag=true]) — устанавливает состояние наведения мыши.
    • button.isHovered() — возвращает true , если кнопка находится в состоянии наведения мыши (не псевдокласс :hover).
    • button.setDisabled([flag=true]) — блокирует или разблокирует кнопку.
    • button.isDisabled() — возвращает true , если кнопка заблокированна.
    • button.setWaiting([flag=true]) — устанавливает состояние ожидания в виде «спиннера».
    • button.isWaiting() — возвращает true , если кнопка находится в состоянии ожидания в виде «спиннера».
    • button.setClocking([flag=true]) — устанавливает состояние ожидания в виде «часиков».
    • button.isClocking() — возвращает true , если кнопка находится в состоянии ожидания в виде «часиков».

    Новинки документации в соцсетях:

    Пользовательские комментарии

    Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

    Для этого нужно всего лишь авторизоваться на сайте

    Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

    Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

    Читать:
    Как проверить четность float числа python

Похожие записи

Как составить договор в ворде

admin

Как сделать скриншот на самсунге s8

admin

Что такое транспортный контейнер для налоговой для ип

admin