Как сделать графическую кнопку

Динамичная графическая кнопка без скриптов

Методика создания динамичной графической кнопки без использования скриптов

В этой статье я расскажу, как сделать вот такую

Кнопка
динамичную кнопку без использования каких-либо скриптов (Java, JavaScript, VBScript и т.п.). Механизм смены картинки реализован с помощью таблиц стилей CSS. Я не собираюсь претендовать на то, что это мое открытие. Нет, конечно. Суть этого метода лежит на поверхности, однако далеко не все веб-мастера, особенно начинающие, знают о нем. Сразу хочу сказать, что я не ярый противник использования скриптов. Просто нужно более гибко подходить к разработке интернет-проектов и использовать способы, которые наилучшим образом подходят в том или ином случае.

Чем же такой способ лучше? В чем состоят преимущества такого метода, относительно реализации с помощью скриптов? А преимущества есть!

Во-первых, CSS таблицы стилей поддерживаются всеми современными браузерами, а значит, любой пользователь Интернета, зашедший на ваш сайт будет видеть именно то, что было задумано вами, вне зависимости от того, каким браузером он пользуется. Скрипты же интерпретируются различными браузерами по разному и чтобы соблюсти кроссбраузерность часто приходится принимать специальные меры.

Во-вторых, если пользователь отключит в своем браузере поддержку скриптов, кнопка на CSS будет продолжать работать. Как я уже сказал, механизм смены картинки сделан без использования скриптов, а значит, он будет продолжать работать, как и положено.

В-третьих, при реализации механизма смены изображения кнопки с помощью скриптов необходимо позаботиться о том, чтобы второе (активное) изображение кнопки было подгружено до полной загрузки страницы, или, по крайней мере, одновременно с ней. Не все веб-мастера помнят об этом и на некоторых сайтах можно увидеть неприятную картину, когда при наведении курсора мышки на кнопку старое изображение пропадает, а новое только начинает подгружаться. Такой эффект выглядит очень неприятно и портит общее впечатление о сайте. Описываемый способ лишен этого недостатка, так как мы будем использовать только одну картинку, которая содержит оба изображения кнопки. К тому же, одна картинка «весит» немного меньше чем две, а значит, страница будет грузиться немного быстрее.

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

Создаем графическую кнопку

Итак, приступим! Для начала мы должны определиться с размерами кнопки. Если у вас есть готовый шаблон или макет дизайна сайта, то просто измерьте размеры кнопки меню. К примеру, мы определили, что наша кнопка будет шириной 140 и высотой 24 пикселя. Создаем в каком-либо графическом редакторе изображение с размерами 140 на 48 пикселей. Обратите внимание, что высота картинки должна быть вдвое большей, чем у нашей кнопки.

Далее условно делим нашу картинку по горизонтали пополам и нарисуем в верхней части изображение неактивной кнопки, а в нижней, активной. Для создания рисунков кнопки вы можете воспользоваться, к примеру, Photoshop-ом. Разбив изображения на два слоя можно редактировать их по отдельности, добиваясь нужного результата. Можно воспользоваться одним из редакторов-создателей кнопок, например Crystall Button или Likno Web Button Maker, не забывая при этом о размерах кнопки. Если вы будете изготавливать кнопку таким редактором, то вам необходимо создать для нее два изображения (активное и неактивное), а затем соединить их в одно, используя любой графический редактор, например, MS Paint.

Если затрудняетесь самостоятельно изготовить изображение для кнопки, вы с успехом можете воспользоваться любым готовым рисунком кнопки из бесплатных коллекций, расположенных на нашем сайте. Все рисунки оптимизированы по объему и сгруппированы по основным цветовым схемам. Так что вам остается лишь выбрать для себя наиболее подходящую и использовать в своем интернет-проекте. Коллекции расположены на страницах Бесплатная коллекция кнопок №1, Бесплатная коллекция кнопок №2 и Бесплатная коллекция кнопок №3.

В любом случае вы должны получить картинку примерно такого вида:

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

Далее сохраните полученную картинку с именем mybutton.png на свой диск, а затем закачайте ее на свой сайт.

Теперь можно приступать к созданию стилей. Это можно сделать различными способами. Рассмотрим каждый из них.

Способ №1. Вынесение стилей в отдельный файл.

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

Итак, что мы делаем. Сначала определяем, как будет прописана наша кнопка в теле страницы сайта. Предположим, что это будет тег DIV. Прописываем в том месте страницы, где будет выводиться кнопка следующий html код:

Что все это значит?

Далее закрываем тег div:

Так как файл страницы открыт, сразу пропишем путь к файлу стилей (если его еще нет), чтобы он мог подгрузиться вместе со страницей. Находим в начале страницы закрывающий тег и вписываем перед ним строку:

Эта строка укажет браузеру, что он должен загрузить файл styles.css, который расположен в одной папке со страницей. Этот файл, кстати, может быть помещен в любое место вашего сайта, главное корректно прописать к нему путь.
Сохраняем изменения в страничке и закрываем ее.

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

.button a <
font: bold 12px Verdana, Arial, sans-serif ;
text-decoration: none ;
text-indent: 10px ;
color: #FFFFCC ;
background: url(mybutton.png) ;
display: block ;
width: 140px ;
line-height: 24px ;
height: 24px ;
>

Сохраняем изменения и закрываем файл.

Прокомментирую каждую строку:

Последние две строки нужны для поддержания кроссбраузерности нашего CSS файла, а так в них указана высота 24 пикселя, будет видна только верхняя часть нашей картинки.

Прокомментирую каждую строку:

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

Чтобы сделать меню из таких кнопок просто допишите в вашу страницу после строки

Источник

Создаем динамические кнопочки-ссылки с помощью CSS

Чем привлекательны CSS – тем, что они часто, при создании тех или иных эффектов, позволяют заменить JavaScript. Вот и на этот раз каскадные таблицы стилей помогут нам сконструировать красивые динамические кнопочки.

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

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

Динамическая кнопка с двойным эффектом

Создадим кнопку на CSS, которая имеет только 2 состояния: “по умолчанию” и “при наведении курсора“.

Как видите, код максимально прост. Далее нам нужно создать изображения кнопки в обоих состояниях. Для этого я воспользовался программой “Crystal Button“. Вот что у меня получилось:

Дефолтная При наведении мыши

Оба состояния кнопки мы поместим в одно изображение (для каждого из тегов a и span ) и для смены с нормального состояния в “hover” будем смещать фоновое изображение по вертикали, CSS легко нам в этом поможет (о плюсах совмещения изображений в одно рассказано в статье “Оптимизация: используем одно изображение вместо двух”). Часть изображения, которая будет растягиваться в зависимости от текста, сделаем, к примеру, длиной в 350 пикселей (в зависимости от предполагаемой длины кнопок можно подобрать необходимую длину этой части). Высота нашей кнопки составляет 33 пикселя.

Для получения нужного эффекта раньше я прибегал к помощи JavaScript, CSS при этом вообще не использовался. HTML-код был следующим:

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

Попробуем сделать точно такую же кнопку, используя CSS вместо JavaScript.

Код, которым оформим кнопочки “по умолчанию”:

Сейчас добавим эффект, который появляется при наведении курса мыши на кнопку:

Готово! Вот что у нас получилось.

Динамическая кнопка с тройным эффектом

Мы пойдем еще дальше и добавим для нашей кнопки-ссылки еще один эффект, который проявляется при нажатии на кнопку. Соответственно для наших изображений мы добавляем еще одно состояние.

Осталось дописать чуток CSS для третьего состояния кнопки-ссылки:

Готово! Можно кликать!

Получается вполне симпатично, не правда ли? 🙂

Исправляем баг

В браузерах Opera и Internet Explorer наблюдается следующий баг – в них всякий раз, когда кнопка “отпущена”, она не возвращается в состояние по умолчанию. Кстати, в ранних версиях Оперы такого бага не наблюдалось. Чтобы устранить эту неприятность, для тега а приходится использовать небольшой код JavaScript. Таким образом html-код кнопки будет выглядеть следующим образом:

Когда ваша мебель приходит в негодность и настает момент, что пора от нее избавиться, то самое время воспользоваться услугой по утилизации мебели. Лучше избавиться от хлама и купить новую и красивую мебель.

Источник

Обучение Python GUI (уроки по Tkinter)

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

Библиотека Tkinter установлена в Python в качестве стандартного модуля, поэтому нам не нужно устанавливать что-либо для его использования. Tkinter — очень мощная библиотека. Если вы уже установили Python, можете использовать IDLE, который является интегрированной IDE, поставляемой в Python, эта IDE написана с использованием Tkinter. Звучит круто!

Мы будем использовать Python 3.7 поэтому, если вы все еще используете Python 2.x, настоятельно рекомендуем перейти на Python 3.x, если вы не в курсе нюансов изменения языка, с целью, чтобы вы могли настроить код для запуска без ошибок.

Давайте предположим, что у вас уже есть базовые знания по Python, которые помогут понять что мы будем делать.
Мы начнем с создания окна, в котором мы узнаем, как добавлять виджеты, такие, как кнопки, комбинированные поля и т. д. После этого поэкспериментируем со своими свойствами, поэтому предлагаю начать.

Создание своего первого графического интерфейса

Для начала, следует импортировать Tkinter и создать окно, в котором мы зададим его название:

Создание виджета Label

Затем мы установим позицию в окне с помощью функции grid и укажем ее следующим образом:

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

И вот как будет выглядеть результат:
Если функция grid не будет вызвана, текст не будет отображаться.

Настройка размера и шрифта текста

Вы можете задать шрифт текста и размер. Также можно изменить стиль шрифта. Для этого передайте параметр font таким образом:

Отлично, но стандартное окно слишком мало. Как насчет настройки размера окна?

Настройка размеров окна приложения

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

В приведенной выше строке устанавливается окно шириной до 400 пикселей и высотой до 250 пикселей.

Попробуем добавить больше виджетов GUI, например, кнопки и посмотреть, как обрабатывается нажатие кнопок.

Добавление виджета Button

Начнем с добавления кнопки в окно. Кнопка создается и добавляется в окно так же, как и метка:

Наш код будет выглядеть вот так:

Результат будет следующим:
Обратите внимание, что мы помещаем кнопку во второй столбец окна, что равно 1. Если вы забудете и поместите кнопку в том же столбце, который равен 0, он покажет только кнопку.

Изменение цвета текста и фона у Button

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

Кнопка Click

Для начала, мы запишем функцию, которую нужно выполнить при нажатии кнопки:

Затем мы подключим ее с помощью кнопки, указав следующую ​​функцию:

При нажатии на кнопку, результат, как и ожидалось, будет выглядеть следующим образом:
Круто!

Получение ввода с использованием класса Entry (текстовое поле Tkinter)

В предыдущих примерах GUI Python мы ознакомились со способами добавления простых виджетов, а теперь попробуем получить пользовательский ввод, используя класс Tkinter Entry (текстовое поле Tkinter).
Вы можете создать текстовое поле с помощью класса Tkinter Entry следующим образом:

Если вы нажмете на кнопку — появится текст «Привет » вместе с введенным текстом в виджете записи. Вот полный код:

Запустите вышеуказанный код и проверьте результат:
Прекрасно!

Каждый раз, когда мы запускаем код, нам нужно нажать на виджет ввода, чтобы настроить фокус на ввод текста, но как насчет автоматической настройки фокуса?

Установка фокуса виджета ввода

Здесь все очень просто, ведь все, что нам нужно сделать, — это вызвать функцию focus :

Когда вы запустите свой код, вы заметите, что виджет ввода в фокусе, который дает возможность сразу написать текст.

Отключить виджет ввода

Чтобы отключить виджет ввода, отключите свойство состояния:

Теперь вы не сможете ввести какой-либо текст.

Добавление виджета Combobox

Чтобы добавить виджет поля с выпадающем списком, используйте класс Combobox из ttk следующим образом:

Затем добавьте свои значения в поле со списком.

Добавление виджета Checkbutton (чекбокса)

Кроме того, вы можете задать значение по умолчанию, передав его в параметр var в Checkbutton :

Посмотрите на результат:

Установка состояния Checkbutton

Вы можете установить для BooleanVar значение false, что бы чекбокс не был отмечен.
Так же, используйте IntVar вместо BooleanVar и установите значения 0 и 1.

Добавление виджетов Radio Button

Чтобы добавить radio кнопки, используйте класс RadioButton :

Обратите внимание, что вы должны установить value для каждой radio кнопки с уникальным значением, иначе они не будут работать.

Результатом вышеприведенного кода будет следующий:
Кроме того, вы можете задать command любой из этих кнопок для определенной функции. Если пользователь нажимает на такую кнопку, она запустит код функции.
Вот пример:

Получение значения Radio Button (Избранная Radio Button)

Чтобы получить текущую выбранную radio кнопку или ее значение, вы можете передать параметр переменной и получить его значение.

Каждый раз, когда вы выбираете radio button, значение переменной будет изменено на значение кнопки.

Добавление виджета ScrolledText (текстовая область Tkinter)

Результат:

Настройка содержимого Scrolledtext

Удаление/Очистка содержимого Scrolledtext

Чтобы очистить содержимое данного виджета, используйте метод delete :

Создание всплывающего окна с сообщением

Чтобы показать всплывающее окно с помощью Tkinter, используйте messagebox следующим образом:

Довольно легко! Давайте покажем окно сообщений при нажатии на кнопку пользователем.

Когда вы нажмете на кнопку, появится информационное окно.

Показ сообщений о предупреждениях и ошибках

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

Показ диалоговых окон с выбором варианта

Чтобы показать пользователю сообщение “да/нет”, вы можете использовать одну из следующих функций messagebox :

Вы можете выбрать соответствующий стиль сообщения согласно вашим потребностям. Просто замените строку функции showinfo на одну из предыдущих и запустите скрипт. Кроме того, можно проверить, какая кнопка нажата, используя переменную результата.

Если вы кликнете OK, yes или retry, значение станет True, а если выберете no или cancel, значение будет False.
Единственной функцией, которая возвращает одно из трех значений, является функция askyesnocancel ; она возвращает True/False/None.

Добавление SpinBox (Виджет спинбокс)

Для создания виджета спинбокса, используйте класс Spinbox :

Проверим пример полностью:

Виджет покажет только эти 3 числа: 3, 8 и 11.

Задать значение по умолчанию для Spinbox

В случае, если вам нужно задать значение по умолчанию для Spinbox, вы можете передать значение параметру textvariable следующим образом:

Теперь, если вы запустите программу, она покажет 36 как значение по умолчанию для Spinbox.

Добавление виджета Progressbar

Чтобы создать данный виджет, используйте класс progressbar :

Установите значение progressbar таким образом:

Вы можете установить это значение на основе любого процесса или при выполнении задачи.

Изменение цвета Progressbar

Изменение цвета Progressbar немного сложно. Сначала нужно создать стиль и задать цвет фона, а затем настроить созданный стиль на Progressbar. Посмотрите следующий пример:

И в результате вы получите следующее:

Добавление поля загрузки файла

Для добавления поля с файлом, используйте класс filedialog :

После того, как вы выберете файл, нажмите “Открыть”; переменная файла будет содержать этот путь к файлу. Кроме того, вы можете запросить несколько файлов:

Указание типа файлов (расширение фильтра файлов)

Вы можете запросить каталог, используя метод askdirectory :

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

Добавление панели меню

Для добавления панели меню, используйте класс menu :

Сначала мы создаем меню, затем добавляем наш первый пункт подменю. Вы можете добавлять пункты меню в любое меню с помощью функции add_cascade() таким образом:

Наш код будет выглядеть так:

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

Теперь мы добавляем еще один пункт меню “Изменить” с разделителем меню. Вы можете заметить пунктирную линию в начале, если вы нажмете на эту строку, она отобразит пункты меню в небольшом отдельном окне.

Можно отключить эту функцию, с помощью tearoff подобным образом:

Добавление виджета Notebook (Управление вкладкой)

Для удобного управления вкладками реализуйте следующее:

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

Добавление виджетов на вкладку

После создания вкладок вы можете поместить виджеты внутри этих вкладок, назначив родительское свойство нужной вкладке.

Добавление интервала для виджетов (Заполнение)

Передайте padx и pady любому виджету и задайте значение.

В этом уроке мы увидели много примеров GUI Python с использованием библиотеки Tkinter. Так же рассмотрели основные аспекты разработки графического интерфейса Python. Не стоит на этом останавливаться. Нет учебника или книги, которая может охватывать все детали. Надеюсь, эти примеры были полезными для вас.

Появились вопросы? Задайте на Яндекс Кью

У блога есть сообщество на Кью >> Python Q 9 187 4 593 ₽/мес.

Источник