Рубрика: XHTML
ZUI — ui библиотека коллекции элементов интерфейса
Включает в себя: Alert, Badge, Banner, Button, Dialog, Example, Font, Form, Header, Image, Keyboard, Layout Group, Layout, Navigation, Page Header, Page, Pagination, Select Container, Splitter, Status Bar, Status, Steps, Tab, Table, Tag, Toolbar, Top Bar, Typography.
Пример Steps
HTML5 Placeholder Attribute
Ранее я уже писал о плейсхолдерах. Нормальные браузеры поддерживают
<input type='text' name='email' placeholder='Email Address'/>. Вот костыль на jquery который решает проблему для недобраузеров:
<script>
// placeholder polyfill
$(document).ready(function(){
function add() {
if($(this).val() == ''){
$(this).val($(this).attr('placeholder')).addClass('placeholder');
}
}
function remove() {
if($(this).val() == $(this).attr('placeholder')){
$(this).val('').removeClass('placeholder');
}
}
// Create a dummy element for feature detection
if (!('placeholder' in $('<input>')[0])) {
// Select the elements that have a placeholder attribute
$('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add);
// Remove the placeholder text before the form is submitted
$('form').submit(function(){
$(this).find('input[placeholder], textarea[placeholder]').each(remove);
});
}
});
</script>А стили на них вешаются так:
::-webkit-input-placeholder { color:#999; }
:-moz-placeholder { color:#999; }
:-ms-input-placeholder { color:#999; }
ITForms — валидация HTML-форм
Расширенный набор элементов. Комплексная валидация формы на стороне клиента. AJAX-проверка CAPTCHA и уникальных полей. Скоро будет шифрование данных по открытому ключу.
Сайт скрипта
Плейсхолдеры и ХТМЛ5
Не так давно написал: Очистка поля input при фокусе на jQuery
Оказывается в ХТМЛ5 есть плейсхолдер и выглядит это приблизительно так:
ХТМЛ
<h1 class="project-name">
<a href="http://unwrongest.com/projects/defaultvalue">Unwrongest - Jquery Defaultvalue</a>
</h1>
<input id="username" placeholder="Enter a username..." type="text" />
<input id="password" placeholder="Enter a password..." type="password" />
<textarea id="description" placeholder="Describe yourself..."></textarea>ЦСС
body { background: #0D1114; }
.project-name a { padding: 0; color: #3cf; text-transform: uppercase; font: bold 13px/30px 'Arial', 'sans-serif'; }
input,
textarea{ padding: 10px; width: 300px; font-weight: bold; font-family: Arial, 'sans-serif'; margin-bottom: 10px; font-size: 13px; border: none; clear: both; float: left; }
.empty { color: #999; }ЯВА
$('#username, #password, #description').defaultValue();
И вот ДЕМО.
