2

С помощью собственного плагина JQuery "resizable" и класса элемента с таким названием нужно поместить вниз этого элемента Селектор. Содержимое этого элемента должно быть также внутри при изменении размера.

Небольшой пример и что в нём неправильно:

  1. Содержимое остаётся за элементом, а не внутри при уменьшении высоты элемента.

  2. Не селектор уменьшает элемент, а сам элемент работает как селектор.

Песочница

1
  • 1. css - overflow: hidden;
    – user27286
    Commented 30 янв. 2015 в 19:25

1 ответ 1

1

Разобрался

$(document).ready(function() {
    $(".resizable").resizable();
});

(function($) {

	var defaults = {
		color: 'red'
	};
	
	var f = {
	
		init: function(options) {
			var options = $.extend({}, defaults, options);
			
			var c = this;
            var qe = $("<div class='res'><div class='resizers'></div><div class='resizers'></div></div>");
            $(c).append(qe);
			$(".res").css({
				"height":		'7px',
				// "background":	options.color,
				"cursor":		's-resize'
			});
			
			return this.each(function() {
				var me = $(this);
			
				qe.bind('mousedown', function(e) {
					var h = me.height();
					var y = e.clientY;
					
					var moveHandler = function(e) {
						var s = Math.max(20, e.clientY + h - y);
						me.height(s);
						return false;
					};
					
					var upHandler = function(e) {
						$('html').unbind('mousemove', moveHandler).unbind('mouseup', upHandler);
					};
					
					$('html').bind('mousemove', moveHandler).bind('mouseup', upHandler);
				});
			});
		},
	};
	
	
	$.fn.resizable = function(method) {
		if(f[method]) {
			return f[method].apply(this, Array.prototype.slice.call(arguments, 1));
		} else if(typeof method === 'object' || ! method) {
			return f.init.apply(this, arguments);
		} else {
			$.error("ћетод с именем " + method + " не существует");
		}
		
		
	};

}) (jQuery);
#a {
    background: #CD0000;
    width: 256px;
    height: 512px;
    padding: 4px 5px 4px 5px;
    overflow: hidden;
}

.wrapper {
    width: 100%;
    height: 100%;
}

.b {
    background: #CDCD00;
    width: 100%;
    height: 128px;
    margin-bottom: 5px;
}

.res {
    background: #CD00CD;
    top: 0;
}

.resizers {
	margin: 0 auto;
	margin-bottom: 2px;
	width: 26px;
	height: 1px;
	background: #DCDCDC;
}
<div id="a" class="resizable">
    <div class="wrapper">
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
    </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.