VPF::Как скрывать кнопки в плагине jqDock

t77

Дата 24.8.2011, 14:16 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет

Доброе время суток.
Использую плагин jqDock для визуального эффекта кнопок...
http://www.wizzud.com/jqDock/index.php?dt=0&pg=usage

Можно ли добавлять или скрывать кнопки ??
Я читаю документацию но сделать ничего не получается. smile

Помогите плиз, очень нужно!

Gold Dragon

Дата 24.8.2011, 14:36 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71

читаю доку по ссылке, вижу это:

Цитата

You can initially hide it (display:none; or - from v1.5 - visibility:hidden;)

Может быть проблема в этом? Какая версия jQuery?

Это сообщение отредактировал(а) Gold Dragon - 24.8.2011, 14:43

--------------------

Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!

t77

Дата 24.8.2011, 15:32 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет

Вы правы есть такое в документации... Но как это применить ? Не хочет работать !
Версия jQuery, с которой я работаю - jquery-ui-1.8.7.min.js
Посмотрите пожалуйста:
Инициализация кнопок и эфекта кнопок первый раз:

Код


<html>
<head>
    <title>jqDock Example</title>
    <script type="text/javascript" src="jquery-ui-1.8.7.min.js"></script>
    <script type="text/javascript" src="jquery.jqDock.min.js"></script>    
    <script type="text/javascript">
        var Options =
          // horizontal Dock with images expanding downwards in the vertical axis...
          { align: 'bottom'
          // set the maximum minor axis (vertical) image dimension to 48px
          , size: 32
          // add labels..
          , labels: true
          // swap the GIF extension for PNG extension for the larger image...
          , source: function(i){ return this.src.replace(/gif$/,'png'); }
          };
    
        $(document).ready(function(){
            $('#menu').jqDock(Options);
        });
    </script>
    <style type="text/css">
    #main {
        width: 800px; 
        height: 100px;
        margin: 200 150 150 150;                                
    }
    </style>
</head>
<body>    
    <div id="main">    
        <div id="menu">        
          <img src="pic1.png" alt="x" title="xxx" onclick="image1"/>                                
          <img src="pic2.png" alt="y" title="yyy" onclick="image2" />
          <img src="pic3.png" alt="y" title="zzz" onclick="image3" />
                  <img src="pic4.png" alt="a" title="aaa" onclick="image4" />
                  <img src="pic5.png" alt="b" title="bbb" onclick="image5" />
                  <img src="pic6.png" alt="c" title="ccc" onclick="image6" />
                  <img src="pic7.png" alt="d" title="ddd" onclick="image7" />
                  <img src="pic8.png" alt="e" title="eee" onclick="image8" />                 
        </div>
    </div>    
</body>
</html>

Пользователь нажимает в определенное место на странице и тут мне необходимо спрятать одну из кнопок. Или наоборот пользователь нажимает в определенное место на странице и тут мне необходимо отобразить, ранее спрятанную кнопку. Не получается реализовать! smile

Помогите коллеги!

нуп

Дата 24.8.2011, 16:08 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

Да тупо поставьте всем img id и скрывайте по нужной вам ситуации. smile

t77

Дата 24.8.2011, 16:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет

я пробовал так сделать...

Код


<html>
<head>
    <title>jqDock Example</title>
    <script type="text/javascript" src="jquery-ui-1.8.7.min.js"></script>
    <script type="text/javascript" src="jquery.jqDock.min.js"></script>    
    <script type="text/javascript">
        var Options =
          // horizontal Dock with images expanding downwards in the vertical axis...
          { align: 'bottom'
          // set the maximum minor axis (vertical) image dimension to 48px
          , size: 32
          // add labels..
          , labels: true
          // swap the GIF extension for PNG extension for the larger image...
          , source: function(i){ return this.src.replace(/gif$/,'png'); }
          };
    
        $(document).ready(function(){
            $('#menu').jqDock(Options);
        });
        
        function hideButton(btnNum){
            $("#img" + btnNum).attr("display", "none");
        }
    </script>
    <style type="text/css">
    #main {
        width: 800px; 
        height: 100px;
        margin: 200 150 150 150;                                
    }
    </style>
</head>
<body>    
    <div id="main">    
        <div id="menu">        
          <img id="img1" src="pic1.png" alt="x" title="xxx" onclick="image1"/>                                
          <img id="img2" src="pic2.png" alt="y" title="yyy" onclick="image2" />
          <img id="img3" src="pic3.png" alt="y" title="zzz" onclick="image3" />
          <img id="img4" src="pic4.png" alt="a" title="aaa" onclick="image4" />
          <img id="img5" src="pic5.png" alt="b" title="bbb" onclick="image5" />
          <img id="img6" src="pic6.png" alt="c" title="ccc" onclick="image6" />
          <img id="img7" src="pic7.png" alt="d" title="ddd" onclick="image7" />
          <img id="img8" src="pic8.png" alt="e" title="eee" onclick="image8" />                 
        </div>
        
        <div>        
            <a href="#" onclick="hideButton('2');">Click Me to Hide Button 2</a>
        </div>
    </div>    
</body>
</html>

Не хочет работать!

Дебажу код и вижу, что плагин устанавливает каждой картинке набор стилей:

Код


border-bottom: 0px; 
position: relative; 
filter: inherit; 
border-left: 0px; 
padding-bottom: 0px; 
margin: 0px; 
padding-left: 0px; 
width: 100%; 
padding-right: 0px; 
display: block; 
height: 100%; 
vertical-align: top; 
border-top: 0px; 
border-right: 0px; 
padding-top: 0px;

Как видно один из которых является :

Код


display: block;

Задаю в коде:

Код


function hideButton(btnNum){
            $("#img" + btnNum).attr("display", "none !important");
        }

//OR
function hideButton(btnNum){
            $("#img" + btnNum).attr("style", "display: none");
        }
//OR
function hideButton(btnNum){
            $("#img" + btnNum).attr("style", "display: none !important;");
        }

Не работает smile

нуп

Дата 24.8.2011, 16:35 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

Код


$("#img" + btnNum).show();
$("#img" + btnNum).hide()

t77

Дата 24.8.2011, 17:09 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет

нуп, не работает smile

нуп

Дата 24.8.2011, 17:28 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

Все должно работать. Есть где онлайн ваш пример посмотреть? или в архиве хоть

t77

Дата 24.8.2011, 17:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет

нуп, все на локальной машине. Могу засветить код...

нуп

Дата 24.8.2011, 17:39 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

Давайте

t77

Дата 24.8.2011, 18:04 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет

нуп, видимо я что то не так делал, пока не пойму что... Но предложенный вами, последний вариант работает! smile

Вот посмотрите:

Код


<html>
<head>
    <title>jqDock Example</title>
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="jquery.jqDock.min.js"></script>    
    <script type="text/javascript">
        var Options =
          // horizontal Dock with images expanding downwards in the vertical axis...
          { align: 'bottom'
          // set the maximum minor axis (vertical) image dimension to 48px
          , size: 32
          // add labels..
          , labels: true
          // swap the GIF extension for PNG extension for the larger image...
          , source: function(i){ return this.src.replace(/gif$/,'png'); }
          };
    
        $(document).ready(function(){
            $('#menu').jqDock(Options);
                                   
        });
        
        function hideButton(){
            var imgNum = document.getElementById("imgNum_input").value;            
            
            $("#pic"+ imgNum).hide();
        }
        
        function showButton(){
            var imgNum = document.getElementById("imgNum_input").value;            
            
            $("#pic"+ imgNum).show();
        }        
    </script>
    <style type="text/css">
    #main 
    {        
        width: 800px; 
        height: 100px;
        margin: 200 150 150 150;                                
    }
    </style>
</head>
<body>    
     <div>
        enter the button number from left to right:<br />
        <input id="imgNum_input" type="text" /><br />
        <a href="#" onclick="hideButton();">Click Me to Hide Button</a><br />
        <a href="#" onclick="showButton();">Click Me to Show Button</a><br />
    </div>
    <div id="main">           
        <div id="menu">                
          <img id="pic1" src="pic1.png" alt="x" title="111111111" onclick="image1"/>                                
          <img id="pic2" src="pic2.png" alt="y" title="222222222222222" onclick="image2" />
          <img id="pic3" src="pic3.png" alt="y" title="zzz" onclick="image2" />
          <img id="pic4" src="pic4.png" alt="a" title="aaa" onclick="image2" />
          <img id="pic5" src="pic5.png" alt="b" title="bbb" onclick="image2" />
          <img id="pic6" src="pic6.png" alt="c" title="ccc" onclick="image2" />
          <img id="pic7" src="pic7.png" alt="d" title="ddd" onclick="image2" />
          <img id="pic8" src="pic8.png" alt="e" title="eee" onclick="image2" />                 
        </div>        
    </div>    
</body>
</html>

Только вот проблемка в том, что если я спрячу кнопку не с конца а между двумя другими, то появляется расстояние. Тоесть кнопки не выравниваются... У вас есть идеи как это устранить ?

нуп

Дата 24.8.2011, 18:09 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

Запихнуть в дивы, как сделано это в тех примерах

t77

Дата 24.8.2011, 18:11 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет

Если я запихну в дивы картинки то плагин не будет работать!

нуп

Дата 24.8.2011, 18:14 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

А это сам плагин добавляет дивы. Значит наверное надо так прятать

Код


$("#pic"+ imgNum).parent().hide() // show()

t77

Дата 24.8.2011, 18:18 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет

нуп, ты просто красавчик! smile

спасибо тебе огромное!

Добавлено через 3 минуты и 40 секунд
надеюсь, кому-нибудь пригодиться и поможет!
спасибо!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »