Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Применение библиотек > Как скрывать кнопки в плагине jqDock


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

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

Автор: Gold Dragon 24.8.2011, 14:36
читаю доку по ссылке, вижу это:
Цитата

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

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

Автор: t77 24.8.2011, 15:32
Вы правы есть такое в документации... Но как это применить ? Не хочет работать !
Версия 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
Да тупо поставьте всем img id и скрывайте по нужной вам ситуации.  smile 

Автор: t77 24.8.2011, 16:26
я пробовал так сделать...
Код

<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
Код

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

Автор: t77 24.8.2011, 17:09
нуп, не работает  smile 

Автор: нуп 24.8.2011, 17:28
Все должно работать. Есть где онлайн ваш пример посмотреть? или в архиве хоть

Автор: t77 24.8.2011, 17:36
нуп, все на локальной машине. Могу засветить код...

Автор: нуп 24.8.2011, 17:39
Давайте  smile 

Автор: t77 24.8.2011, 18:04
нуп, видимо я что то не так делал, пока не пойму что... Но предложенный вами, последний вариант работает! 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
Запихнуть в дивы, как сделано это в тех примерах smile 

Автор: t77 24.8.2011, 18:11
Если я запихну в дивы картинки то плагин не будет работать!

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

Код

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

Автор: t77 24.8.2011, 18:18
нуп, ты просто красавчик!  smile  smile 
спасибо тебе огромное!

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)