Показать сообщение отдельно
  #1 (permalink)  
Старый 23.04.2014, 21:34
Новичок на форуме
Отправить личное сообщение для SilverMountain Посмотреть профиль Найти все сообщения от SilverMountain
 
Регистрация: 23.04.2014
Сообщений: 1

Использование slideUp и slideDown
Добрый вечер, необходимо чтобы слайд-панелька раскрывалась в зависимости от высоты содержимого.
Изначально делал ставку на 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;
}

Последний раз редактировалось SilverMountain, 23.04.2014 в 22:33.
Ответить с цитированием