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

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.
Ответить с цитированием