82 lines
3.0 KiB
JavaScript
82 lines
3.0 KiB
JavaScript
|
/*
|
||
|
|
* To change this license header, choose License Headers in Project Properties.
|
||
|
|
* To change this template file, choose Tools | Templates
|
||
|
|
* and open the template in the editor.
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
$(function () {
|
||
|
|
|
||
|
|
|
||
|
|
/* gestion bordure */
|
||
|
|
$("#couleurBordure").change(function () {
|
||
|
|
var coul = $("#couleurBordure").val();
|
||
|
|
$("#divTest").css("border-color", coul);
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#largeurBordure").change(function () {
|
||
|
|
var lar = $("#largeurBordure").val();
|
||
|
|
var larpx = lar + "px";
|
||
|
|
$("#divTest").css("border-width", larpx);
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#styleBordure").change(function (){
|
||
|
|
var style = $("#styleBordure").val();
|
||
|
|
$("#divTest").css("border-style", style);
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#courbeBordure").change(function (){
|
||
|
|
var courbe = $("#courbeBordure").val();
|
||
|
|
var courbepx = courbe + "px";
|
||
|
|
$("#divTest").css("border-radius", courbepx);
|
||
|
|
});
|
||
|
|
|
||
|
|
/* gestion ombre avec bouton*/
|
||
|
|
$("#miseAJour").click(function ()
|
||
|
|
{
|
||
|
|
var ombre = $("#ombreDecalH").val() + "px " + $("#ombreDecalV").val() + "px " + $("#ombreDistFlou").val() + "px " + $("#ombreTaille").val() + "px " + $("#ombreCouleur").val();
|
||
|
|
$("#divTest").css("box-shadow", ombre);
|
||
|
|
});
|
||
|
|
|
||
|
|
/* gestion ombre dynamique */
|
||
|
|
$("#ombreDecalH").change(function ()
|
||
|
|
{
|
||
|
|
var ombre = $("#ombreDecalH").val() + "px " + $("#ombreDecalV").val() + "px " + $("#ombreDistFlou").val() + "px " + $("#ombreTaille").val() + "px " + $("#ombreCouleur").val();
|
||
|
|
$("#divTest").css("box-shadow", ombre);
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#ombreDecalV").change(function ()
|
||
|
|
{
|
||
|
|
var ombre = $("#ombreDecalH").val() + "px " + $("#ombreDecalV").val() + "px " + $("#ombreDistFlou").val() + "px " + $("#ombreTaille").val() + "px " + $("#ombreCouleur").val();
|
||
|
|
$("#divTest").css("box-shadow", ombre);
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#ombreDistFlou").change(function ()
|
||
|
|
{
|
||
|
|
var ombre = $("#ombreDecalH").val() + "px " + $("#ombreDecalV").val() + "px " + $("#ombreDistFlou").val() + "px " + $("#ombreTaille").val() + "px " + $("#ombreCouleur").val();
|
||
|
|
$("#divTest").css("box-shadow", ombre);
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#ombreTaille").change(function ()
|
||
|
|
{
|
||
|
|
var ombre = $("#ombreDecalH").val() + "px " + $("#ombreDecalV").val() + "px " + $("#ombreDistFlou").val() + "px " + $("#ombreTaille").val() + "px " + $("#ombreCouleur").val();
|
||
|
|
$("#divTest").css("box-shadow", ombre);
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#ombreCouleur").change(function ()
|
||
|
|
{
|
||
|
|
var ombre = $("#ombreDecalH").val() + "px " + $("#ombreDecalV").val() + "px " + $("#ombreDistFlou").val() + "px " + $("#ombreTaille").val() + "px " + $("#ombreCouleur").val();
|
||
|
|
$("#divTest").css("box-shadow", ombre);
|
||
|
|
});
|
||
|
|
|
||
|
|
/* gestion des parametres du div*/
|
||
|
|
$("#tailleDiv").change(function (){
|
||
|
|
$("#divTest").css("width", $("#tailleDiv").val() + "px");
|
||
|
|
$("#divTest").text($("#textDiv").val());
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#textDiv").change(function (){
|
||
|
|
$("#divTest").text($("#textDiv").val());
|
||
|
|
});
|
||
|
|
});
|