1 Тема от wildwolf007 (изменено: wildwolf007, 2014-01-27 22:02:30)

  • wildwolf007
  • Участник
  • Неактивен

Тема: Динамическое меню InnerHTML

Прошу Вашей помощи.

Хочу организовать динамическое меню, но что-то не получается. Ну допустим нажимаем на первую кнопку появляется вторая кнопка, а после того как нажимаем на вторую кнопку появляется первая кнопка, но в нашем случае ничего этого не получается кнопка перестает работать после нажатия.


<html>
    <head>
        <title>Динамические кнопки</title>
        <hta:application
        Id = "oHTA"
        ApplicationName = "MyTestApplication"
        Border = "Dialog"
        Icon = "MyHTA_files\MyHTA.ico"
        InnerBorder = "No"
        MaximizeButton = "No"
        MinimizeButton = "No"
        Scroll = "No"
        Selection = "No"
        ShowInTaskBar = "No"
        SingleInstance = "Yes"
        />
    </head>
    
    <body>
        <div id="DynamicContent_Div">
            <input type="button" name="OK_1" id="OK_1" value="Первая кнопка">
        </div>
    </body>
    
    <script language="VBScript">
    
    
    Function OK_1_OnClick()
    MsgBox 1
    
    Dim Menu
    Menu = "<div id=""DynamicContent_Div"">"
    Menu = Menu & "<input type=""button"" name=""OK_2"" id=""OK_2"" value=""Вторая кнопка"">"
    Menu = Menu & "</div>"
    DynamicContent_Div.InnerHTML = Menu
    
    End Function
    
    Function OK_2_OnClick()
    MsgBox 2
    
    Dim Menu
    Menu = "<div id=""DynamicContent_Div"">"
    Menu = Menu & "<input type=""button"" name=""OK_1"" id=""OK_1"" value=""Первая кнопка"">"
    Menu = Menu & "</div>"
    DynamicContent_Div.InnerHTML = Menu
    
    End Function
    
    </script>
    
</html>

Описание как должно работать 2й пример:
Если нажать на первую кнопку должна показаться только вторая кнопка, а первая исчезнуть - работает, но после того как появляется вторая ее функционал уже недоступен. Тоже самое и со второй кнопкой.

Если нажать на кнопку 3 то исчезают первые 2 кнопки - работает, И потом если нажать на кнопку 4 то появляется 1-я и 2-я кнопки, но уже данные кнопки становятся нерабочие.

Вот код примера:

<html>
    <head>
        <title>Динамические кнопки</title>
        <hta:application
        Id = "oHTA"
        ApplicationName = "MyTestApplication"
        Border = "Dialog"
        Icon = "MyHTA_files\MyHTA.ico"
        InnerBorder = "No"
        MaximizeButton = "No"
        MinimizeButton = "No"
        Scroll = "No"
        Selection = "No"
        ShowInTaskBar = "No"
        SingleInstance = "Yes"
        />
    </head>
    
    <body>
        <div id="DynamicContent_Div">
            <input type="button" name="OK_1" id="OK_1" value="Первая кнопка показывает сообщение 1">
            <input type="button" name="OK_2" id="OK_2" value="Вторая кнопка показывает сообщение 2">
        </div>    
        <div id="DynamicContent_Div_2">
            <input type="button" name="OK_3" id="OK_3" value="Третья кнопка убрает 1-ю и 2-ю кнопку">
            <input type="button" name="OK_4" id="OK_4" value="Четвертая кнопка показывает 1-ю и 2-ю кнопку и принажатии на 1-ю и 2-ю кнопку функционал должен остаться">
        </div>
    </body>
    
    <script language="VBScript">
    
    
    Function OK_1_OnClick()
    MsgBox 1
    Dim Menu
    Menu = "<div id=""DynamicContent_Div"">"
    Menu = Menu & "<input type=""button"" name=""OK_2"" id=""OK_2"" value=""Вторая кнопка показывает сообщение 2"">"
    Menu = Menu & "</div>"
    DynamicContent_Div.InnerHTML = Menu
    End Function
    
    Function OK_2_OnClick()
    MsgBox 2
    Dim Menu
    Menu = "<div id=""DynamicContent_Div"">"
    Menu = Menu & "<input type=""button"" name=""OK_1"" id=""OK_1"" value=""Первая кнопка показывает сообщение 1"">"
    Menu = Menu & "</div>"
    DynamicContent_Div.InnerHTML = Menu
    End Function
    
    Function OK_3_OnClick()
    MsgBox 3
    Dim Menu
    Menu = " "
    DynamicContent_Div.InnerHTML = Menu
    End Function
    
    Function OK_4_OnClick()
    MsgBox 4
    Dim Menu
    Menu = "<div id=""DynamicContent_Div"">"
    Menu = Menu & "<input type=""button"" name=""OK_1"" id=""OK_1"" value=""Первая кнопка показывает сообщение 1"">"
    Menu = Menu & "<input type=""button"" name=""OK_2"" id=""OK_2"" value=""Вторая кнопка показывает сообщение 2"">"
    Menu = Menu & "</div>"
    DynamicContent_Div.InnerHTML = Menu
    End Function
    
    </script>
    
</html>

2 Ответ от JSmаn

  • JSmаn
  • Разработчик
  • Неактивен

Re: Динамическое меню InnerHTML

wildwolf007, никак не получается у Вас оформить название темы должным образом?

3 Ответ от Xameleon

  • Xameleon
  • Разработчик
  • Неактивен

Re: Динамическое меню InnerHTML

wildwolf007 логично что у вас кнопки перестают работать. Вы каждый раз генерите их динамически и соответственно обработчики событий к новым кнопкам не привязаны. Если хотите использовать такую технологию, то тогда нужно их (события) привязывать. Но мне кажется проще использовать уже созданные объекты. Просто делать их невидимыми. Или это не подходит ?


<html>
    <head>
        <title>Динамические кнопки</title>
        <hta:application
        Id = "oHTA"
        ApplicationName = "MyTestApplication"
        Border = "Dialog"
        Icon = "MyHTA_files\MyHTA.ico"
        InnerBorder = "No"
        MaximizeButton = "No"
        MinimizeButton = "No"
        Scroll = "No"
        Selection = "No"
        ShowInTaskBar = "Yes"
        SingleInstance = "Yes"
        />
    </head>
    
    <style>
    /* По умолчанию делаем все кнопки класса "btn" скрытыми */
    .btn {
        display:none;
    }
    </style>
    
    <body>
        <div id="DynamicContent_Div">
            <button class="btn" id="btn1">Первая кнопка</button>
            <button class="btn" id="btn2">Вторая кнопка</button>
            <button class="btn" id="btn3">Третья кнопка</button>
        </div>
    </body>
    
    <script language="VBScript">
    Sub window_onload()
        Show btn1
    End Sub
    
    Sub btn1_onclick()
        MsgBox "Вы нажали первую кнопку"
        Hide btn1
        Show btn2
    End Sub

    Sub btn2_onclick()
        MsgBox "Ого ! А теперь нажали вторую O_o."
        Hide btn2
        Show btn3
    End Sub

    Sub btn3_onclick()
        MsgBox "Ну вы упёртый ! ! ! Вы нажали даже третью кнопку ! ! ! И что ж теперь делать ???!"
        Hide btn3
        Show btn1
    End Sub
    
    Sub Hide(Object)
        Object.style.display = "none"
    End Sub
    
    Sub Show(Object)
        Object.style.display = "inline"
    End Sub
    </script>
    
</html>
Передумал переделывать мир. Пашет и так, ну и ладно. Сделаю лучше свой !

4 Ответ от wildwolf007

  • wildwolf007
  • Участник
  • Неактивен

Re: Динамическое меню InnerHTML

Спасибо Вам огромное. Вы уже очень помогли. Я два вечера просидел потом решил задать вопрос на форуме.

Скажите, а видимость и невидимость как лучше делать? Используя просто пробел ? " " - это делаем невидимым, а как сделать кнопки видимыми?

5 Ответ от wildwolf007

  • wildwolf007
  • Участник
  • Неактивен

Re: Динамическое меню InnerHTML

Спасибо огромное.
Все разобрался.
Hide btn1
Show btn2

6 Ответ от wildwolf007

  • wildwolf007
  • Участник
  • Неактивен

Re: Динамическое меню InnerHTML

Скажите, а InnerHTML в каких случаях лучше использовать? Я смотрю Вы использовали стили.
И можно ли было сгенерить новую кнопку при помощи InnerHTML, а потом повесить на нее обработчик события? Как ранее я указывал в сообщении?

7 Ответ от Rumata

  • Rumata
  • Разработчик
  • Неактивен

Re: Динамическое меню InnerHTML

wildwolf007 пишет:

Скажите, а InnerHTML в каких случаях лучше использовать? Я смотрю Вы использовали стили.

Лучше избегать его частого использования. Мне видится единственный полезный случай использования innerHTML - вставка фрагмента текста в уже существующую разметку. Возможный вариант - разметка была сгенерирована на стороне сервера и была доставлена с помощью AJAX.

wildwolf007 пишет:

И можно ли было сгенерить новую кнопку при помощи InnerHTML, а потом повесить на нее обработчик события? Как ранее я указывал в сообщении?

Можно, но не нужно.

Вы правильно заметили, что коллега Xameleon использовал стили - это хорошая практика менять способ отображения эелементов с помощью стилей: они для этого и были придуманы. Всю разметку (за исключением выше указанного варианта) лучше хранить в теле страницы (внутри тега body) с установленным стилем display: none и показывать/скрывать по мере необходимости.

Просто следуйте установкам:
-- html - разметка, то что будет видно на экране
-- css - стили, то как элементы html будут отображаться
-- js/vbs - код, то как элементы html будут взаимодействовать друг с другом и с внешним миром

И смешивать их не стоит. Причина одна: легкость сопровождения.

( 2 * b ) || ! ( 2 * b )

8 Ответ от wildwolf007

  • wildwolf007
  • Участник
  • Неактивен

Re: Динамическое меню InnerHTML

Спасибо огромное. Тему можно закрывать. Все понятно.

9 Ответ от Serge Yolkin

  • Serge Yolkin
  • Разработчик
  • Неактивен

Re: Динамическое меню InnerHTML

Кроме скрытия/показа объектов, можно ещё использовать атрибут disabled:

Object.disabled=true/false

10 Ответ от Rumata

  • Rumata
  • Разработчик
  • Неактивен

Re: Динамическое меню InnerHTML

Serge Yolkin пишет:

Кроме скрытия/показа объектов, можно ещё использовать атрибут disabled

Только для элементов формы.

( 2 * b ) || ! ( 2 * b )

11 Ответ от Xameleon

  • Xameleon
  • Разработчик
  • Неактивен

Re: Динамическое меню InnerHTML

Rumata пишет:
Serge Yolkin пишет:

Кроме скрытия/показа объектов, можно ещё использовать атрибут disabled

Только для элементов формы.

С чего бы вдруг ? O_o Не согласен.


<html>
    <body>
        <input disabled value="заблокированное поле ввода">
        </body>
</html>
Передумал переделывать мир. Пашет и так, ну и ладно. Сделаю лучше свой !

12 Ответ от Serge Yolkin

  • Serge Yolkin
  • Разработчик
  • Неактивен

Re: Динамическое меню InnerHTML

<p>kjkhgkjhgkjhgkjhg</p>
<p disabled>etuyrthfbfhgsrthyh</p>
<p>iuoluynrbrgwrbetnrt</p>

13 Ответ от Rumata

  • Rumata
  • Разработчик
  • Неактивен

Re: Динамическое меню InnerHTML

Кнопки, поля ввода, флажки, переключатели, списки - все это эелементы формы. Более точно - управляющие эементы формы. Для них определен атрибут disabled, который будучи установленным у элемента, запрещает взаимодействие с пользователем. Атрибут disabled html-эдемента сопоставляется с булевым свойством disabled соответствующего объекта в DOM. Для других же элементов страницы атрибут disabled не определен. 


<p id="p1" disabled="to be or not to be">Am I disabled?</p>
<input id="p2" disabled value="disabled">
<input id="p3" value="not disabled">

<script>

alert([
    document.getElementById('p1').disabled, 
    document.getElementById('p2').disabled, 
    document.getElementById('p3').disabled, 
]);

</script>
( 2 * b ) || ! ( 2 * b )

14 Ответ от Xameleon

  • Xameleon
  • Разработчик
  • Неактивен

Re: Динамическое меню InnerHTML

Rumata Но без формы то тоже работает. )

Передумал переделывать мир. Пашет и так, ну и ладно. Сделаю лучше свой !

15 Ответ от Rumata

  • Rumata
  • Разработчик
  • Неактивен

Re: Динамическое меню InnerHTML

Xameleon пишет:

Rumata Но без формы то тоже работает. )

Что работает?

( 2 * b ) || ! ( 2 * b )

16 Ответ от Xameleon

  • Xameleon
  • Разработчик
  • Неактивен

Re: Динамическое меню InnerHTML

Rumata... Блокирование элементов ввода. Пример я привёл выше. O_o

P.S Кажется понял, что Вы имели в виду. Только элементы ввода предназначенные для формы (input,textarea,button и т.п), а на остальные тэги это не распространяется. Надо мне меньше по ночам за компом сидеть. Мозг тупеет.

Передумал переделывать мир. Пашет и так, ну и ладно. Сделаю лучше свой !

17 Ответ от Serge Yolkin

  • Serge Yolkin
  • Разработчик
  • Неактивен

Re: Динамическое меню InnerHTML

Господа, выше я привёл пример, где блокируются абзацы - ни разу не элементы формы... Или у Вас это не работает?

18 Ответ от Rumata

  • Rumata
  • Разработчик
  • Неактивен

Re: Динамическое меню InnerHTML

Serge Yolkin пишет:

Господа, выше я привёл пример, где блокируются абзацы - ни разу не элементы формы... Или у Вас это не работает?

Объясните, что значит "блокируются абзацы"?

( 2 * b ) || ! ( 2 * b )

19 Ответ от Serge Yolkin

  • Serge Yolkin
  • Разработчик
  • Неактивен

Re: Динамическое меню InnerHTML

Выделяются серым, не работают обработчики событий (onclick, например) не работает атрибут contentEditable. Это не "блокируются"?

20 Ответ от Rumata

  • Rumata
  • Разработчик
  • Неактивен

Re: Динамическое меню InnerHTML

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

( 2 * b ) || ! ( 2 * b )