| |
 12 Кб |
|
| | Ниже по тексту приведен код страницы, но которой я хотел промакетировать двухуровневое меню.
В принципе, все это работает (см. скриншот в Хроме). | |
| |
|
|
| |
21.6 Кб |
|
| |
для: Владимир55
(14.05.2012 в 18:00)
| | | В ИЕ 9 не пробовал, но и там должно работать. А вот в ИЕ8 получается совсем нехорошо (скриншот).
Понятно, что некоторые CSS записи не могут воспроизводиться в ИЕ8 (mo-border-radius, moz-transition, transition) и они ухудшают дизайн, но почему меню получилось сбоку? Можно ли его в ИЕ8 поместить горизонтально, как в других браузерах? И чтобы работало оба уровня?
<html>
<head>
<title>1</title>
<style>
.m1 {
backgound:#F5F5F5;
border:1px solid black;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
color:black;
text-align:center;
cursor:pointer;
cursor:hand;
padding:2px;
}
.m1:hover {
text-decoration:underline;
background:#FFFFFF;
}
</style>
<script>
function mm1() {
document.getElementById('m1').style.display='none';
document.getElementById('p1').style.display='block';
document.getElementById('m2').style.display='block';
document.getElementById('p2').style.display='none';
}
function mm2() {
document.getElementById('m2').style.display='none';
document.getElementById('p2').style.display='block';
document.getElementById('m1').style.display='block';
document.getElementById('p1').style.display='none';
}
function close1() {
document.getElementById('m2').style.display='block';
document.getElementById('p2').style.display='none';
document.getElementById('m1').style.display='block';
document.getElementById('p1').style.display='none';
}
</script>
</head>
<body>
<div style="padding:15px;">
<div class="m1" onclick="mm1();" id="m1">Пункт 1</div>
<div class="m1" id="p1" style="display:none;">
<div class="m1" onclick="close1();">Пункт 1</div>
<a href="" class="m1">Пункт 1.1</a>
<a href="" class="m1">Пункт 1.2</a>
</div>
<div class="m1" onclick="mm2();" id="m2">Пункт 2</div>
<div class="m1" id="p2" style="display:none;">
<div class="m1" onclick="close1();">Пункт 2</div>
<a href="" class="m1">Пункт 2.1</a>
<a href="" class="m1">Пункт 2.2</a>
</div></div>
</body>
</html>
|
| |
| |
|
|
| |
31.7 Кб |
|
| |
для: Владимир55
(14.05.2012 в 18:07)
| | | Я не буду комментировать, кроме того, что так меню не делают. Извините.
Все делается на чистом HTML+CSS без всякого JS.
Мой Вам совет:
Возьмите нормальное меню, и поковыряйтесь в нем.
Например такое.....
К этому посту прикреплю скриншот, к следующему архивчик. | |
| |
|
|
| |
15.4 Кб |
|
| |
для: Владимир55
(14.05.2012 в 18:07)
| | | | |
| |
|
|
| |
|
|
| |
для: Sfinks
(14.05.2012 в 20:30)
| | | так меню не делают
Наверное, все-таки делают - это же не я насочинял (я бы и не сумел). Это мне порекомендовали на одном из форумов в виде ссылки в сборнике кодов разных меню. А там есть и такие варианты, что жуть в полосочку...
А Ваш вариант мне гораздо больше нравится! По крайней мере, в нем есть шанс разобраться.
Спасибо! | |
| |
|
|
| |
|
|
| |
для: Владимир55
(14.05.2012 в 23:17)
| | | > Наверное, все-таки делают
Ну некоторые до сих пор и табличную верстку делают =) Я имел ввиду что это не нормальное меню =)
Самое главное, что в вашем варианте если захочется добавить пункт меню первого уровня, придется править и переформатировать кучу кода, в том числе и JS-кода. А в том, который я Вам предложил, достаточно вписать в HTML новый блок <li><a>...</a><ul>...</ul></li> и он сам займет свое место и будет работать. | |
| |
|
|
| |
|
|
| |
для: Владимир55
(14.05.2012 в 23:17)
| | | Кстати, да, лучше все JS-обработчики вешать на id и class, а весь JS-код хранить отдельно от HTML (поисковые роботы это должны оценить). | |
| |
|
|
| |
|
|
| |
для: cheops
(15.05.2012 в 11:54)
| | | лучше все JS-обработчики вешать на id и class
Вот это очень важный вопрос, но мне никак не удается до конца с ним разобраться!
Можете Вы пояснить эту мысль?
(Лучше всего примером). | |
| |
|
|
| |
|
|
| |
для: Владимир55
(15.05.2012 в 12:05)
| | | Э... да, наверное могу, вам принципиально это будет это jQuery или нужен чистый JavaScript? | |
| |
|
|
| |
|
|
| |
для: cheops
(15.05.2012 в 12:41)
| | | - | |
| |
|
|
| |
|
|
| |
для: cheops
(15.05.2012 в 11:54)
| | | 1. "все JS-обработчики вешать на id" - очень спорное утверждение
2. "и class" - ещё более спорное
3. "весь JS-код хранить отдельно от HTML" - равносильно "Храните деньги в сберегательной кассе!"
4. "поисковые роботы это должны оценить" - ух ты! "А мужики-то не знали!"(с)
-----
По пунктам:
1. Имеется на странице таблица - 3 строки и 4 столбца.
И надо проделать некие разные JS-действия над каждой из (3 х 4 = ) двенадцати ячеек.
Предлагаете присвоить каждой ячейке свой уникальный id?
А почему нельзя в данном случае воспользоваться коллекциями rows () и cells (), с помощью которых каждую из ячеек можно однозначно идентифицировать без всяких id у ячеек?
ИМХО, в общем виде это ваше утверждение выглядит нелепо.
---
2. ГЛАВНЫМ ДОСТОИНСТВОМ ИСПОЛЬЗОВАНИЯ КЛАССОВ является то, одно имя класса можно применять одновременно ко многим элементам страницы, а не прописывать правила стиля для каждого.
Кроме того, ДОПОЛНИТЕЛЬНЫМ ДОСТОИНСТВОМ является то, что одно имя класса можно применять не только к разным экземплярам одного и того же тега, но и к совсем разным тегам.
Ваше предложение использовать имена классов для идентификации элементов автоматически устраняет и "главное" достоинство использования классов, и "дополнительное". Потому как для однозначной идентификации элемента имя его класса теперь должно стать уникальным и относиться только к этому элементу.
Я хочу: молоть кофе (1), взбивать сливки (2), делать фарш (3).
Для этого мне нужны либо уникальные идентификаторы инструменты:
кофемолка (1), блендер (2), мясорубка (3).
Либо я могу приобрести один класс инструмент - миксер - которым смогу делать все три нужных мне действия.
Вы же предлагаете купить три миксера, но каждый из них использовать только для одной операции (я бы вас понял только в одном случае - если б вы работали в организации, производящей эти самые миксеры).
ИМХО, это ваше предложение нерационально.
Более того, браузер MSIE восьмой версии, коим по сю пору пользуются 32% населения планеты, не поддерживает коллекцию getElementsByClassName ().
Нерациональность, помноженная на ограниченность == глупость. Нет?
---
3. Мне необходимо в одном единственном месте страницы при её формировании прописать текущую дату.
Делаю я это так:
<МЕСТО><script>var d = new Date (); document.write (d.getDate ());</script></МЕСТО>
|
Предлагаете всё это оформить функцией (ибо надо же дождаться, покуда <МЕСТО> загрузится), дать <МЕСТУ> уникальный идентификатор, который вписать в функцию и вынести всё это в отдельный файл?
Ваше предложение можно рассматривать исключительно как желание по-любому увеличить объём страницы:-)
---
4. Если, конечно, вы в миру - Сергей Брин - то я спорить с вами не буду. Ибо С. Брин знает точно.
Но вот ежели вы не С. Брин, то спрошу - "откуда дровишки про то, что поисковики якобы приветствуют отсутствие блоков <script>...<script> на странице?" | |
| |
|
|
| |
|
|
| |
для: ЯСА
(15.05.2012 в 12:42)
| | | поисковики ... приветствуют отсутствие блоков <script>...<script> на странице
Это так. | |
| |
|
|
| |
|
|
| |
для: ЯСА
(15.05.2012 в 12:42)
| | | 1. Очень узкая задача, которая встречается не так часто, обычно задача другая - один уникальный тэг и один уникальный обработчик. Если вдруг есть какие-то табличные данные, и ячейки должны быть снабжены обработчиками - будет другой разговор. Однако, я что-то не заметил что это сверх-частая задача.
2. Классы не сами собой назначаются, назначаю их я, назначаю для разных целей. Главным образом для оформления. Однако, и для назначения события целому классу тэгов мне никто ввести класс не запретит. Ничего абсурдного я тут не вижу.
3. Да, такая точка зрения тоже есть и я тоже считаю, что фанатизм, любой и поборников разделения кода и ваш - он в принципе вреден. Иногда объем страницы - нож острый, иногда время разработки - критично. Да и вообще экономических параметров, требований и условий труда - море разливное, они и определяют что выгодно, а что нет. Однако, если вам не лениво открывать книги с последними тенденциями в Web (а что-то мне подсказывает, что лениво), то мода сейчас такова - разделять. Обусловлена она просто гигантскими объемами JS-библиотек, в устройстве которых никто не желает разбираться.
4. Я не Брин, но все-равно спорить со мной не нужно (тем более реплику я адресовал Владимиру, имея в виду его цели - яндекс-роботы). В Разное ходите время от времени, там эти дровишки регулярно обсуждаются. Есть люди, которые за роботами охотятся, есть которым они не нужны, Владимир с яндекс-роботами очень дружен, регулярно публикует информацию на уровне ДСП. В его же источнике я как-то это и увидел, еще удовлетворенно хмыкнул про себя, надо же Яндексовцы поддержали разделение - не перевелись видать еще у них "архитекторы". Мнение это с мои совпадало и я был очень доволен, пока вы со своим старообрядческим обличаловом на меня не напали :))) | |
| |
|
|
| |
|
|
| |
для: cheops
(15.05.2012 в 13:20)
| | | 1. Могу, как и Шахерезада, рассказать вам на ночь "Тысячу и одну сказку", сиречь привести любое нужное вам количество примеров, где использование существующих коллекций, а также свойств типа parentNode, firstChild и nextSibling для идентификации элементов страницы куда как рациональнее, чем назначение им идентификаторов или классов.
Только при условии: каждая моя "сказка" - десять рублей. Номер моего WEB-кошелька сбрасывать?
(и - УРРЯЯЯ!!! - наконец-то участие в форумах станет для меня бизнесом!!!)
2. Ну да,.. совсем ничего абсурдного. Есть атрибут id, есть атрибут name.
Умному - достаточно.
Но появился некий кретин (разработчик JQuery), который решил и миксер (class) использовать для идентификации. И у этого кретина сразу же появилось море сторонников. А действительно - почему нельзя?
Завтра появится другой кретин, который предложит использовать атрибут LANG для идентификации (его же всё-равно никто и никогда не использует, а он поддерживается абсолютно всеми тегами) и напишет под это дело добавку к JQuery. И у этого кретина появятся тысячи и миллионы последователей. А чего - ведь можно же?
Человека ведь можно идентифицировать не только по паспорту, но и по отпечаткам пальцев, по росту, по весу, по татуировкам, по номеру сотового телефона... давайте объявим номер сотового величиной, равной паспорту - и всего делов-то :-))
3. Открывать книги для того, чтобы узнать - "какова сейчас мода?" - мне действительно лениво.
Книги должны сеять разумное, доброе, вечное. А книжки про текущую моду... я слишком ценю отведённое мне на жизнь время, чтобы не тратить его на просмотр телепередач от стилиста Зверева (он ведь тоже про "моду" вещает).
4. Критерий для оценки отношения поисковиков к любой "фиче" прост: страница с "фичей", коя приветствуется поисковиками, должна быть в серпе выше, чем аналогичная по прочим параметрам страница без этой "фичи".
Кто-то провёл эксперимент и показал, что страница 1 с кодом
<head><script src="file.js"></script></head><body>1q2we3r4t5y6u7i8o9p0</body>
|
по запросу 1q2we3r4t5y6u7i8o9p0 оказалась на первом месте в серпе, а страница с кодом
<body>1q2we3r4t5y6u7i8o9p0<script>var x = 5</script></body>
|
на втором?
Можете дать ссылку на таковой эксперимент?
Нет, не можете?
Тогда все разговоры об "поддержали/не поддержали" - это набивание себе веса теми, кто пользуясь всеобщей безграмотностью, называет себя "SEO-оптимизаторами". | |
| |
|
|
| |
|
|
| |
для: ЯСА
(15.05.2012 в 14:19)
| | | 1.
>Только при условии: каждая моя "сказка" - десять рублей. Номер моего WEB-кошелька
>сбрасывать?
Можно даже в "города" поиграть... я наверное даже проиграю, зачем?
2.
Так можно сказать почти про любую технологию, про Transact-SQL тот же, который ввел в свое время хранимые процедуры, которые потом стали часть стандарта SQL и теперь обязательны для реализации любой себя уважающей базы данных. Технология определяется не её красотой и продуманностью, а тем удобна она или нет, позволяет заработать больше меньшей кровью или нет. Будь иначе, мы бы давно программировали бы на прекрасных и одухотворенных языках программирования, понятия язык-сорняк вообще бы не существовало. jQuery - это сорняк, но довольно жизнестойкий, от него уже не избавиться.
3.
Это я к тому пишу, что они уже обосновывают, что JavaScript - отстой, jQuery - путь настоящего джедая. Потом они будут ссылаться друг на друга, до тех пор, пока не объявят JavaScript - устаревшим, а все браузеры будут сопровождаться встроенным набором JS-библиотек мегабайт на 100, в которых черт ногу сломит...
4.
>Тогда все разговоры об "поддержали/не поддержали" - это набивание себе веса теми, кто
>пользуясь всеобщей безграмотностью, называет себя "SEO-оптимизаторами".
Даже соглашусь, хотя по законам жанра мне полагается возражать, тем более там один параметр ничего не значит - их тысячи. Тенденции Яндекса - новые дорогие, ну или то, что они считают дорогими сайтами вверх - дешевые вниз. При этом регулярно ронять дорогие сайты и бизнесы в даун, чтобы тянуть бабло (а деньги у владельцев есть - сайт дорогой).
PS Слушайте вам действительно принципиально, разделен код или встроен? Тем более ни то, ни другое не запрещено, а поисковые роботы сайты разных тематик и групп по-разному обслуживают, особенно вопрос становится животрепещущим, при переходе от группы сайтов приносящих денег к группе сайтов, денег не приносящих. Этому холивару два десятка лет, то говорят разделение - это наше спасение, то опять какой-нибудь LINQ вводят, эта мода будет постоянно меняться, ну вот сейчас в отношении JS она такая - резон есть, разметка не очень простая, JS тоже довольно-таки сложный, а сервера у поисковых систем - не бесконечные, всю эту белиберду разбирать, они эти идеи будут всячески рекламировать. Вам-то жалко что-ли? | |
| |
|
|
| |
|
|
| |
для: cheops
(15.05.2012 в 14:48)
| | | вам принципиально это будет это jQuery или нужен чистый JavaScript
Нет, это непринципиально. С jQuery даже интересней.
Но главное - чтобы сама реализация Вашего тезиса JS-обработчики вешать на id и class была хорошо видна. | |
| |
|
|
| |
|
|
| |
для: Владимир55
(15.05.2012 в 16:20)
| | | Пусть есть чистый HTML-файл без JS
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.handler.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</head>
<body>
<input type="text" id="id_in" />
<div id="id_out"></div>
</body>
</html>
|
В файле текстовая строка, в которой можно набирать текст. Пусть требуется обработать событие нажатия клавиши и вывести в div-блоке id_out, введенную в текстовой строке информацию (здесь она не преобразуется, но в реальном приложении - могут производиться вычисления, распознавание чисел или ключевых слов, вывод каких-то других элементов управления). Мы привяжем событие нажатия клавиши к id_in, а результат выведем в блок id_out. Обработчик поместим во внешний файл jquery.handler.js, который может содержать следующий код
$(document).ready(function(){
// Обработчик нажатия клавиши
$("#id_in").bind('keyup', function(event){
// Тут одна строка, но в реальных приложений здесь могут быть
// объемные вычисления
$("#id_out").text($("#id_in").val());
});
});
|
В результате в js-файле только JS-код, а в html-файле - только HTML-код. Языки разделены. | |
| |
|
|
| |
|
|
| |
для: cheops
(15.05.2012 в 16:51)
| | | Да, я понял - это действительно минимум.
Спасибо! | |
| |
|
|
| |
|
|
| |
для: cheops
(15.05.2012 в 16:51)
| | | Ага, а если в jquery.handler.js "всунуть" ещё и создание обоих тегов - <input> и <div> - то будет и вовсе красота - <body></body> - прям как проезд Путина на инаугурацию: народу нет, витрины магазинов/кафе закрыты, канализационные и прочие люки заварены...
И кому, интересно, это понравилось?
Тоже, видимо, разработчикам Яндекса угодить пытались :-))) | |
| |
|
|
| |
|
|
| |
для: ЯСА
(15.05.2012 в 17:15)
| | | И тут про Путина, давайте хоть тут без него обойдемся, своими силами :))) | |
| |
|
|
|
