<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<title>Riformare gli elementi</title>
<style type="text/css">
html, body,div,p,h1,h2,h3{ margin:0; padding:0;}
h1{ font-size:24px; font-weight:bold; color:rgb(50,50,250);}
h2{ font-size:18px; font-weight:bold; color:rgb(250,50,150); background-color:rgb(200,200,0); border: 1px solid #999999; }
h3{ font-size:14px; font-weight:bold; color:rgb(200,20,20); text-align:center;}
.nota{ color:rgb(250,120,0);}
.codice{ color:rgb(30,120,30);}
div.box{ position:absolute; width:300px; height:250px; top:100px; left:200px; background:#FFF; border:1px solid;
border-radius:5px;
-moz-border-radius:5px; /* Firefox */
-webkit-border-radius:5px; /* Safari e Chrome */
}
div.topms{ width:100%; padding:5px 0; margin:0; background:#06F; color:#FFF; font-weight:bold; text-align:center; letter-spacing:2px; }
div.chiudims{ position:absolute; top:0; right:0; width:20px; padding:4px 0; margin:0; cursor:pointer; background:#333; border:1px solid; }
div.chiudims:hover{ background:#999; color:#F00;}
div.angoloms{ position:absolute; bottom:0; right:0; padding:0; margin:0;}
div.box p{padding:5px;}
</style>
<script type="text/javascript" src="jQuery-1.6.min.js"></script>
<script type="text/javascript" src="riform_box.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
// To open the div
$('button').click(function(){
$('div.box').css('display', 'block');
});
// calling the class
Riformabox.mostraFreccia();
}); // chiude ready
</script>
<body>
<button>Open box</button>
<p class='nota'>You need <q>jQuery</q> library (the best version is always the latest) and insert it in the 'head' element</p>
<p>The box is modifiable just by the bottom-right corner </p>
<div class="box">
<div class="topms">Drag and drop me
<div class="chiudims">×</div>
</div>
<h3>Exchangeable properties</h3>
<p>
If you want you can change the element properties. After you had done it by CSS you have to modify the class "riform_box.js" <br />
In the firsts lines of the class you can find "exchangeable properties" and there you can modify the element names.
</p>
<div class="angoloms"> .: </div>
</div><!--box-->
</body>
</html>
|
Download
