s0rr0w
-
Posts
5,139 -
Joined
-
Last visited
-
Days Won
32
Content Type
Profiles
Forums
Calendar
Store
Everything posted by s0rr0w
-
Это не баг, это правильно все. Исправить можно просто - замените табличку на набор дивов, у вас там ничего сверхсложного нет. Всем, кому интересно, почему все правильно: http://www.w3.org/TR/CSS21/tables.html#collapsing-borders Обращаем внимание, чему равна ширина таблицы. Бордюр толщиной в 1 пиксель невозможно разделить надвое так, чтобы он был посреди линии сетки, которая указывает на границы между ячейками. Поэтому для верхней и правой границы ячейки бордюр рисуют за пределами таблицы, а для нижней и левой - внутри. Вот тесткейз для понимания <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Border collapsing</title> <style type="text/css"> .container { width: 100px; height: 100px; background: #fc3; } table { border-collapse: collapse; width: 100px; height: 100px; border: 10px solid #000; padding: 10px; } </style> </head> <body> <div class="container"> <table> <tbody> <tr> <td>Cell</td> </tr> </tbody> </table> </div> <div class="container"> Real 100x100 </div> </body> </html> Опера, ИЕ, Сафари, Хром, ФФ2 показывают данный код неправильно.
-
Как сделать закладку для двух тем на одной странице
s0rr0w replied to bgraf's question in HTML Coding
Нет, код Вам нужно будет сделать блок с переключателями табов и блок, где будет расположен контент табов. Контент табов - это набор блоков. Например вот так <div class="tabSwitchContainer"> <a href="#">Tab 1</a> <a href="#">Tab 2</a> </div> <div class="tabContentContainer"> <div class="tabContent"> Content 1 </div> <div class="tabContent"> Content 2 </div> </div> -
То для этого есть статья УК.
-
А данная ситуация неоднозначно описана. Если собираются выводить php код, значит на сервере как минимум стоит php. А значит средствами php можно реализовать данную задачу, и если сильно хочется, то еще и при помощи JS
-
Через враппер - может. Подключить JS, в котором в переменной записан код php страницы.
-
Так что вы сейчас не понимаете? Есть файл, нужно открыть его, прочитать содержимое, заменить теги на специальные символы и вывести.
-
А что, собственно, вам непонятно?
-
Как сделать закладку для двух тем на одной странице
s0rr0w replied to bgraf's question in HTML Coding
Попробуйте использовать StateController Вот тут лежит пример, он правда чуть более продвинутый, но можно вырезать половину лишнего. http://forum.htmlbook.ru/index.php?showtopic=12633 Сначала нарисуйте табы, так как вам хочется, потом я подскажу, что надо прописать, чтобы они заработали -
Нет никаких проблем с данным кодом.
-
А для чего вы это хотите использовать?
-
rash Ты спрашивал, а в чем собственно я вижу преимущества? А вот они. За два дня никто не сделал того, что я сделал менее чем за час. И не потому что лень или еще что, потому что сложность изготовления достаточно высока для "обычных" способов. Следующая демонстрация, я сделаю интерфейс для почтовика по типу гмэйла. В ограниченном конечно же виде, но все же.
-
А вам слабо воспользоваться поиском на данном форуме и найти себе с десяток примерчиков?
-
Почему никак? CSS для этого есть. Главное, понимать суть того, что есть высота и от какого значения высчитывается высота в 100%. http://www.w3.org/TR/CSS21/visudet.html#the-height-property
-
http://www.w3.org/TR/html401/struct/tables.html#h-11.2.1 Вот тут найдите атрибут height.
-
Создал специальную тему. http://forum.htmlbook.ru/index.php?showtopic=12633 Если кто-то будет реализовывать ТЗ, прошу засечь время исполнения.
-
Шестой пример лежит в соседней ветке http://forum.htmlbook.ru/index.php?showtopic=12633
-
Пример седьмой Задача, сделать скрипт, который бы выделял элементы, которые удовлетворяют определенным условиям. Например, для модуля управления правами можно показывать тех пользователей, которым принадлежит определенный набор прав. Sample7.zip
-
На создание скриптовой части мне понадобилось примерно 10 минут, на создание рыбы и функционала - около 15 минут, на доводку стилей - 10 минут. Sample6.zip При этом я использовал в виде copy/paste уже готовые куски кода, которые были описаны в примере №4.
-
Закладки.
-
Не во всех сферах. Есть ньюансы. Иногда скорость ответа или скорость работы интерфейса не критична.
-
ТЗ Создать модуль табов, который бы удовлетворял следующим условиям: 1. Активатор табов может быть любая HTML-структура с произвольным набором стилей 2. Блок с данными представляет собой любую HTML структуру. 3. Выборочные блоки с данными имеют хэлп-блоки, расположенные в другом месте кода. 4. Все блоки в коде должны идти порционно: активатор + блок с данными + хэлп 5. Хэлп блоки могут содержать ссылки, которые будут показывать связанные хэлп-блоки из уже имеющихся. 6. В хэлп-блоках могут содержаться ссылки, которые переключают на нужный таб контент. Вот такое простое задание. Реализуйте любым методом с помощью любого фреймворка.
-
Ок. Создам тему с ТЗ
-
Как я и предполагал, есть ряд ортодоксов, которые не принимают чего-то, что не укладывается в их понимание о том, как нужно делать удобный код для интерфейсных решений. Давайте проведем эксперимент, который докажет выигрыш этой технологии по сравнении с любым фреймворком
-
Пример пятый. Нужно сделать валидацию форм <script type="text/javascript"> var validateForm = function ( container ) { try { var errData = { _errCnt: 0 }; GSC_launch( container, 'validate_form', { errData: errData } ); // передаем обходчику как параметр объект, в который будут собраны все ошибки валидации GSC_setValAndLaunch ( 'valid', !( errData._errCnt ), container, { errData: errData } ); // запускаем событие показывания ошибок валидации, или сабмита формы } catch ( e ) { return false }; }; </script> <form action="index.html" method="GET" id="form1" SC="sc_submit_form:valid"> <div class="errorBox hiddenBlock" SC="sc_hide_node:valid"> <h3>Ошибка!</h3> <div>Вы заполнили не полностью или с ошибками все необходимые поля</div> </div> <div class="formContent"> <div class="formLine"> <b>Логин: <em>*</em></b> <input type="text" name="login" SC="sc_form_not_empty:validate_form"> <span class="errorMsg hiddenBlock" SC="sc_show_error:valid:login">« поле обязательное к заполнению</span> </div> <div class="formLine"> <b>Пароль: <em>*</em></b> <input type="password" name="pass" SC="sc_form_not_empty:validate_form|sc_form_not_different:validate_form:passwords"> <span class="errorMsg hiddenBlock" SC="sc_show_error:valid:pass">« поле обязательное к заполнению</span> <span class="errorMsg hiddenBlock" SC="sc_show_error:valid:passwords">« пароли должны совпадать</span> </div> <div class="formLine"> <b>Пароль еще раз: <em>*</em></b> <input type="password" name="pass2" SC="sc_form_not_empty:validate_form|sc_form_not_different:validate_form:passwords"> <span class="errorMsg hiddenBlock" SC="sc_show_error:valid:pass2">« поле обязательное к заполнению</span> </div> <div class="formLine"> <b>Дата рождения:</b> <input type="text" name="dob"> </div> </div> </form> <div class="actionBlock"> <a href="#" onclick="validateForm( 'form1' ); return false;">отправить данные</a> </div>
-
Пример третий. Нам нужно создать некую менюшку, которая будет иметь по умолчанию отмеченный пункт меню, которой легко изменять дизайн. Я использовал для инициализации SC при загрузке страницы свою примитивную функцию $addEventListener. <head> <script type="text/javascript"> $addEventListener( window, "load", function(){ GSC_launch( document.getElementsByTagName("BODY").item( 0 ) ) } ); </script> </head> <div class="menuBlock"> <a href="#" onclick="GSC_setValAndLaunch( 'menu', 1, $getParentByClassName( this, 'menuBlock' ) ); return false;" SC="sc_apply_class_by_id:menu:1:active--allowNonDirect" class="menuItem" >Пункт меню 1</a> <a href="#" onclick="GSC_setValAndLaunch( 'menu', 2, $getParentByClassName( this, 'menuBlock' ) ); return false;" SC="sc_apply_class_by_id:menu:2:active--allowNonDirect" class="menuItem" >Пункт меню 2</a> <a href="#" onclick="GSC_setValAndLaunch( 'menu', 3, $getParentByClassName( this, 'menuBlock' ) ); return false;" SC="sc_apply_class_by_id:menu:3:active2--allowNonDirect" class="menuItem" >Пункт меню 3 особый</a> <a href="#" onclick="GSC_setValAndLaunch( 'menu', 4, $getParentByClassName( this, 'menuBlock' ) ); return false;" SC="sc_apply_class_by_id:menu:4:active--allowNonDirect" class="menuItem" >Пункт меню 4</a> </div> <script type="text/javascript"> GSC_setVal( 'menu', 1 ); // Базовая инициализация </script> При базовой инициализации мы установили некую переменную menu равную 1. После загрузки страницы будет запущен нетипизированный обходчик дерева. Выполнены будут только те обработчики, которые имеют опцию --allowNonDirect Так как у нас контроллер имеет значение menu=1, то первому элементу, у которого первый параметр обработчику совпадает с значением контроллера, будет присвоен класс, который указан как второй параметр SC-обработчика. Вуаля, менюшка готова. Пример четвертый Усложняем задачу, теперь нам надо сделать переключатель контента на этой менюшке. Так как контент будет генериться автоматически, то располагаем переключатель рядом с контейнером. Так проще для сервера, так как не надо два раза проходить по одному и тому-же циклу. Для простоты добавляем функцию, которая будет переключать табы. var activateMenu = function ( node, container, stateVal ) { try { GSC_setValAndLaunch( 'menu', stateVal, $getParentByClassName( node, 'menuBlock' ) ); GSC_launch( container, 'menu', { levels: 1, propagation: "childNodes" } ); // состояние menu уже установлено, достаточно запустить обход дерева. // levels указывает на то, что нужно исполнять только обработчики первого уровня // propagation указывает на то, что нужно обходить только дочерние элементы, дабы не углубляться в дерево } catch ( e ) { return false; } }; <div class="menu"> <div id="menuBlock1" class="menuBlock"></div> <!-- Сюда переносятся активаторы--> <div id="menuContent1" class="menuContent"> <a href="#" onclick="activateMenu( this, 'menuContent1', 1 ); return false;" SC="sc_apply_class_by_id:menu:1:active--allowNonDirect|sc_move_node:move" class="menuItem" >Пункт меню 1</a> <div class="menuContentBox hiddenBlock" SC="100*sc_show_node:menu|sc_show_content_by_id:menu:1--allowNonDirect"> Контент 1 </div> <a href="#" onclick="activateMenu( this, 'menuContent1', 2 ); return false;" SC="sc_apply_class_by_id:menu:2:active--allowNonDirect|sc_move_node:move" class="menuItem" >Пункт меню 2</a> <div class="menuContentBox hiddenBlock" SC="100*sc_show_node:menu|sc_show_content_by_id:menu:2--allowNonDirect"> Контент 2 </div> <a href="#" onclick="activateMenu( this, 'menuContent1', 3 ); return false;" SC="sc_apply_class_by_id:menu:3:active--allowNonDirect|sc_move_node:move" class="menuItem" >Пункт меню 3</a> <div class="menuContentBox hiddenBlock" SC="100*sc_show_node:menu|sc_show_content_by_id:menu:3--allowNonDirect"> Контент 3 </div> <a href="#" onclick="activateMenu( this, 'menuContent1', 4 ); return false;" SC="sc_apply_class_by_id:menu:4:active--allowNonDirect|sc_move_node:move" class="menuItem" >Пункт меню 4</a> <div class="menuContentBox hiddenBlock" SC="100*sc_show_node:menu|sc_show_content_by_id:menu:4--allowNonDirect"> Контент 4 </div> <a href="#" onclick="GSC_setValAndLaunch( 'menu', '-1', 'menuBlock1' ); GSC_launch( 'menuContent1', 'menu', { levels: 100 } ); return false;" SC="sc_apply_class_by_id:menu:-1:active2--allowNonDirect|sc_move_node:move" class="menuItem" >Показать все</a> </div> </div> <script type="text/javascript"> GSC_setVal( 'menu', 1 ); // Базовая инициализация GSC_launch( 'menuContent1', 'move', { moveTo: "menuBlock1" } ); // Перемещаем переключатели табов в нужное место. </script> Мы немного меняем структуру HTML, для того, чтобы эффективно использовать SC. Немного про уровни, которые тут используются. Нода может реагировать на одно и то же событие, которое было запущено с разными уровнями запуска, поэтому будут запущены только те обработчики, у которых совпадает уровень события. Это позволяет не плодить названия имен контроллеров. Это лежит под носом, но все пошли по пути фреймворков. Самое простое решение - самое эффективное.