Показать сообщение отдельно
  #2 (permalink)  
Старый 24.04.2014, 00:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Открывашка плагин для блоков
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>

Последний раз редактировалось рони, 20.01.2016 в 01:18.
Ответить с цитированием