Полезная информация

Пользователи не любят читать документацию. Станьте оригинальным, будьте не как все. Ознакомьтесь с нашей базой знаний.

№2607-02-2009 00:10:14

aroma
Участник
 
Группа: Members
Зарегистрирован: 05-02-2009
Сообщений: 3
UA: Firefox 3.0

Re: JavaScript onclick

Мужики, может кто-нибудь написать код на основе этого скрипта....
Кнопка1 Кнопка2, Слой1 Слой2. Нажимаю Кнопка1 показывается Слой1, нажимаю Кнопка2, Слой1 исчезает, а на его месте появляется Слой2 и так далее... Это трудно? Если очень, то не надо. Если можно, буду благодарен.

Отсутствует

 

№2707-02-2009 14:24:34

Beregost
Участник
 
Группа: Members
Откуда: Россия.
Зарегистрирован: 02-02-2009
Сообщений: 9
UA: Chrome 1.0

Re: JavaScript onclick

Я и так использую в разметке и при решении задачи раскрывающегося меню листы стилей с двумя классами - hide и show.

stoneflash пишет

Добавьте для ссылок стиль
Код:

outline: none;
Точно не помню, но, вроде, так.

спасибо, помогло. Вообще почитав про FF я очень им заинтересовался, ведь он придерживается нормативов, а это значит что следует стремится к тому, чтобы именно в FF всё работало хорошо (тогда я освою именно нормативы и стандарты, что гораздо важнее пропроитарных игрищ). Инструменты, которыми я могу дополнить данный браузер очень помогают мне в процессе разработки и это тоже несомненный плюс.
Теперь начались сложности с Оперой. Там браузер при повторных щелчках по ссылка так и норовит выделить текст ссылки, а мне этого не нужно.

Кстати, решил вопрос с количеством функций - решение оказалось тривиальным, даже удивляюсь как не дошёл до этого сразу. Просто использую теперь одну функцию с переменными, где переменной является id элемента. В итоге у меня одна короткая функция, которая работает правильно где угодно.
Также начались проблемы с Safari от Apple. Они заключаются в кодировке содержимого страницы. Даже не смотря на мета тег:
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
этот браузер упорно отказывается понимать в какой кодировке его следует сразу выводить содержимое :(.

Отредактировано Beregost (07-02-2009 14:37:36)

Отсутствует

 

№2809-02-2009 10:52:31

piontr
Участник
 
Группа: Members
Зарегистрирован: 25-11-2008
Сообщений: 14
UA: Firefox 3.0

Re: JavaScript onclick

Вопрос оказался актуальным и пришлось сесть за написание кода, хотя этим мне
приходиться заниматься крайне редко. Я не ставил перед собой цель получить
универсальный код обработки кликов для любого браузера. Приведенные коды
следует считать концептуальным подходом, как направление для дальнейших исследований.
Решая эту задачу с использованием DOM, пришлось столкнуться с тем, что IE и эти
стандарты игнорирует (как и многие другие).
Вот эти коды: 
<html>
    <head>
        <title>Пример кода, который прекрасно работает в FF</title>
        <link rel="stylesheet" type="text/css" href="ex.css"/>
    </head>
    <body>
           <script  language="JavaScript" type="text/javascript">
                function oneclick(elem)
                {   
                    var x1=elem.parentNode.childNodes;
                    alert('идет обработка узла '+x1.item(3).textContent);
                    if (elem.textContent=='+')
                        {elem.textContent='-'
                        x1.item(4).className='cl';
                        x1.item(5).className='op';
                        }
                    else
                        {elem.textContent='+'
                        x1.item(5).className='cl';
                        x1.item(4).className='op';
                        }
                    } 
        </script>        
        <div> <span class="ind" onclick="oneclick(this)">+</span> <span >узел1</span><span class='op'>закрыт</span><span class='cl'>открыт</span></div>
        <div> <span class="ind" onclick="oneclick(this)">+</span> <span >узел2</span><span class='op'>закрыт</span><span class='cl'>открыт</span></div>
        <div> <span class="ind" onclick="oneclick(this)">+</span> <span >узел3</span><span class='op'>закрыт</span><span class='cl'>открыт</span></div>
        <div> <span class="ind" onclick="oneclick(this)">+</span> <span >узел4</span><span class='op'>закрыт</span><span class='cl'>открыт</span></div>
    </body>
</html>

*******************************
<html>
    <head>
        <title>Пример кода, который прекрасно работает в IE</title>
        <link rel="stylesheet" type="text/css" href="ex.css"/>
    </head>
    <body>
           <script  language="JavaScript" type="text/javascript">
                function oneclick(elem)
                {
                    var x1=elem.parentNode.childNodes;
           
                    alert('идет обработка узла '+x1[2].innerHTML);
       
                    if (elem.innerHTML=='+')
                        {elem.innerHTML='-'
                        x1.item(3).className='cl';
                        x1.item(4).className='op';
                        }
                    else
                        {elem.innerHTML='+'
                        x1.item(4).className='cl';
                        x1.item(3).className='op';
                        }
                    } 
        </script>        
        <div> <span class="ind" onclick="oneclick(this)">+</span> <span >узел1</span><span class='op'>закрыт</span><span class='cl'>открыт</span></div>
        <div> <span class="ind" onclick="oneclick(this)">+</span> <span >узел2</span><span class='op'>закрыт</span><span class='cl'>открыт</span></div>
        <div> <span class="ind" onclick="oneclick(this)">+</span> <span >узел3</span><span class='op'>закрыт</span><span class='cl'>открыт</span></div>
        <div> <span class="ind" onclick="oneclick(this)">+</span> <span >узел4</span><span class='op'>закрыт</span><span class='cl'>открыт</span></div>
    </body>
</html>
**код для файла ex.cpp
        span {margin-left:3pt;
        }

        .ind {    cursor:pointer;
        }

        .op {display:inline;
        }

        .cl {display:none;
        }
    ******
однако, эти решения связаны с однослойными задачами, что значительно проще
многослойных. Попробуйте организовать обработку кликов в такой
структуре (именно к ним относились мои ранние сентенции)
<div onclick="oneclick(this)"> узел1
  <div onclick="oneclick(this)"> узел1.1
    <div onclick="oneclick(this)"> узел1.1.1 </div>
    <div onclick="oneclick(this)"> узел1.1.2 </div>
   </div>
  <div onclick="oneclick(this)"> узел1.2
    <div onclick="oneclick(this)"> узел1.2.1 </div>
    <div onclick="oneclick(this)"> узел1.2.2 </div>
   </div>
</div>   
Для проведения экспериментов достаточно при щелчке изменить цвет контента
соответствующего div-а и только одного.
Удачи всем на WEB-дорогах!

Отсутствует

 

№2909-02-2009 11:11:56

stoneflash
Хитрый Лис
 
Группа: Extensions
Откуда: Msk
Зарегистрирован: 02-04-2006
Сообщений: 4341
UA: Firefox 3.0

Re: JavaScript onclick

piontr
А если добавить ещё один элемент?
И вообще не понятно, что этот код делает. Сначала видим три элемента, потом - два, третий пропадает куда-то.
Какую задачу пытались решить?


«I actually hate programming, but I love solving problems» © Rasmus Lerdorf, PHP's Creator

Отсутствует

 

№3009-02-2009 12:06:29

piontr
Участник
 
Группа: Members
Зарегистрирован: 25-11-2008
Сообщений: 14
UA: Firefox 3.0

Re: JavaScript onclick

stoneflash пишет

piontr
А если добавить ещё один элемент?
И вообще не понятно, что этот код делает. Сначала видим три элемента, потом - два, третий пропадает куда-то.
Какую задачу пытались решить?

Это практически Ваша задача с использованием функции
function showHide(id,textWhenHidden,textWhenVisible)
1.Вместо того, чтобы создавать неоднородность за счет использования id (представьте, что эти структуры генерируются на фазе исполнения, где контролировать id практически невозможно.
2.В исходной задаче сочетание <p> и следующего за ним <span>, мягко выражаясь, не вполне корректно, так как  <span> всегда окажется на новой строке после </p>.Поэтому в задаче эти структуры заменены на div, с вложением нескольких spam-ов. 
3. Задача которая рассмотрена в примерах может быть сформулирована следующим образом:
Написать код, который работает со структурами, подобными пунктам меню. При этом фиксировать, какой пункт выбран (сообщение alert с контентом этого элемента (не id)) и что с этим пунктом происходит (открыт - закрыт с одновременным изменением + на -).

Отсутствует

 

№3109-02-2009 15:49:34

stoneflash
Хитрый Лис
 
Группа: Extensions
Откуда: Msk
Зарегистрирован: 02-04-2006
Сообщений: 4341
UA: Firefox 3.0

Re: JavaScript onclick

1.Вместо того, чтобы создавать неоднородность за счет использования id (представьте, что эти структуры генерируются на фазе исполнения, где контролировать id практически невозможно.

Хм. Что за ситуация такая?

2.В исходной задаче сочетание <p> и следующего за ним <span>, мягко выражаясь, не вполне корректно, так как  <span> всегда окажется на новой строке после </p>.Поэтому в задаче эти структуры заменены на div, с вложением нескольких spam-ов.

Можно просто заменить название тега на любой другой inline.

Написать код, который работает со структурами, подобными пунктам меню. При этом фиксировать, какой пункт выбран (сообщение alert с контентом этого элемента (не id)) и что с этим пунктом происходит (открыт - закрыт с одновременным изменением + на -).

А кто сказал ссылка открытия\скрытия блоков должна быть в одном контейнере с самим блоком? В вашем примере получается жёсткая привязка. Как только выносим блок из основного меню - код перестаёт работать, так как уже у блоков не один родитель.

зы.
Какой-то странный спорчик вышел :) Непонятно, что решаем и к чему прийти должны :)


«I actually hate programming, but I love solving problems» © Rasmus Lerdorf, PHP's Creator

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]