Форум

SilverMountain · #1 (**permalink**) 23.04.2014, 21:34

Добрый вечер, необходимо чтобы слайд-панелька раскрывалась в зависимости от высоты содержимого.
Изначально делал ставку на animate {height: "100%"}, но тогда эффект плавного скольжение не применяется, с пикселями работает нормально
Понял, что нужно использовать slideUp, slideDown и Toggle, но при внедрении их вместо animate панелька перестает открываться вовсе.

Что необходимо изменить в коде, чтобы осуществить поставленную задачу?

HTML:

<script>
$(document).ready(function(){
$("#show_answer").slideBox({width: "100%", height: "100%", position: "bottom"});
});
</script>
</head>
<body>
<div id="show_answer">
<p><span class="letter_green">Пример 7.</span> Разделить число 1011011101001<sub>2</sub> на 1110011<sub>2</sub>.</p>
<p><span class="letter_green">Решение:</span></p>
<p><span class="letter_green">Ответ:</span> 1011011101001<sub>2</sub> / 1110011<sub>2</sub>=110011<sub>2</sub></p>
</div>
</body>
</html>

Cкрипт:

(function($){
    $.fn.slideBox = function(params){
    var content = $(this).html();
        var defaults = {
            width: "100%",
            height: "100%",
            position: "bottom"          // Возможные значения : "top", "bottom"
        }
        
        if(params) $.extend(defaults, params);
        
        var divPanel = $("<div class='slide-panel'>");
        var divContent = $("<div class='content'>");
    
        $(divContent).html(content);
        $(divPanel).addClass(defaults.position);
        $(divPanel).css("width", defaults.width);
 
        // Добавляем кнопку
        $(divPanel).append("<div class='slide-button'><b>Посмотреть решение</b></div>");
        $(divPanel).append("<div style='display: none' id='close-button' class='slide-button'><b>Спрятать решение</b></div>");
        
        if(defaults.position == "bottom")
            $(divPanel).append($(divContent));
        
        $(this).replaceWith($(divPanel));
        
        //Действие по нажатию кнопки
        $(".slide-button").click(function(){
            if($(this).attr("id") == "close-button")
                $(divContent).animate({height: "0px"}, 1000);
            else
                $(divContent).animate({height: defaults.height}, 1000);
            
            $(".slide-button").toggle();
        });
    };
})(jQuery);

Ну и CSS на всякий

.slide-panel {
	position:absolute; /*position:fixed*/
}
/*.bottom {bottom: 0;}
.top {top: 0;} для положения формы на странице*/ 

.content {
	border: 1px solid #dcdcdc;
	font: normal 14px Arial,Helvetica,Sans-serif;
	overflow: hidden;
	height: 0;
	width: 80%;

margin-left: 10px;
}

.slide-button {
	font: normal 14px Arial,Helvetica,Sans-serif;
	cursor: pointer;
		
	position: relative;
	width: 180px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	
	border: 1px solid #87a36c;
  	margin-bottom: 8px; 
  	padding: 5px;
  	border-radius: 3px;
  	background: #97BA78;
  	color: #ffffff;
}
.slide-button:hover {
	background: #9cbf7c; /*a0c480*/
	border: 1px solid #8ba86f;
}

рони · #2 (**permalink**) 24.04.2014, 00:19

SilverMountain,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
      background: #8FBC8B
  }

  .slide-panel{
    overflow:hidden;
    width: 450px;
    margin: 0px auto;
  }

  .slide-panel .content{
    border-radius:10px;
    border:#8B4513 4px solid;
    padding:5px;
    background:#FFA500;
  }

  .slide-panel .slide-button{
    margin: 0px 1%;
    text-align: center;
    display:inline-block;
    color:#fff;
    text-decoration:none;
    text-shadow:1px 1px 1px #000;
    background:#ff8a2b;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc154', endColorstr='#ff8a2b');
    background:-webkit-gradient(linear,left top,left bottom,from(#ffc154),to(#ff8a2b));
    background:-moz-linear-gradient(top,#ffc154,#ff8a2b);
    background:gradient(linear,top,#ffc154,#ff8a2b);
    border:1px solid #ff8a2b;
    border-radius:10px;

  }




.slide-button {
	font: normal 14px Arial,Helvetica,Sans-serif;
	cursor: pointer;

	position: relative;
	width: 180px;
	height: 25px;
	line-height: 25px;
	text-align: center;

	border: 1px solid #87a36c;
  	margin-bottom: 8px;
  	padding: 5px;
  	border-radius: 3px;
  	background: #97BA78;
  	color: #ffffff;
}
.slide-button:hover {
	background: #D2691E;
	border: 1px solid #8ba86f;
}
.br{
  height: 100px;
}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function () {
       (function ($) {
           $.fn.slideBox = function (params) {
               var defaults = {
                   position: "top", // Возможные значения : "top", "bottom"
                   text: ["Подробнее...", "Скрыть..."],
                   show: true
               }
               if (params) $.extend(defaults, params);
               return this.each(function (index, self) {
                   $(self).addClass("content");
                   var divPanel = $("<div/>", {
                       "class": "slide-panel"
                   });
                   $(self).wrap(divPanel);
                   var button = $("<a/>", {
                       "href": "#",
                       "class": "slide-button",
                       "text": defaults.text[+defaults.show]
                   });
                   (defaults.position == "bottom") ? button.insertAfter($(self)) : button.insertBefore($(self));
                   var n = +defaults.show;
                   button.click(function (event) {
                       event.preventDefault();
                       n = ++n % 2;
                       $(this).text(defaults.text[n])
                       $(self).stop(true,true).slideToggle("slow");
                   });
                   !defaults.show && $(self).css({
                       "display": "none"
                   })
               })


           };
       })(jQuery);

       $("#show_answer").slideBox({
           show: false,
           position: "bottom",
           text: ["Посмотреть решение", "Спрятать решение"]
       });
       $(".answer").slideBox({});
   })
  </script>
</head>

<body>
 <div id="show_answer">
<p><span class="letter_green">Пример 7.</span> Разделить число 1011011101001<sub>2</sub> на 1110011<sub>2</sub>.</p>
<p><span class="letter_green">Решение:</span></p>
<p><span class="letter_green">Ответ:</span> 1011011101001<sub>2</sub> / 1110011<sub>2</sub>=110011<sub>2</sub></p>
</div>
<p class="br"></p>
<div class="answer">
<p><span class="letter_green">Пример 7.</span> Разделить число 1011011101001<sub>2</sub> на 1110011<sub>2</sub>.</p>
<p><span class="letter_green">Решение:</span></p>
<p><span class="letter_green">Ответ:</span> 1011011101001<sub>2</sub> / 1110011<sub>2</sub>=110011<sub>2</sub></p>
</div>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript