Праверце яго і не выбірайце
* Source text URL: http://c82.net/posts.php?id=25
Выгода выкарыстання і даступнасць з’яўляюцца лютасцю прама цяпер, і гэта выдатна, таму што гэта павольна зрабіць вэб лепш. На жаль, некаторыя станоўчыя героі ў нашых наборах хітрых прыёмаў не цалкам на належным узроўні, калі справа даходзіць да гэтых двух абласцей. Адзін такі станоўчы герой – стары добры select элемент-у прыватнасці, з уключаным multiple атрыбутам. Як наконт таго, каб скончыць з імі і паспрабаваць штосьці іншае?
Самая вялікая праблема з выбару некалькіх скрынь у тым, што выбар некалькіх варыянтаў – гэта боль, асабліва калі ёсць досыць, каб стварыць паласу прагорткі ў акне. Часцей за ўсё месца, дзе я бачыў гэты сцэнар, у сістэмах кіравання кантэнтам. Напрыклад, выкажам здагадку, што вы пішаце артыкул для сайта ў CMS, і жадаеце, каб яно было ў некалькіх катэгорыях на пярэдняй частцы сайта. (Выкажам здагадку, што сістэма не выкарыстоўвае пазнакі для гэтага прыкладу.) Ён злучае ў гэтыя катэгорыі выбару некалькіх вокан, як правіла, і паказавае ўсе катэгорыі сайта ў якасці варыянтаў. Вам прыйдзецца ўтрымліваць Ctrl і абраць кожную катэгорыю. Гэта можа ўключаць прагорткі ў вакне, і калі вам падабаецца выкарыстоўваць зручныя дэндзі кола прагорткі на мышы, а затым вы ціснуць на сцяжок, каб засяродзіцца і пачаць прагорткі ўніз, так чакайце! Вы толькі што націснулі, не трымаючы Ctrl, каб проста абраць ўсе раней абраныя параметры. Зараз вы павінны вярнуцца назад і ўспомніць, што вы абралі і выкарыстоўваць паласу прагорткі для прагорткі ўніз. Вядома, вы ўсталюеце фокус на элемент, абраўшы элементы з Ctrl, але не кожны ведае, як. Усё гэта падтрымка і атрымлівае рэальны боль. Падрабязней пра небяспеку выбару скрынкі можна знайсці па адрасе YourTotalSite’s Multi-Select Lists vs. Checkboxes.
Чаму б не замяняць тую цяжкую абраную скрынку, пракручвая кантрольным спісам? У апошні час я працаваў у Visual Studio і заўважыў, что кіраванне завецца CheckedListBox (чые імёны гэтых рэчаў?) І думаў, што я спрабую зрабіць адзін для выкарыстання ў Інтэрнэт, выкарыстоўваючы некаторыя стандартныя элементы, а таксама невялікую колькасць CSS. Наступныя разам, каб убачыць, як я зрабіў гэта, то вы ўбачыце канчатковы асноўны вынік ці праверыце некаторыя фантазіі прыклады.
Першы крок складаецца ў стварэнні структуры. Я зрабіў гэта проста выкарыстоўваючы неўпарадкаваны спіс, некаторыя цэтлікі і сцяжкі:
<form action="#" method="get">
<ul class="checklist">
<li><label for="o1"><input id="o1" name="o1" type="checkbox"/> Aenean malesuada ante eget tellus</label></li>
<li><label for="o2"><input id="o2" name="o2" type="checkbox"/> In posuere augue id velit</label></li>
<li><label for="o3"><input id="o3" name="o3" type="checkbox"/> Nullam a dui ac augue adipiscing sodales</label></li>
<li><label for="o4"><input id="o4" name="o4" type="checkbox"/> Vivamus consectetuer ante eget urna</label></li>
<li><label for="o5"><input id="o5" name="o5" type="checkbox"/> Aliquam id felis cursus purus tristique condimentum</label></li>
<li><label for="o6"><input id="o6" name="o6" type="checkbox"/> Suspendisse posuere lectus vitae velit consequat volutpat</label></li>
<li><label for="o7"><input id="o7" name="o7" type="checkbox"/> Fusce condimentum nulla et tortor.</label></li>
<li><label for="o8"><input id="o8" name="o8" type="checkbox"/> Proin consequat faucibus mi</label></li>
<li><label for="o9"><input id="o9" name="o9" type="checkbox"/> Etiam a lectus quis massa viverra laoreet</label></li>
<li><label for="o10"><input id="o10" name="o10" type="checkbox"/> Pellentesque gravida lorem vel odio</label></li>
</ul>
</form>
Той клас у незаказанном спісе – усё, што мы павінны зрабіць кантрольным спісам. Тое, што мы збіраемся зрабіць, гэта асноўнае, што можа быць прыменена ў многіх галінах, але я проста выкарыстоўваю яго пакуль для кантрольных спісаў. Затым, мы дадаем дотык CSS:
.checklist {
border: 1px solid #ccc;
list-style: none;
height: 20em;
overflow: auto;
width: 16em;
}
.checklist,.checklist li { margin: 0; padding: 0; }
.checklist label {
display: block;
padding-left: 25px;
text-indent: -25px;
}
.checklist label:hover { background: #777; color: #fff; }
Цяпер у нас ёсць вельмі асноўныя пракручваючыя кантрольныя спісы без ўсёй сутычкі хвалявання з нагоды адсейвання раней адабраных варыянтаў. Ўрэгуляванне перапаўнення: аўтамабіль – тое, што стварае пракручваючую вобласць і з наборам адзінак вышыні і шырыні як ЭМС, уся рэч перазначная. Мы таксама распрацоўваем лэйблы, каб мець паказ блока, каб зрабіць увесь выбар клікабельным і дадаць некаторы дадатак, але ўсталяваць адмоўную тэкставую заяўку, такім чынам, каб словы змаглі абгарнуць наступны радок, не з’яўляючыся пад checkboxes. Адзін дадатковы карысны стыль быў дададзены да лэйблаў і навіс над імі, каб дазволіць карыстальнікам ведаць, што яны могуць націснуць на іх.
Зрабіце гульню IE добрай
Мы зрабілі, праўда? Не. Як звычайна, у свеце CSS, заднія часткі Internet Explorer гэта – надакучлівая галава і накладае некаторыя непажаданыя межы. На жаль, устаноўка ўласцівасці дысплея пазнак, каб "блакаваць", выклікае ганебную памылку прабелу, у якой IE выводзіць на экран прабел прамежкавых літых тэгаў. Каб вырашыць гэта, выкарыстоўвайце ўзлом Holly і дадайце аб’яву вышыні да ўласцівасцяў пазнакі:
.checklist label {
display: block;
height: 1%;
padding-left: 25px;
text-indent: -25px;
}
Заключная рэч, якую мы павінны зрабіць для IE, складаецца ў тым, каб рэалізаваць версію JavaScript, прадстаўленага ў Suckerfish Apart Спіса, выпадае. Гэты JavaScript дазваляе IE змяняць фон пазнак сапраўды гэтак жа, як сучасныя браўзэры робяць з:hover псевдокласса:
function initChecklist() {
if (document.all && document.getElementById) {
//Get all unordered lists
var lists = document.getElementsByTagName("ul");
for (i = 0; i < lists.length; i++) {
var theList = lists[i];
//Only work with those having the class "checklist"
if (theList.className.indexOf("checklist") > -1) {
var labels = theList.getElementsByTagName("label");
//Assign event handlers to labels within
for (var j = 0; j < labels.length; j++) {
var theLabel = labels[j];
theLabel.onmouseover = function() { this.className+= " hover"; };
theLabel.onmouseout = function() { this.className = this.className.replace(" hover", ""); };
}
}
}
}
}
Загрузіце гэтую функцыю, калі загрузіцца старонкі, выкарыстоўваючы addLoadEvent Simon Willison і будзе добра, вы можаце пайсці.
Зараз вы можаце вольна ўкладваць пералікі, як вам падабаецца і ў вас ёсць значна больш волі, тым самым, чым спрабаваць абраць тып вакна. Правер’це канчатковы вынік ці зірніце на некаторыя магчымасці.
Я не адмысловец, таму, калі я памыліўся дзесьці, то рэч можа быць спарадкавана, трохі больш, калі ласка, не саромейцеся прапанаваць прапановы.
Абнаўленне: Internet Explorer 7, як вядома, выводзіць на экран кантрольныя спісы з магчымасцю пракруткі неналежным чынам. Гэта адбываецца з-за прымененай фіксацыі, каб зрабіць гульню Internet Explorer добрай, як згадана вышэй. На шчасце, фіксацыя простая. Проста выдаліце вышыню: 1%; аб’яву і змясціце гэта ў яго ўласны радок і мэтавую версію IE 6 і ніжэй:
.checklist label {
display: block;
padding-left: 25px;
text-indent: -25px;
}
* html.checklist label { height: 1%; }
Арыентацыя зрабіць, выкарыстоўваючы папулярныя стархак.
Узоры былі абноўлены з перабудовы.