15.09.2010

Праверце яго і не выбірайце

* 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%; }

Арыентацыя зрабіць, выкарыстоўваючы папулярныя стархак.

Узоры былі абноўлены з перабудовы.

Contact info

If you have any questions or suggestions please contact us:

clipartlife@gmail.com

Last Searches