17
мар
2015
В данном уроке рассмотрим создание кнопки с дополнительной информацией, которая поможет проинформировать пользователя о его дальнейших, возможных действиях. В примере мы будем использовать кнопку загрузки, с дополнительной информацией и возможностью выбора функций.
Чтобы активировать действие, нам необходимо нажать на кнопку, в результате чего кнопка трансформируется в окно, в котором можно продолжить действие. И так, давайте приступим.
Шаг 1. HTML
Для начала нам необходимо создать простую разметку, для этого у нас последовательность классов, мы устанавливаем шапку с классом отображения стандартной кнопки, а затем у нас будет очередность выбора с помощью радиокнопок.
В конце мы предлагаем выбрать какое действие совершить, сохранить в облако или загрузить. Это позволит усовершенствовать загрузку, так как облачные хранилища стали весьма популярны.
Шаг 2. CSS
Теперь нам необходимо стилизовать нашу кнопку, для этого мы применим несколько простых классов. Сперва мы стилизуем общие параметры, затем саму кнопку.
Для кнопки и окна нам необходимо установить два варианта отображения, неактивного и активного формата, что позволит сделать кнопку более живой.
Шаг 3. JS
Последним действием будет вызов функции при нажатии на кнопку, его используем для уведомления о активном действии, чтобы отобразить больше информации после нажатия:
В результате мы получаем достаточно удобную в использовании кнопку, которая поможет расширить стандартные возможности при загрузки.
Готово!
Кнопка для сайта с дополнительной информацией
В данном уроке рассмотрим создание кнопки с дополнительной информацией, которая поможет проинформировать пользователя о его дальнейших, возможных действиях. В примере мы будем использовать кнопку загрузки, с дополнительной информацией и возможностью выбора функций.
Чтобы активировать действие, нам необходимо нажать на кнопку, в результате чего кнопка трансформируется в окно, в котором можно продолжить действие. И так, давайте приступим.
Шаг 1. HTML
Для начала нам необходимо создать простую разметку, для этого у нас последовательность классов, мы устанавливаем шапку с классом отображения стандартной кнопки, а затем у нас будет очередность выбора с помощью радиокнопок.
<div>
<header>Загрузить<i class="fa fa-angle-down"></i></header>
<ul>
<li><label><input type="radio" name="dl" checked>Для дома (бесплатно)</label></li>
<li><label><input type="radio" name="dl">1 лицензия (1 рубль)</label></li>
<li><label><input type="radio" name="dl">10 лицензий (10 рублей)</label></li>
</ul>
<section>
<button><i class="fa fa-cloud-download"></i><br>В Облако</button>
<button><i class="fa fa-download"></i><br>Скачать</button>
</section>
</div>
<header>Загрузить<i class="fa fa-angle-down"></i></header>
<ul>
<li><label><input type="radio" name="dl" checked>Для дома (бесплатно)</label></li>
<li><label><input type="radio" name="dl">1 лицензия (1 рубль)</label></li>
<li><label><input type="radio" name="dl">10 лицензий (10 рублей)</label></li>
</ul>
<section>
<button><i class="fa fa-cloud-download"></i><br>В Облако</button>
<button><i class="fa fa-download"></i><br>Скачать</button>
</section>
</div>
В конце мы предлагаем выбрать какое действие совершить, сохранить в облако или загрузить. Это позволит усовершенствовать загрузку, так как облачные хранилища стали весьма популярны.
Шаг 2. CSS
Теперь нам необходимо стилизовать нашу кнопку, для этого мы применим несколько простых классов. Сперва мы стилизуем общие параметры, затем саму кнопку.
div {
width:300px;
display:block;
margin:0 auto;
border-radius:4px;
background:#eee;
height:34px;
overflow:hidden;
position:relative;
top:30%;
transform:translateY(-30%);
font-weight:200;
font-size:15px;
line-height:20px;
}
.touch {
height:auto;
overflow:auto
}
header {
background:#2098F6;
padding:8px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:#fff;
background-clip:padding-box;
display:block;
cursor:pointer;
position:relative
}
header i {
position:absolute;
right:15px
}
ul {
color:#fff;
list-style-type:none;
margin:0;
padding:8px;
font-size:0
}
li {
margin:12px 0;
color:#222;
font-size:13px
}
section {
display:table;
table-layout:auto;
width:100%
}
input {
margin-right:8px
}
button {
border:0;
margin:0;
padding:10px;
display:table-cell;
width:50%;
background:rgba(0,0,0,0.5);
transition:background .4s ease;
color:#fff;
cursor:pointer
}
button:first-child {
border-right:1px solid rgba(255,255,255,0.5)
}
button:hover {
background:#2098F6
}
button .fa {
font-size:1.2rem
}
width:300px;
display:block;
margin:0 auto;
border-radius:4px;
background:#eee;
height:34px;
overflow:hidden;
position:relative;
top:30%;
transform:translateY(-30%);
font-weight:200;
font-size:15px;
line-height:20px;
}
.touch {
height:auto;
overflow:auto
}
header {
background:#2098F6;
padding:8px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:#fff;
background-clip:padding-box;
display:block;
cursor:pointer;
position:relative
}
header i {
position:absolute;
right:15px
}
ul {
color:#fff;
list-style-type:none;
margin:0;
padding:8px;
font-size:0
}
li {
margin:12px 0;
color:#222;
font-size:13px
}
section {
display:table;
table-layout:auto;
width:100%
}
input {
margin-right:8px
}
button {
border:0;
margin:0;
padding:10px;
display:table-cell;
width:50%;
background:rgba(0,0,0,0.5);
transition:background .4s ease;
color:#fff;
cursor:pointer
}
button:first-child {
border-right:1px solid rgba(255,255,255,0.5)
}
button:hover {
background:#2098F6
}
button .fa {
font-size:1.2rem
}
Для кнопки и окна нам необходимо установить два варианта отображения, неактивного и активного формата, что позволит сделать кнопку более живой.
Шаг 3. JS
Последним действием будет вызов функции при нажатии на кнопку, его используем для уведомления о активном действии, чтобы отобразить больше информации после нажатия:
$("button").click(function() {
alert("Boom");
});
$("header").click(function() {
$("div").toggleClass("touch")
});
alert("Boom");
});
$("header").click(function() {
$("div").toggleClass("touch")
});
В результате мы получаем достаточно удобную в использовании кнопку, которая поможет расширить стандартные возможности при загрузки.
Готово!
|
|
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Datalife Engine
Релизы
WordPress
Joomla
Другие CMS
Web-Мастеру
Игры/Игровые CMSПоследние комментарии
-
Написал(а): JoesphJoift
В новости: Akeeba Admin Tools Pro v7.5.2 - безопасность и администрирование сайтов на Jooml ...Hi there, neighboring Californians! Just desired to place a quick note to let you know that my drywall repair venture is properly up and functional. Based precisely here in radiant California, I'm here to support homeowners throughout the coast with all their drywall demands. Whether you're handling with cracks, holes, or water damage, my team and I have the skills and proficiency to get your walls seeming good as new. So if you're in need of some repairs, don't pause to give us a call! Let's work together to keep those California homes in top-notch shape. -
Написал(а): dafaher
В новости: JRealtime Analytics v3.9.2 - компонент аналитики для JoomlaДобрый день, в первую очередь спасибо, что поделились такими ценными расширениями. Я просто хотел сообщить вам, что ссылка не работает, спасибо большое. -
Написал(а): arbuku2
В новости: DJ-Catalog2 v4.1.2 - каталог товаров для Joomladj-catalog2 v5 Когда он будет опубликован? When will it be published? -
Написал(а): SergTSY
В новости: QR Menu Maker v3.4.0 - бесконтактное меню ресторанаСсылки не рабочие.
Перезалейте, плз? -
Написал(а): anons01
В новости: Akeeba Backup Pro v9.9.2 - компонент резервного копирования для JoomlaUpload doesn't work -
Написал(а): sania4m
В новости: Aoxio v2.1 Nulled - скрипт для бронирования бизнес-услугустановка проходит , но не создается база данных -
Написал(а): Nibiru7
В новости: JRealtime Analytics v3.9.2 - компонент аналитики для Joomlaспасибо за -
Написал(а): jackxren88
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaМожет есть у кого-то решение как убрать "запрос на ключ"?