Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.05.2013, 17:01
Профессор
Отправить личное сообщение для Kvark Посмотреть профиль Найти все сообщения от Kvark
 
Регистрация: 02.04.2013
Сообщений: 225

10 плавающих уровней
Помогите сконструировать правильно страницу
Хочу сделать такое:

левый столбик - заполнен цветом градиентом а значения от 0 до 100

правый столбик - до 10 уровней выделения, изначально равен высоте левого столбика, если потянуть за границу - должен появиться второй уровень, третий и т.д. до 10, высота уровней может быть разной, но в сумме по высоте они должны быть равны левому. Минимальная высота 5% от высоты левого столбика

Приготовил такой скелет HTML:
jsfiddle.net

Кнопка адд - добавляет, делете - удаляет последний, клеар - удаляет все кроме первого, сет дефаулт - устанавливает по умолчанию 10 уровней, пытаюсь сделать чтоб ширина дива менялась от их количества - может посоветуете какой алгоритм а?

Последний раз редактировалось Kvark, 07.05.2013 в 20:49. Причина: обновил
Ответить с цитированием
  #2 (permalink)  
Старый 07.05.2013, 17:26
Профессор
Отправить личное сообщение для Kvark Посмотреть профиль Найти все сообщения от Kvark
 
Регистрация: 02.04.2013
Сообщений: 225

попытался изобразить попонятнее, может теперь появяться советчики?
Ответить с цитированием
  #3 (permalink)  
Старый 07.05.2013, 18:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Сообщение от Kvark
попытался изобразить попонятнее, может теперь появяться советчики?

может 2 картинки ? было, за чего то тянем??? стало ...
Ответить с цитированием
  #4 (permalink)  
Старый 07.05.2013, 18:25
Профессор
Отправить личное сообщение для Kvark Посмотреть профиль Найти все сообщения от Kvark
 
Регистрация: 02.04.2013
Сообщений: 225

что касаеться тянем потянем, вроде UI с этим справиться, но принцып тот же, мне нужно чтобы бары заполняли всю высоту, но в тоже время их высота менялась, скажем если вся высота 100% и 2 бара - то 50% на 50% - потянув один в сторону другого - первый уменьшаеться на столькоже второй увеличиваеться - максимальное разрешоное сотношение в даном случае получиться 5% высоты бар 0, 95% высоты - бар 1, в идеале такое должно работать для всех 10 баров, но только за счет соседей - тоесть если мы имеем 5 баров то сжать - расширить можно только соседние бары а не все.
Ответить с цитированием
  #5 (permalink)  
Старый 07.05.2013, 20:51
Профессор
Отправить личное сообщение для Kvark Посмотреть профиль Найти все сообщения от Kvark
 
Регистрация: 02.04.2013
Сообщений: 225

обновил еще раз фидлю:
http://jsfiddle.net/Kvark/xZKUU/14/embedded/result/
в статике - почти так как я и хотел, раздражает только маленький промежуток который появляеться при дробных процентах - как с таким бороться? И еще вылезла странность - в ИЕ (чтоб его...) как то неправильно считаеться высота дива - с чем это связано и как побороть может подскажете?
Ответить с цитированием
  #6 (permalink)  
Старый 07.05.2013, 22:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Kvark,
размышления на тему ))) ...
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by Kvark</title>

  <script src="http://code.jquery.com/jquery-latest.js"></script>



  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>html,body{margin:0;padding:0;height:100%}
  body{font:76% arial,sans-serif}
  p{margin:0 10px 10px}
  a{display:block;color:#981793;padding:10px}
  div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;background:#EEE;color:#79B30B}
  div#range0{background:#CD0A31;height:100%;width:600px;border-top:2px #000000 groove;border-bottom:2px #000000 groove;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;display:table}
  div#range1{background:#F43445;height:100%;width:600px;border-top:2px #000000 groove;border-bottom:2px #000000 groove;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;display:table}
  div#range2{background:#F44C34;height:100%;width:600px;border-top:2px #000000 groove;border-bottom:2px #000000 groove;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;display:table}
  div#range3{background:#F47634;height:100%;width:600px;border-top:2px #000000 groove;border-bottom:2px #000000 groove;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;display:table}
  div#range4{background:#F49C34;height:100%;width:600px;border-top:2px #000000 groove;border-bottom:2px #000000 groove;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;display:table}
  div#range5{background:#F4C934;height:10%;width:600px;border-top:2px #000000 groove;border-bottom:2px #000000 groove;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;display:table}
  div#range6{background:#F4F434;height:100%;width:600px;border-top:2px #000000 groove;border-bottom:2px #000000 groove;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;display:table}
  div#range7{background:#D5F434;height:100%;width:600px;border-top:2px #000000 groove;border-bottom:2px #000000 groove;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;display:table}
  div#range8{background:#AEF434;height:100%;width:600px;border-top:2px #000000 groove;border-bottom:2px #000000 groove;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;display:table}
  div#range9{background:#5BBE3C;height:100%;width:600px;border-top:2px #000000 groove;border-bottom:2px #000000 groove;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;display:table}
  div.range{display:table-cell;vertical-align:middle}
  div.ranges p{line-height:1.4}
  div#footer{background:#333;color:#FFF}
  div#footer p{margin:0;padding:5px 10px}
  div#wrapper{float:left;width:600px;height:500px;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
  div#rangbar{float:left;width:80px;height:500px;background:#B9CAFF;font:bold 100% arial,sans-serif}
  div#controls{background:#FF8539;float: right;width:100%}
  </style>



<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function()
			{
				var RangesColors = ["#CD0A31", "#F43445", "#F44C34", "#F47634", "#F49C34", "#F4C934", "#F4F434", "#D5F434", "#AEF434", "#5BBE3C"];
				var num = $('#wrapper').size() - 1;
				var wrapper = $("#wrapper");
				//alert("nr.: " + num);

				$('#add').click(function()
				{
					if (num > 9)
					{
						num = 10;
					}
					else
					{
						if (num != 10)
						{
							wrapper.append('<div id="range' + num + '">' + num + '</div>').appendTo('.wrapper');
							num++;
                            $("[id ^= range]").css({"height": ((500-500%num)/num)-4+"px"});
                            if(500%num)$("[id ^= range]").last().css({"height": 500%num +((500-500%num)/num)-4+"px"});

                           // alert(num);
						}
					};
				});

				$('#cls').click(function()
				{
					if(num > 1)
					{
						do
						{
							num--;
							$('#range' + num + ':last').remove();
						}
						while (num > 1);
					}
                   $("[id ^= range]").css({"height": "496px"})
				});

				$('#del').click(function()
				{
					if (num > 1)
					{

					  $("[id ^= range]").last().remove();
                      num--;
                      $("[id ^= range]").css({"height": ((500-500%num)/num)-4+"px"});
                      if(500%num)$("[id ^= range]").last().css({"height": 500%num +((500-500%num)/num)-4+"px"});

					}
				});

				$('#set').click(function()
				{
					if (num > 1)
					{
						do
						{
							num--;
							$('#range' + num + ':last').remove();
						}
						while (num > 1);
					};

					do
					{
						wrapper.append('<div id="range' + num + '">' + num + '</div>').appendTo('.wrapper');
						num++;
					}
					while (num < 10);
                   $("[id ^= range]").css({"height": ((500-500%num)/num)-4+"px"});
				});
			});
})

</script>


</head>
<body>
  		<div id="container">
			<div id="header">
				<h1>
					Range Definition
				</h1>
			</div>
			<form>
				<div id="wrapper">
				</div>
			</form>
			<div id="rangbar">
				<p> - [100 %] -</p>
				<p> - [ 90 %] -</p>
				<p> - [ 80 %] -</p>
				<p> - [ 70 %] -</p>
				<p> - [ 60 %] -</p>
				<p> - [ 50 %] -</p>
				<p> - [ 40 %] -</p>
				<p> - [ 30 %] -</p>
				<p> - [ 20 %] -</p>
				<p> - [ 10 %] -</p>
				<p> - [  0 %] -</p>
			</div>
			<div id="controls">
				<p><input id="cls" name="cls" type="button" value="Clear all"><input id="add" name="add" type="button" value="Add range"><input id="del" name="del" type="button" value="Delete range"><input id="set" name="set" type="button" value="Set default"></p>
			</div>
			<div id="footer">
			</div>
		</div>
	</body>

</html>

Последний раз редактировалось рони, 07.05.2013 в 22:31.
Ответить с цитированием
  #7 (permalink)  
Старый 08.05.2013, 13:03
Профессор
Отправить личное сообщение для Kvark Посмотреть профиль Найти все сообщения от Kvark
 
Регистрация: 02.04.2013
Сообщений: 225

спасибо за вставку, я пока так и не понял как вставлять такое типа "запустить"

div#range5{background:#F4C934;height:10%; < очепятка =)

и wrapper.append('<div id="range' + num + '">' + num + '</div>').appendTo('.wrapper');

.appendTo('.wrapper') ненужен

это я не чтоб придраться, а для тех кто может тоже будет искать как да что

Последний раз редактировалось Kvark, 08.05.2013 в 14:14.
Ответить с цитированием
  #8 (permalink)  
Старый 08.05.2013, 15:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Сообщение от Kvark
я пока так и не понял как вставлять такое типа "запустить"
--- run в теге html---кнопка <>
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #9 (permalink)  
Старый 08.05.2013, 16:09
Профессор
Отправить личное сообщение для Kvark Посмотреть профиль Найти все сообщения от Kvark
 
Регистрация: 02.04.2013
Сообщений: 225

Cпасибо! Научился, почти вот только с размерами фрэйма что то нелады... если указываю ширину - получаю мелкий четырех угольник...

На текущий момент такое:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head profile="http://gmpg.org/xfn/11"> 
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
		<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" >
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="robots" content="noindex,nofollow,noodp,noydir,noarchive,nosnippet"/>
		<base target="_parent">
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		
		<title>
			Ranges
		</title>
		<style type="text/css">			
			html, body
			{
				margin: 0;
				padding: 0;
				height: 100%;
			}

			body
			{
				font: 76% arial,sans-serif;
			}
			
			p
			{
				margin: 0px 5px 5px 0px;
				line-height:1.7;
			}
			
			a
			{
				display:block;
				color: #981793;
				padding:10px;
			}
			
			div#header
			{
				width: 720px;
			}
			
			div#header h1
			{
				height:80px;
				line-height:80px;
				margin:0;
				padding-left:10px;
				background: #EEE;
				color: #2540D0
			}
			
			div#range0 
			{
				width: 650px;
				border-top: 2px #000000 groove;
				border-bottom: 2px #000000 groove; 
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				display: table;
			}
			
			div#range1 
			{
				width: 650px;
				border-top: 2px #000000 groove;
				border-bottom: 2px #000000 groove; 
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				display: table;
			}
			
			div#range2 
			{
				width: 650px;
				border-top: 2px #000000 groove;
				border-bottom: 2px #000000 groove; 
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				display: table;
			}
			
			div#range3 
			{
				width: 650px;
				border-top: 2px #000000 groove;
				border-bottom: 2px #000000 groove; 
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				display: table;
			}
			
			div#range4 
			{
				width: 650px;
				border-top: 2px #000000 groove;
				border-bottom: 2px #000000 groove; 
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				display: table;
			}
			
			div#range5 
			{
				width: 650px;
				border-top: 2px #000000 groove;
				border-bottom: 2px #000000 groove; 
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				display: table;
			}
			
			div#range6 
			{
				width: 650px;
				border-top: 2px #000000 groove;
				border-bottom: 2px #000000 groove; 
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				display: table;
			}
			
			div#range7 
			{
				width: 650px;
				border-top: 2px #000000 groove;
				border-bottom: 2px #000000 groove; 
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				display: table;
			}
			
			div#range8 
			{
				width: 650px;
				border-top: 2px #000000 groove;
				border-bottom: 2px #000000 groove; 
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				display: table;
			}
			
			div#range9 
			{
				width: 650px;
				border-top: 2px #000000 groove;
				border-bottom: 2px #000000 groove; 
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				display: table;
			}
			
			div.range
			{
				display: table-cell;
				vertical-align: middle;
			}
			
			div#footer
			{
				background: #333;
				color: #FFF;
			}
			
			div#footer p
			{
				margin: 0;
				padding: 5px 10px;
			}
			
			div#wrapper
			{
				float: left;
				width: 650px;
				height: 490px;
				margin: 14px 0px 0px 14px;
				padding: 0px 0px 0px 0px;
			}
			
			div#rangs
			{
				float: left;
				background: #B9CAFF;
				height: 530px;
			}
			
			div#rangsbar
			{
				display: table;
				float: left;
				width: 56px;
				height: 530px;
				background: #B9CAFF;
				font: bold 100% arial,sans-serif
			}
			
			div#controls
			{
				display: table;
				float: left;
				clear:both;
				background:	#FF8539;
				height: 30px;
				width: 710px;
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 10px;
			}
		</style>
		
		<script type='text/javascript'>
					
			$(window).load(function()
			{
				$(document).ready(function()
				{
					var RangesColors = ["#CD0A31", "#F43445", "#F44C34", "#F47634", "#F49C34", "#F4C934", "#F4F434", "#D5F434", "#AEF434", "#5BBE3C"];
					var RangesNames = ["Range A", "Range B", "Range C", "Range D", "Range E", "Range F", "Range G", "Range H", "Range J", "Range I"];
					var RangesBorders = ["90-100", "80-90", "70-80", "60-70", "50-60", "40-50", "30-20", "20-10", "10-20", "0-10"];
					
					var num = $('#wrapper').size() - 1;
					var wrapper = $("#wrapper");
								
					$('#add').click(function()
					{
						if (num > 9)
						{
							num = 10;
						}
						else
						{
							if (num != 10)
							{
								wrapper.append('<div id="range' + num + '"><div class="range">&nbsp;&nbsp;&nbsp;' + num + '<b>&nbsp;&nbsp;&nbsp;Color: </b><input type="text" name="bar' + num + '" class="field" value="' + RangesColors[num] + '" maxlength="7" align="middle" style="width: 60px;"><b>&nbsp;&nbsp;&nbsp;Name: </b><input type="text" name="barname' + num + '" class="field" value="' + RangesNames[num] + '" style="width: 300px;"><b>&nbsp;&nbsp;&nbsp; % Borders: </b><input type="text" name="border' + num + '" class="field" value="' + RangesBorders[num] + '" style="width: 42px;"></div></div>');
								$('#range'+ num).css({ "background": RangesColors[num] });
								num++;
								$("[id ^= range]").css({"height": ((500-500%num)/num)-4+"px"});
								if(500%num)$("[id ^= range]").last().css({"height": 500%num +((500-500%num)/num)-4+"px"});
								// alert(num);
							}
						};
					});

					$('#cls').click(function()
					{
						if(num > 1)
						{
							do
							{
								num--;
								$('#range' + num + ':last').remove();
							}
							while (num > 1);
						}
						$("[id ^= range]").css({"height": "496px"})
					});

					$('#del').click(function()
					{
						if (num > 1)
						{
							$("[id ^= range]").last().remove();
							num--;
							$("[id ^= range]").css({"height": ((500-500%num)/num)-4+"px"});
							if(500%num)$("[id ^= range]").last().css({"height": 500%num +((500-500%num)/num)-4+"px"});
						}
					});

					$('#set').click(function()
					{
						if (num > 1)
						{
							do
							{
								num--;
								$('#range' + num + ':last').remove();
							}
							while (num > 1);
						};
						do
						{
							wrapper.append('<div id="range' + num + '"><div class="range">&nbsp;&nbsp;&nbsp;' + num + '<b>&nbsp;&nbsp;&nbsp;Color: </b><input type="text" name="bar' + num + '" class="field" value="' + RangesColors[num] + '" maxlength="7" align="middle" style="width: 60px;"><b>&nbsp;&nbsp;&nbsp;Name: </b><input type="text" name="barname' + num + '" class="field" value="' + RangesNames[num] + '" style="width: 300px;"><b>&nbsp;&nbsp;&nbsp; % Borders: </b><input type="text" name="border' + num + '" class="field" value="' + RangesBorders[num] + '" style="width: 42px;"></div></div>');
							$('#range'+ num).css({ "background": RangesColors[num] });
							num++;
						}
						while (num < 10);
						$("[id ^= range]").css({"height": ((500-500%num)/num)-4+"px"});
					});
				});
			});
		</script>
	</head>
	<body>
		<div id="header">
			<h1>
				Range Definition
			</h1>
		</div>
  		<div id="container">
			<form>
				<div id="rangs">
					<div id="wrapper">
					</div>
				</div>
			</form>
			<div id="rangsbar">
				<div class="range">
					<p> - [100 %]</p>
					<p>-</p>
					<p> - [ 90 %]</p>
					<p>-</p>
					<p> - [ 80 %]</p>
					<p>-</p>
					<p> - [ 70 %]</p>
					<p>-</p>
					<p> - [ 60 %]</p>
					<p>-</p>
					<p> - [ 50 %]</p>
					<p>-</p>
					<p> - [ 40 %]</p>
					<p>-</p>
					<p> - [ 30 %]</p>
					<p>-</p>
					<p> - [ 20 %]</p>
					<p>-</p>
					<p> - [ 10 %]</p>
					<p>-</p>
					<p> - [  0 %]</p>
				</div>
			</div>
		</div>
		<div id="controls">
			<div class="range">
				<input id="cls" name="cls" type="button" value="Clear all"><input id="add" name="add" type="button" value="Add range"><input id="del" name="del" type="button" value="Delete range"><input id="set" name="set" type="button" value="Set default">
			</div>
		</div>
	</body>
</html>


Я почти завершил что хотелось получить!
Последние штрихи остались:
- никак не придумаю как сделать чтобы ширина регионов менялась в зависимости указаных пределов (от драг дропа пока решил отказаться - не работает, или не сумел настроить правильно )
- сделать смену цвета для дива в зависимости указаного в ячейке кода как только будет кликнуто из нее - подскажите как это "заметить"?

Последний раз редактировалось Kvark, 08.05.2013 в 16:46.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
DragAndDrop у гридов в плавающих окнах странное поведение PavelK ExtJS 0 29.07.2010 15:26
Динамический выбор, несколько уровней. ursa Общие вопросы Javascript 10 13.03.2009 19:20