Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
Divil
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
1

Выскальзывающая панель

01.07.2013, 20:51. Просмотров 988. Ответов 11
Метки нет (Все метки)

Всем привет!
Начал изучать js.
Вот возник вопрос. Можно ли ниже указанный код преобразовать так, чтобы в строке адреса вылазило что-то другое вместо # и панель появлялась плавно, а не так резко?
и как сделать так, чтобы при переключении на другую панель вторая автоматически закрывалась?
Javascript
1
2
3
4
5
6
7
8
function Hide(layer) {
        var blok = document.getElementById(layer)
        if (blok.style.display == 'none' || blok.style.display == '') {
            blok.style.display = 'block';
        } else {
            blok.style.display = 'none';
        }           
    };
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<a id="open" href="#" OnClick="Hide('linkblock1')">1</a>
    <div id="linkblock1">
      <fieldset class="create">
        <form action="save_create.php" method="POST">Привет!</form>
      </fieldset>
    </div>
    <a id="open" href="#" OnClick="Hide('linkblock2')">2</a>
    <div id="linkblock2">
      <fieldset class="create">
        <form action="save_create.php" method="POST">Пока!</form>
      </fieldset>
    </div>
Благодарен за любую помощь!
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
01.07.2013, 20:51
Ответы с готовыми решениями:

Панель BB кодов
Создаю панель BB кодов, как сделать следущее: Как мне определить где...

Выдвижная панель
Доброго времени суток! :) Как истинный новичек в JS сижу и уже долго ломаю...

языковая панель
есть картинка , там все указано (выбирается количество допустимых языков) ,...

Кроссдоменная панель навигации
Добрый день! Решаю одну задачку с созданием кроссдоменной панельки управления,...

скрыть панель переводчика
подскажите пожалусто как можно скрыть выпадающюю панель переводчика .Где в коде...

11
parikmaher534
38 / 38 / 6
Регистрация: 16.11.2011
Сообщений: 112
01.07.2013, 22:10 2
1. Чтобы небыло #(hash) можно использовать History API ну а для старых браузеров мутить что-то с iframe наверно
2. Чтобы выезжало плавно можно сделать через css3 transitions. А браузеры которые не поддерживают пусть делают через js( Таймер и изменение opacity ). Или просто использовать jQuery $(block).show(время появление в ms)
1
Divil
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
02.07.2013, 21:40  [ТС] 3
а что насчет
Цитата Сообщение от Divil Посмотреть сообщение
и как сделать так, чтобы при переключении на другую панель вторая автоматически закрывалась?
этого?
и я сделал на jquery:
Javascript
1
2
3
4
function Hide(layer) {
            var block = document.getElementById(layer)
            $(block).show(1000)     
        };
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<a href="#" OnClick="Hide('1')">1</a>
    <div id="1">
      <fieldset>
        <form action="save_create.php" method="POST">
        Привет!
        <br /><button type="submit" name="save" class="main_buttons">Сохранить</button>
        </form>
      </fieldset>
    </div><br />
    <a href="#" OnClick="Hide('2')">2</a>
    <div id="2">
      <fieldset>
        <form action="save_create.php" method="POST">
        Пока!
        <br /><button type="submit" name="save" class="main_buttons">Сохранить</button>
        </form>
      </fieldset>
    </div>
выдвигаться то выдвигается, но обратно не задвигается...что не так?(в jquery я не разбираюсь пока..)
0
parikmaher534
38 / 38 / 6
Регистрация: 16.11.2011
Сообщений: 112
03.07.2013, 10:17 4
Добавлено через 14 минут
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class='panel'>
      <a href='#' class='button'>Show/Hide</a>
      <fieldset>
        <form action="save_create.php" method="POST">
        Чё-то!
        <br /><button type="submit" name="save" class="main_buttons">Сохранить</button>
        </form>
      </fieldset>
    </div> 
 
   <div class='panel'>
      <a href='#' class='button'>Show/Hide</a>
      <fieldset>
        <form action="save_create.php" method="POST">
        Привет!
        <br /><button type="submit" name="save" class="main_buttons">Сохранить</button>
        </form>
      </fieldset>
    </div>
    
    <div class='panel'>
      <a href='#' class='button'>Show/Hide</a>
      <fieldset>
        <form action="save_create.php" method="POST">
        Пока!
        <br /><button type="submit" name="save" class="main_buttons">Сохранить</button>
        </form>
      </fieldset>
    </div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  var buttons = $('.button');
 
  buttons.on('click', function(e) {
    
    //Прячет открытый попап
    $('.button[data-visible=yes]').next().hide();  
 
    //Показывает текущий если он ещё не открыт
    if( !$(this).data('visible') ) {
        $(this).next().show(1000); 
    } 
    //Если панель была открыта - убираем модификатор
    else {
        $(this).removeAttr('data-visible');
    }
 
    //Ставит модификатор - что попап открыт
    $(this).data('visible', 'yes');
 
  });
Тут я сделал через модификатор ибо если у вас будет 10 панелей - будет экономичней длясистемы. Также еще можно сделать через делегирование событий. Чтобы не вышать click на каждую панель - это ещё будет экономить ресурсы. Код не проверял - но должен работать.
1
Divil
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
04.07.2013, 11:39  [ТС] 5
Цитата Сообщение от parikmaher534 Посмотреть сообщение
buttons.on('click', function(e) {
здесь я так понимаю надо
Javascript
1
buttons.on('click', function(e)) {
так?
и код все равно почему то не работает...я не догоняю почему(
0
parikmaher534
38 / 38 / 6
Регистрация: 16.11.2011
Сообщений: 112
04.07.2013, 15:04 6
Цитата Сообщение от Divil Посмотреть сообщение
здесь я так понимаю надо
Javascript
1
buttons.on('click', function(e)) {
так?
и код все равно почему то не работает...я не догоняю почему(
А что именно не работает? В консоли есть ошибки?
0
Divil
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
04.07.2013, 15:39  [ТС] 7
на картинке изображено то что происходит, при открытии страницы.
Они изначально не скрываются, и вообще не скрываются или показываются...
пробовал сам узнать в чем дело...только так и не понял в чем проблема
я здесь даже проверил Онлайн проверка кода тоже не работает
0
Миниатюры
Выскальзывающая панель  
parikmaher534
38 / 38 / 6
Регистрация: 16.11.2011
Сообщений: 112
04.07.2013, 17:13 8
Цитата Сообщение от Divil Посмотреть сообщение
на картинке изображено то что происходит, при открытии страницы.
Они изначально не скрываются, и вообще не скрываются или показываются...
пробовал сам узнать в чем дело...только так и не понял в чем проблема
я здесь даже проверил Онлайн проверка кода тоже не работает
Изначально они не скрываются потомучто вы наверно не прописали им в стилях display: none;

Если будет время, вечером код напишу и проверю
1
Divil
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
04.07.2013, 19:53  [ТС] 9
я тут поэкспериментировал. Результат таков: ниже указанный код выполняется так: панель открывается и все, не закрывается никак, если скрипт поместить в между тегами head то ничего не работает(
CSS
1
2
3
.panel{
    display: none;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<html>
<head>
    <!-- Scripts -->
    <script type="text/javascript" language="javascript" src="template/media/js/jquery.js"></script>
</head>
<body>
    
   <a href='#' class='button'>Show/Hide</a>
   <div class='panel'>
      <fieldset>
        <form action="save_create.php" method="POST">
        Чё-то!
        <br /><button type="submit" name="save" class="main_buttons">Сохранить</button>
        </form>
      </fieldset>
    </div> 
 
   
   <a href='#' class='button'>Show/Hide</a>
   <div class='panel'>
      <fieldset>
        <form action="save_create.php" method="POST">
        Привет!
        <br /><button type="submit" name="save" class="main_buttons">Сохранить</button>
        </form>
      </fieldset>
    </div>
    
    
   <a href='#' class='button'>Show/Hide</a>
   <div class='panel'>
      <fieldset>
        <form action="save_create.php" method="POST">
        Пока!
        <br /><button type="submit" name="save" class="main_buttons">Сохранить</button>
        </form>
      </fieldset>
    </div>
    
<script type="text/javascript">
 
  buttons.on('click', function(e) { 
    
    //Прячет открытый попап
    $('.button[data-visible=yes]').next().hide();  
 
    //Показывает текущий если он ещё не открыт
    if( !$(this).data('visible') ) {
        $(this).next().show(1000); 
    } 
    //Если панель была открыта - убираем модификатор
    else {
        $(this).removeAttr('data-visible');
    }
 
    //Ставит модификатор - что попап открыт
    $(this).data('visible', 'yes');
 
  });
    </script>
</body>
</html>
мои мысли истекли
0
parikmaher534
38 / 38 / 6
Регистрация: 16.11.2011
Сообщений: 112
04.07.2013, 20:28 10
Цитата Сообщение от Divil Посмотреть сообщение
я тут поэкспериментировал. Результат таков: ниже указанный код выполняется так: панель открывается и все, не закрывается никак, если скрипт поместить в между тегами head то ничего не работает(
CSS
1
2
3
.panel{
    display: none;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<html>
<head>
    <!-- Scripts -->
    <script type="text/javascript" language="javascript" src="template/media/js/jquery.js"></script>
</head>
<body>
    
   <a href='#' class='button'>Show/Hide</a>
   <div class='panel'>
      <fieldset>
        <form action="save_create.php" method="POST">
        Чё-то!
        <br /><button type="submit" name="save" class="main_buttons">Сохранить</button>
        </form>
      </fieldset>
    </div> 
 
   
   <a href='#' class='button'>Show/Hide</a>
   <div class='panel'>
      <fieldset>
        <form action="save_create.php" method="POST">
        Привет!
        <br /><button type="submit" name="save" class="main_buttons">Сохранить</button>
        </form>
      </fieldset>
    </div>
    
    
   <a href='#' class='button'>Show/Hide</a>
   <div class='panel'>
      <fieldset>
        <form action="save_create.php" method="POST">
        Пока!
        <br /><button type="submit" name="save" class="main_buttons">Сохранить</button>
        </form>
      </fieldset>
    </div>
    
<script type="text/javascript">
 
  buttons.on('click', function(e) { 
    
    //Прячет открытый попап
    $('.button[data-visible=yes]').next().hide();  
 
    //Показывает текущий если он ещё не открыт
    if( !$(this).data('visible') ) {
        $(this).next().show(1000); 
    } 
    //Если панель была открыта - убираем модификатор
    else {
        $(this).removeAttr('data-visible');
    }
 
    //Ставит модификатор - что попап открыт
    $(this).data('visible', 'yes');
 
  });
    </script>
</body>
</html>
мои мысли истекли
Подрубите js head и поместите весь ваш js код в

Javascript
1
2
3
4
5
$(function(){
 
 ..Здесь код
 
})
0
Divil
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
04.07.2013, 21:44  [ТС] 11
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
            var buttons = $('.button');
            buttons.on('click', function(e) {
            //Прячет открытый попап
            $('.button[data-visible=yes]').next().hide();  
            //Показывает текущий если он ещё не открыт
            if( !$(this).data('visible') ) {
                $(this).next().show(1000); 
            } 
            //Если панель была открыта - убираем модификатор
            else {
                $(this).removeAttr('data-visible');
            }
            //Ставит модификатор - что попап открыт
            $(this).data('visible', 'yes');
            });
        });
поместил в head, код только показывает, но не скрывает(

Добавлено через 26 минут
а slideFadeToggle можно 2 и более объектов использовать?
0
Divil
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
06.07.2013, 10:38  [ТС] 12
HTML5
1
2
3
4
<button type="button" class="main_buttons">Персональные данные</button>
    <div class='panel'>Привет</div>
<button type="button" class="main_buttons">Персональные данные</button>
    <div class='panel'>Пока</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function() {
            $('button').on('click', function() {
            
            //Прячет открытый попап
            $('button[data-visible=yes]').next().hide();  
            
            //Показывает текущий если он ещё не открыт
            if(!$(this).data('visible')) {
                $(this).next().show(800); 
            } 
            //Если панель была открыта - убираем модификатор
            else {
                $(this).removeAttr('data-visible');
            }
            //Ставит модификатор - что попап открыт
            $(this).data('visible', 'yes');
            });
        });
скрипт работает и в head и в body, но он только показывает содержимое тега div, скрывать его он не хочет почему-то(
в чем может быть проблема?
0
06.07.2013, 10:38
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
06.07.2013, 10:38

Панель проставления рейтинга контента
Всем привет. Создала тему в разделе Javascript так как не знаю к какому...

Навигационная панель Bootstrap 3. Кнопка
В наличии навигация Bootstrap 3. Она свёртывается в кнопку от 768px. Вопрос:...

Пользователи и админы на сайте панель
У меня есть форма регистраций и форма входа, мне нужен код или киньте тему...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru