Помогни ни да направим Uroci.net по - богат! Добави урок

Създаване на Web 2.0 бутони

acidmartin   трудност:    видян: 32847

В този урок ще се опитам да обясня принципа за създаване на семантични кросбраузър бутончета с валиден xhtml, произволна ширина и заоблени краища.

Страницата, откъдето можете да изтеглите кода е: http://acidmartin.wemakesites.net/?pageId=Web20Buttons
Демо: http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=45

óðîöè - Web20Buttons1_0.gif

В папката Web20Button/Skins/[SkinName]/Button.css се намират дефинициите за всеки скин, и както ще забележите, в архива, който сте изтеглили има 4 готови скина. Бих се радвал, ако ми изпратите и ваши дизайни.

За да можем да направим бутончетата едновременно разтегателни и със заоблени краища, използваме следния html код - <a> с два вложени <span>-a, като най-вътрешния <span> съдържа и текста на бутона:

<a href="http://uroci.net/#" class="Web20Button default" title="Web 2.0 Button">
<span class="OuterSpan">
<span class="InnerSpan">Web 2.0 Button</span>
</span>
</a>

Ето и по-важните CSS сетинги на нашия бутон:


a.Web20Button.default {
background: url('Button/LeftNormal.gif') no-repeat left top;
font: bold 14px "Trebuchet MS", Verdana, Arial, Sans-serif;
padding-left: 7px;
text-decoration: none;
color: #677788;
display: block;
width: auto;
float: left;

outline: none; /* remove the link focus in Gecko browsers */
}


a.Web20Button.default span.OuterSpan {
background: url('Button/RightNormal.gif') no-repeat top right;
display: block;
}


a.Web20Button.default span.InnerSpan {
background: url('Button/CenterNormal.gif') repeat-x top;
line-height: 26px;
display: block;
margin-right: 7px;
padding: 0 10px;
}


Двата <span> елемента са с display: block;, за да могат да обхванат 100% от техния родител - <a>, което освен display: block има и float: left; width: auto - с цел да се разтегне според съдържанието в него.


В момента се сещам за няколко въпроса, които биха възникнали, а именно:


1. Защо ползваме двойни класове за <a>-тага?
Отговор:
За да можем при желание на една страница да имаме повече от един дизайн на бутончетата. Web20Button дефинира един основен клас, а втория носи името на скина, който искаме да ползваме.


2. Мога ли да ползвам този тип бутон като submit или reset бутон?
Отговор: Да, може с JavaScript:


"submit" бутон:


<a href="javascript: document.forms[0].submit();" class="Web20Button default" title="Web 2.0 Button">
<span class="OuterSpan">
<span class="InnerSpan">Submit Form</span>
</span>
</a>

"reset" бутон:


<a href="javascript: document.forms[0].reset();" class="Web20Button default" title="Web 2.0 Button">
<span class="OuterSpan">
<span class="InnerSpan">Reset Form</span>
</span>
</a>


бутон с JavaScript функция:

<a href="javascript: functionName();" class="Web20Button default" title="Fire Some JavaScript Code">
<span class="OuterSpan">
<span class="InnerSpan">Fire Some JavaScript Code</span>
</span>
</a>


3. Защо не ползваш блоков <div>-елемент вместо инлайн <span>, който сетваш на display: block;
Отговор:
Защото родителския елемент, т.е. <a>-тага е инлайн, а е забранено влагането на блокови в инлайн елементи.

Надявам се урока да е бил полезен!

Мартин Иванов
http://acidmartin.wemakesites.net/

 



Коментари (3)

acidmartin на 15.03 2007 в 23:06ч.
Здравейте,

Вече има обновена демо страница на Skinnable Web 2.0 Buttons, с ново превю на бутончетата. освен това от тази страница (http://acidmartin.wemakesites.net/?pageId=AdditionalSkins) можете да си изтеглите два съвсем нови скина - Orange и Black.

демо: http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=45
страница: http://acidmartin.wemakesites.net/?pageId=Web20Buttons
допълнителни скинчета: http://acidmartin.wemakesites.net/?pageId=AdditionalSkins
други скриптове: http://acidmartin.wemakesites.net/?pageId=DevPage
acidmartin на 05.04 2007 в 08:18ч.
Благодаря за коментара, радвам се, че урокът ти е харесал.

На сайта ми - http://acidmartin.wemakesites.net/?pageId=DevPage можеш да намериш още код - не само css, но и javascript, xhtml, asp.net/c#, xml и други полезни, надявам се неща.
stefotooo на 26.02 2011 в 00:50ч.
Ако някой може да ми помогне за FrontPage 2003 с който се правят сайто ве ще сум му много благодарен ! Значи проблема ми е такъв че всичсо в сайта си е перфектно но само не ми вади картинките които съм сложил.Защо така ?

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com