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"> ' + num + '<b> Color: </b><input type="text" name="bar' + num + '" class="field" value="' + RangesColors[num] + '" maxlength="7" align="middle" style="width: 60px;"><b> Name: </b><input type="text" name="barname' + num + '" class="field" value="' + RangesNames[num] + '" style="width: 300px;"><b> % 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"> ' + num + '<b> Color: </b><input type="text" name="bar' + num + '" class="field" value="' + RangesColors[num] + '" maxlength="7" align="middle" style="width: 60px;"><b> Name: </b><input type="text" name="barname' + num + '" class="field" value="' + RangesNames[num] + '" style="width: 300px;"><b> % 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>
Я почти завершил что хотелось получить!
Последние штрихи остались:
- никак не придумаю как сделать чтобы ширина регионов менялась в зависимости указаных пределов (от драг дропа пока решил отказаться - не работает, или не сумел настроить правильно
)
- сделать смену цвета для дива в зависимости указаного в ячейке кода как только будет кликнуто из нее - подскажите как это "заметить"?