Archives de Catégorie: Web

Datepicker – Mois et année uniquement

La suite de ce billet sur les Calendrier en jQueryvia DatePicker.

Voici comment avoir avec jQuery-ui un calendrier qui n’affiche que les mois et les années.

$(".date").datepicker({
    dateFormat: 'mm/yy',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showOn: "button",
    buttonImage: "/Content/images/calendar.png",
    buttonImageOnly: true,
    onClose: function (dateText, inst) {
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, month, 1));
    },
    beforeShow: function (input, inst) {
        if ((datestr = $(this).val()).length > 0) {
            actDate = datestr.split('/');
            year = actDate[1];
            month = actDate[0] - 1;
            $(this).datepicker('option', 'defaultDate', new Date(year, month));
            $(this).datepicker('setDate', new Date(year, month));
        }
    }
});
$(".date").focus(function () {
    $(".ui-datepicker-calendar").hide();
    $("#ui-datepicker-div").position({
        my: "center top",
        at: "center bottom",
        of: $(this)
    });
});

Et voici le résultat :

Publicités

Vérifier l’existence d’un objet en jQuery

Pour vérifier l’existence d’un objet en jQuery, il suffit de demandé la propriété length de cet objet. Si la condition passe, alors l’objet existe et on pourra travailler dessus.

 
$(document).ready(function () {
//Vérifier que le tbody existe dans la table myTable
    if ($("#myTable").children("tbody").length) {
        // ...
    }
}); 

Source

Infobulle en CSS

Petite astuce pour créer des infobulles en CSS sans se prendre trop la tête.
Dans cet exemple, je l’utilise dans un <tr>

La partie HTML :

<td class="infobulle">
    Mon texte ...
    <span>Mon texte qui apparaîtra dans l'infobulle !!!!! </span>
</td>

La partie CSS :

.infobulle
{
    position: relative;
    z-index: 24;
    text-decoration: none;
}

.infobulle:hover
{
    z-index: 25;
}

.infobulle span
{
    display: none;
}

.infobulle:hover span
{
    display: block;
    position: absolute;
    top: 2em;
    left: 2em;
    color: #000;
    background-color: #eeeeee;
    word-wrap : break-word;
    width : 300px;    
}

Source

Calendrier en jQuery – DatePicker

Tous d’abord récupérer (si ce n’est pas déjà fait) le jquery-ui et le css qui vous fait envie sur le site officiel.

Vous n’avez plus qu’à les importer.

<script src="../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<link href="../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />

Pendant qu’on y est, on récupère également la traduction française du calendrier ici. Et on l’importe

<script src="../Scripts/jquery.ui.datepicker-fr.js" type="text/javascript"></script>

Ensuite on aura besoin d’une textbox pour saisir la date et l’afficher.

<input type="text" class="date"/>

Et enfin de script pour relier la textbox avec le calendrier.

<script>
$(function () {
    $('.date').datepicker({ dateFormat: "dd/mm/yy" });
});
</script>

Voilà c’est aussi simple, et comme bonus, voici la même chose en intégrale et en plus classe. Lire la suite

CSS3

Depuis l’arrivé du CSS3, les sites web ont pris un coûts de jeune assez fulgurant. On peut réaliser des choses assez impressionnantes.

Voici un petit condensé du CSS3 et des nouvelles fonctionnalités qui ont retenu mon attention de néophytes du développement web :

  • background-size
  • border-raduis
  • opacity
  • word-wrap
  • resize

Tous les exemples partiront d’une simple boîte (carré de 150px de côté, avec un fond bleu et des bordures noir) :

box{
	display : inline-block;
	margin : 0 40px;
	width : 150px; height : 150px;
	font-size : 1.2em; color : red;
	border : solid 3px; border-color : black;
	background-color : blue;
}

Background-size

Le background-size permet de remplir un div ou un span avec un éléement (une image). Par défaut, si vous insérer une image dans un div, l’image gardera sa taille définit et ce sera à vous de gérer la taille du composant qui l’englobe. Maintenant vous pourrez mettre n’importe quelle image dans n’importe qu’elle div. Lui indiqué qu’il doit prendre 100% de la place dispobible, 100px ou même 100px de large et 100% de hauteur.

/** Une simple image **/
#box1{
	background-image : url(img1.png);
	background-repeat : no-repeat;
}
/** On force la taille au maximum avec la même image **/
#box2{
	background-image : url(img1.png);
	background-repeat : no-repeat;
	background-size : 100px 100%;
}
/** On force la taille de l'image à 100px **/
#box3{	
	background-image : url(img1.png);
	background-repeat : no-repeat;
	background-size : 70px 70px;
}

Résultat :

Mise en Application :

<p> Démonstration du Background-Size </p>
<div id=box1 class=box>Taille Réel </div>
<div id=box2 class=box>Remplissage</div>
<div id=box3 class=box>Taille définit</div>

Border-Radius

Le border-radius réconforte beaucoup de designer qui “trichait” pour avoir un beau bouton. Il permet de créer des arrondis sur les angles. Enfin !!!! Vous l’attendiez, n’est-ce pas ? Finit la création des boutons avec des images.

/**Angle des Bords**/
#AngleBord1{
	border-radius: 25px;
}
#AngleBord2{
	border-radius: 10px;
}
#AngleBord3{
	border-radius: 0px;
}
#AngleBord4{
	border-top-right-radius : 25px;
	border-top-left-radius : 20px;
	border-bottom-left-radius : 15px;
	border-bottom-right-radius : 0px;
}

Opacity

/**Opacité**/
#Opac1{
	opacity:1;
}
#Opac2{
	opacity:0.5;
}
#Opac3{
	opacity:0.2;
}

En cours de rédaction

Word-wrap

/**Word-Wrap**/
#word1{
	word-wrap:normal;
	overflow:hidden;
}
#word2{
	word-wrap:break-word;
	overflow:hidden;	
}

En cours de rédaction

resize

/**Redimensionnemment**/
#resize1{
	resize: both;
	overflow: auto;
}
#resize2{
	resize: vertical;
	max-height : 200px;
	overflow: auto;
}
#resize3{
	resize: horizontal;
	min-width : 100px;
	overflow: auto;
}

En cours de rédaction

JSON

Le JSON (JavaScript Object Notation). Vous en avez peut-être entendu parlé sans plus.
C’est un peu l’évolution du XML, en moins verbeux, avec les commentaires et toujours aussi simple. Mais surtout pour améliorer l’utilisation.

Exemple :

{
     "firstName": "John",
     "lastName" : "Smith",
     "age"      : 25,
     "other"      : null,
     "male"      : true,
     "address"  :
     {
         "streetAddress": "21 2nd Street",
         "city"         : "New York",
         "state"        : "NY",
         "postalCode"   : "10021"
     },
     "phoneNumber":
     [
         {
           "type"  : "home",
           "number": "212 555-1234"
         },
         {
           "type"  : "fax",
           "number": "646 555-4567"
         }
     ]
 }

Equivalent XML :

<?xml version="1.0" encoding="UTF-8" ?>
	<firstName>John</firstName>
	<lastName>Smith</lastName>
	<age>25</age>
	<other />
	<male>true</male>
	<address>
		<streetAddress>21 2nd Street</streetAddress>
		<city>New York</city>
		<state>NY</state>
		<postalCode>10021</postalCode>
	</address>
	<phoneNumber>
		<type>home</type>
		<number>212 555-1234</number>
	</phoneNumber>
	<phoneNumber>
		<type>fax</type>
		<number>646 555-4567</number>
	</phoneNumber>

Comment on construit un JSON ?? Simplement avec : 2 éléments structure : clé / valeur et les tableaux.

« phoneNumber » est la clé et sa valeur est un tableau (via les crochets [])

Chaque items du tableau se situe dans des accolades { } et les différentes clé / valeur sont séparé par des virgules

Et le système est repris. Ainsi pour la clé « firstname » la valeur est « John ». Aussi simplement que ça.

Mais qu’elle sont les valeurs que l’on peut mettre?? Uniquement du texte ? Non évidemment, des nombre, des booléens ou même null.En revanche, on enlève les guillemets.

Utilisation :
Si on déclare : var jsonObject = { … le JSON … }

On peut l’utiliser ainsi :

jsonObject.phoneNumber[0].type
//retourne "home" 

Et en passant voici un petit lien pour Convertir du XML et JSON et inversement.
http://jsontoxml.utilities-online.info/