juil 17

Changer de thème jQuery UI selon son humeur

Jquery 1 Comment »

Si comme moi vous avez une interface d’ administration réalisée avec le framework CSS jQuery UI, alors le Theme Switcher Widget est pour vous, il permet de passer d’un thème (officiel) à un autre en un clic !

theme-switcher-jquery-ui
Pour l’intégrer c’est encore très simple comme le montre cet exemple :

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/ui.all.css" />
  <script type="text/javascript" src="http://jqueryui.com/js/jquery.js"></script>
 
  <script>
  $(document).ready(function(){
    $('#switcher').themeswitcher();
  });
  </script>
</head>
<body style="font-size:62.5%;">
 
<script type="text/javascript"
  src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="switcher"></div>
 
</body>
</html>

Post to Twitter Twitter ce post


juil 17

Animate en jQuery

Jquery No Comments »

Animate est une fonction de jQuery qui permet d’animer un élément du DOM en modifiant son style (couleur, taille, bordures,police,opacité…etc) dans un temps donné.

Exemple:

1
2
3
4
5
6
7
8
9

    $("#go").click(function(){
      $("#block").animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
      }, 1500 );
    });

Vous pouvez assigner tous les styles de cette liste qui sont quantifiable (px, em, %).

Encore trop peu utilisée elle permet pourtant de donner une vraie valeur ajoutée à une animation JavaScript et ce très simplement.

Voici ci-dessous deux scripts plutôt sympa qui utilisent cette fonction:

  • Menu

Article.

menu-ombre-jquery

  • Lever de rideau

Article.

lever-de-rideau

Post to Twitter Twitter ce post