Каб знайсці яго, не абраць
Выгода выкарыстання і даступнасць з’яўляюцца лютасці прама цяпер, і гэта выдатна, таму што гэта павольна зрабіць вэб лепш. Нажаль, некаторыя ласункі ў мяшкі трукі не зусім не правядзеш, калі гаворка заходзіць пра гэтыя дзве вобласці. Адным з такіх ханжа старая добрая select элемент-у прыватнасці, з multiple атрыбут уключаны. Як наконт таго, каб скончыць з імі і паспрабаваць штосьці іншае?
Самая вялікая праблема з выбару некалькіх скрынь у тым, што выбар некалькіх варыянтаў боль, асабліва калі Ёсць досыць, каб стварыць паласу прагорткі ў акне. Часцей за ўсё месца, дзе я бачыў гэты сцэнар у сістэмах кіравання кантэнтам. Напрыклад, выкажам здагадку, што вы пішаце артыкул для сайта ў CMS, і жадаю, каб яно ў некалькіх катэгорыях на пярэдняй частцы сайта. (Выкажам здагадку, што сістэма не выкарыстоўвае пазнакі для гэтага прыкладу.) Злучаным ён у гэтыя катэгорыі, выбару некалькіх акно, як правіла, паказаны ўсе катэгорыі сайце ў якасці варыянтаў. Вам прыйдзецца ўтрымліваць Ctrl і абярыце кожнай катэгорыі. Гэта можа ўключаць прагорткі ў акне, і калі вы кахаеце з выкарыстаннем зручных дэндзі кола прагорткі на мышы, а затым вы можаце націснуць на сцяжок, каб засяродзіцца і пачаць прагорткі ўніз, але чакаць! Вы толькі што націснулі, не трымаючы Ctrl, каб вы проста абраны ўсіх раней абраных параметраў. Зараз вы павінны вярнуцца назад і ўспомніць, што вы абралі і выкарыстоўваць паласу прагорткі для прагорткі ўніз. Вядома, вы ўсталюеце фокус на элемент, абраўшы элементы з Ctrl, але не кожны ведае, што. Усё гэта падтрымка і forthing атрымлівае быць рэальнага болю. Падрабязней пра небяспеку выбару скрынкі можна знайсці па адрасе 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>Каб знайсці яго, не абраць
Выгода выкарыстання і даступнасць з’яўляюцца лютасці прама цяпер, і гэта выдатна, таму што гэта павольна зрабіць вэб лепш. Нажаль, некаторыя ласункі ў мяшкі трукі не зусім не правядзеш, калі гаворка заходзіць пра гэтыя дзве вобласці. Адным з такіх ханжа старая добрая select элемент-у прыватнасці, з multiple атрыбут уключаны. Як наконт таго, каб скончыць з імі і паспрабаваць штосьці іншае?
Самая вялікая праблема з выбару некалькіх скрынь у тым, што выбар некалькіх варыянтаў боль, асабліва калі Ёсць досыць, каб стварыць паласу прагорткі ў акне. Часцей за ўсё месца, дзе я бачыў гэты сцэнар у сістэмах кіравання кантэнтам. Напрыклад, выкажам здагадку, што вы пішаце артыкул для сайта ў CMS, і жадаю, каб яно ў некалькіх катэгорыях на пярэдняй частцы сайта. (Выкажам здагадку, што сістэма не выкарыстоўвае пазнакі для гэтага прыкладу.) Злучаным ён у гэтыя катэгорыі, выбару некалькіх акно, як правіла, паказаны ўсе катэгорыі сайце ў якасці варыянтаў. Вам прыйдзецца ўтрымліваць Ctrl і абярыце кожнай катэгорыі. Гэта можа ўключаць прагорткі ў акне, і калі вы кахаеце з выкарыстаннем зручных дэндзі кола прагорткі на мышы, а затым вы можаце націснуць на сцяжок, каб засяродзіцца і пачаць прагорткі ўніз, але чакаць! Вы толькі што націснулі, не трымаючы Ctrl, каб вы проста абраны ўсіх раней абраных параметраў. Зараз вы павінны вярнуцца назад і ўспомніць, што вы абралі і выкарыстоўваць паласу прагорткі для прагорткі ўніз. Вядома, вы ўсталюеце фокус на элемент, абраўшы элементы з Ctrl, але не кожны ведае, што. Усё гэта падтрымка і forthing атрымлівае быць рэальнага болю. Падрабязней пра небяспеку выбару скрынкі можна знайсці па адрасе Абярыце Спісы YourTotalSite Multi-супраць сцяжкі.
Чаму б не замяніць, што грувасткія абярыце акно з прагорткай пералік? У апошні час я працаваў у Visual Studio і заўважыў кіраванні завецца CheckedListBox (чые імёны гэтых рэчаў?) І думаў, што я спрабую зрабіць адзін для выкарыстання ў Інтэрнэт, выкарыстоўваючы некаторыя стандартныя элементы, а таксама невялікая колькасць 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; }
Зараз у нас ёсць вельмі просты прагорткай пералікі без усякіх клопатаў турботы пра зняўшы папярэдне абраных параметраў. Налада overflow: auto тое, што стварае якая пракручваецца вобласці і з вышыні і шырыні адзінак усталяваць у якасці EMS, уся справа змянянага памеру. Мы таксама стыль этыкеткі каб заблакаваць адлюстраванне зрабіць увесь выбар інтэрактыўных і дадаць абіўка, але стварае негатыўны абзац тэксту, каб можна абгарнуць словы на наступны радок без з’яўляцца пад сцяжкі. Адзін дадатковы карысны стыль быў дададзены ў этыкеткі пры навядзенні на іх, каб карыстачы ведалі, што яны могуць націснуць на іх.
Зрабіць IE гуляйце
Мы зрабілі, праўда? Не. Як звычайна ў свеце CSS, Internet Explorer тылы гэта надакучлівым галаву і накладвае некаторыя абмежаванні непажаданай. Нажаль, усталёўка label ‘дысплей з маёмасці “блок” выклікае праславуты белы памылка прастора, у якім IE адлюстроўвае прабел паміж li пазнакі. Каб вырашыць праблему, выкарыстоўвайце Холли узламаць і дадаць вышыні заява цэтлік уласцівасці:
.checklist label {
display: block;
height: 1%;
padding-left: 25px;
text-indent: -25px;
}Апошняе, што нам трэба зрабіць для IE з’яўляецца рэалізацыя версіі JavaScript уведзена ў A List Apart у Suckerfish Dropdowns. Гэты 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", ""); };
}
}
}
}
}Нагрузка гэту функцыю пры загрузцы старонкі выкарыстаннем Simon Willison у addLoadEvent і вы добра ісці.
Зараз вы можаце вольна ўкладваць пералікі, як вам падабаецца і ў вас ёсць значна больш волі, тым самым, чым спрабаваць абраць тып акна. Ад’езд канчатковы вынік ці зірнуць на некаторыя магчымасці.
Я не адмысловец, таму, калі я памыліўся дзесьці рэчы могуць быць спарадкавана, трохі больш, калі ласка, не саромейцеся прапанаваць прапановы.
Абнаўленне: Internet Explorer 7, як вядома, дысплей з прагорткай пералікі няправільна. Гэта злучана з выправіць ужываецца, каб Internet Explorer гуляць добра, як гаварылася вышэй. Да шчасця, выправіць вельмі проста. Проста выдаліце height: 1%; заява і паклаў яго на сваю лінію і мэтавы IE версіі 6 і ніжэй:
.checklist label {
display: block;
padding-left: 25px;
text-indent: -25px;
}
* html .checklist label { height: 1%; }Арыентацыя зрабіць, выкарыстоўваючы папулярныя стархак.
Узоры былі абноўлены з перабудовы.
