С самого начала документа подключаем фреймворк и функцию::
Code
<script src="jquery.tools.min.js"></script>
<script>
$(function() {
$("form.expose").click(function() {
$(this).expose({
maskId: 'mask',
onLoad: function() {
this.getExposed().css({backgroundColor: '#c7f8ff'});
},
onClose: function() {
this.getExposed().css({backgroundColor: null});
},
api: true
}).load();
});
});
</script>
Далее подключаем стили оформления. В коде имеется пути к нескольким картинкам - не забывайте их менять, если это необходимо.
Code
<style>
body {
padding:150px 50px;
font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}
#mask {
background:#678 url(mask_gradient_1000.png) no-repeat;
background-position:-260px -79px;
}
form.expose {
border:1px outset #ccc;
background:#fff url(h150.png) repeat-x;
padding:20px;
margin:20px 0;
text-align:center;
width:350px;
-moz-border-radius:4px;
}
label, input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
</style>
Download http://www.ruseller.com/lessons/les257/expose1.zip
Пример http://www.ruseller.com/lessons/les257/example/index.html
