| 1 | <?php |
|---|
| 2 | # -- BEGIN LICENSE BLOCK --------------------------------------- |
|---|
| 3 | # |
|---|
| 4 | # This file is part of Dotclear 2. |
|---|
| 5 | # |
|---|
| 6 | # Copyright (c) 2003-2013 Olivier Meunier & Association Dotclear |
|---|
| 7 | # Licensed under the GPL version 2.0 license. |
|---|
| 8 | # See LICENSE file or |
|---|
| 9 | # http://www.gnu.org/licenses/old-licenses/gpl-2.0.html |
|---|
| 10 | # |
|---|
| 11 | # -- END LICENSE BLOCK ----------------------------------------- |
|---|
| 12 | |
|---|
| 13 | require dirname(__FILE__).'/../inc/admin/prepend.php'; |
|---|
| 14 | |
|---|
| 15 | dcPage::check('usage,contentadmin'); |
|---|
| 16 | ?> |
|---|
| 17 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|---|
| 18 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> |
|---|
| 19 | <head> |
|---|
| 20 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
|---|
| 21 | <meta name="ROBOTS" content="NOARCHIVE,NOINDEX,NOFOLLOW" /> |
|---|
| 22 | <meta name="GOOGLEBOT" content="NOSNIPPET" /> |
|---|
| 23 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|---|
| 24 | <title>Bibliothèque de styles - Dotclear - 2.6</title> |
|---|
| 25 | <link rel="icon" type="image/png" href="images/favicon.png" /> |
|---|
| 26 | <!--[if lt IE 9]> |
|---|
| 27 | <script type="text/javascript" src="js/ie7/IE9.js"></script> |
|---|
| 28 | <link rel="stylesheet" type="text/css" href="style/iesucks.css" /> |
|---|
| 29 | <![endif]--> |
|---|
| 30 | <link rel="stylesheet" href="style/default.css" type="text/css" media="screen" /> |
|---|
| 31 | <style type="text/css"> |
|---|
| 32 | #content > h2 {padding-top: 2.5em;} |
|---|
| 33 | #content > h2:first-child {padding-top: 0} |
|---|
| 34 | .one-box .box {border: 1px solid #ddd; padding: 2px .5em;} |
|---|
| 35 | </style> |
|---|
| 36 | <script type="text/javascript" src="js/jquery/jquery.js"></script> |
|---|
| 37 | <script type="text/javascript" src="js/jquery/jquery.pageTabs.js"></script> |
|---|
| 38 | <script type="text/javascript" src="js/jquery/jquery.biscuit.js"></script> |
|---|
| 39 | <script type="text/javascript" src="js/jquery/jquery.bgFade.js"></script> |
|---|
| 40 | <script type="text/javascript" src="js/common.js"></script> |
|---|
| 41 | <script type="text/javascript" src="js/prelude.js"></script> |
|---|
| 42 | <script type="text/javascript"> |
|---|
| 43 | //<![CDATA[ |
|---|
| 44 | dotclear.img_plus_alt = 'dévoiler'; |
|---|
| 45 | dotclear.img_minus_alt = 'cacher'; |
|---|
| 46 | dotclear.img_menu_on = 'images/menu_on.png'; |
|---|
| 47 | dotclear.img_menu_off = 'images/menu_off.png'; |
|---|
| 48 | dotclear.msg.help = 'Aide pour cette page'; |
|---|
| 49 | dotclear.msg.help_hide = 'Masquer'; |
|---|
| 50 | dotclear.msg.error = 'Erreur :'; |
|---|
| 51 | //]]> |
|---|
| 52 | </script> |
|---|
| 53 | <script type="text/javascript"> |
|---|
| 54 | //<![CDATA[ |
|---|
| 55 | dotclear.unfolded_sections = {'dc_favorites_menu':true,'dc_system_menu':true}; |
|---|
| 56 | //]]> |
|---|
| 57 | </script> |
|---|
| 58 | <script type="text/javascript"> |
|---|
| 59 | //<![CDATA[ |
|---|
| 60 | $(function() { |
|---|
| 61 | $.pageTabs('two-boxes'); |
|---|
| 62 | }); |
|---|
| 63 | //]]> |
|---|
| 64 | </script> |
|---|
| 65 | </head> |
|---|
| 66 | |
|---|
| 67 | <body id="dotclear-admin" class="no-js"> |
|---|
| 68 | <div id="header"> |
|---|
| 69 | <ul id="prelude"> |
|---|
| 70 | <li><a href="#content">Aller au contenu</a></li> |
|---|
| 71 | <li><a href="#main-menu">Aller au menu</a></li> |
|---|
| 72 | <li><a href="#qx">Aller à la recherche</a></li> |
|---|
| 73 | </ul> |
|---|
| 74 | <div id="top"><h1><a href="./index.php">Bibliothèque de styles - Dotclear - 2.6+</a></h1></div> |
|---|
| 75 | <div id="info-boxes"> |
|---|
| 76 | <div id="info-box1"> |
|---|
| 77 | <p>Informations sur les styles disponibles dans l'admin pour les développeurs de plugins</p> |
|---|
| 78 | </div> |
|---|
| 79 | <div id="info-box2">Octobre 2013</div> |
|---|
| 80 | </div> |
|---|
| 81 | </div><!-- /header --> |
|---|
| 82 | |
|---|
| 83 | <div id="wrapper" class="clearfix"> |
|---|
| 84 | <div id="main"> |
|---|
| 85 | <div id="content" class="clearfix"> |
|---|
| 86 | |
|---|
| 87 | <h2><span class="page-title">Typographie</span></h2> |
|---|
| 88 | <h3 id="texte">Textes</h3> |
|---|
| 89 | <p>La font-size de base est à 1.2rem (la valeur <code>1rem</code> correspond à 10px). Si vous utilisez l'unité <code>rem</code> pensez à faire précéder la déclaration par son équivalent |
|---|
| 90 | en pixels pour rester compatible avec Internet Explorer. L'interlignage courant est à 1.5.</p> |
|---|
| 91 | <p>La liste suivante est de class <code>"nice"</code>. Elle est semblable aux listes ordinaires mais avec des puces carrées.</p> |
|---|
| 92 | <ul class="nice"> |
|---|
| 93 | <li>Les textes courants sont en Arial, Helvetica ou sans-serif. </li> |
|---|
| 94 | <li>Le code adopte la fonte Andale Mono, Courier New ou monospace.</li> |
|---|
| 95 | <li>Les liens ont des aspects différents au focus et au survol. Il faut conserver cette distinction, nécessaire à l'accessibilité et l'ergonomie.</li> |
|---|
| 96 | </ul> |
|---|
| 97 | |
|---|
| 98 | <h3 id="titres">Titre h3</h3> |
|---|
| 99 | <p>Le titre de niveau h1 est réservé au titre du site-admin. Le titre de niveau h2 est réservé au breadcrumb/titre de la page courante. On utilise les titres de niveau h3 en premier niveau de titre à l'intérieur des pages, comme sur la page Import/Export.</p> |
|---|
| 100 | <p>Il ne faut pas choisir un niveau de titre en fonction de son aspect mais respecter une hiérarchie cohérente. On peut obtenir visuellement l'aspect d'un titre h3 en donnant à l'élément la class <code>"as_h3"</code>.</p> |
|---|
| 101 | <h4>Titre de niveau h4</h4> |
|---|
| 102 | <p>On peut obtenir visuellement l'aspect d'un titre h4 en donnant à l'élément la class <code>"as_h4"</code>.</p> |
|---|
| 103 | <h5>Titre de niveau h5</h5> |
|---|
| 104 | <p>Le titre de niveau h5 est assez peu employé mais son style est prévu. Dans une admin de base, on utilise les niveaux |
|---|
| 105 | h5 pour certains éléments du sidebar du billet, mais un style particulier leur est alors appliqué pour ressembler aux autres |
|---|
| 106 | items de ce sidebar.</p> |
|---|
| 107 | <div class="fieldset"> |
|---|
| 108 | <h4>Titres des encadrés</h4> |
|---|
| 109 | <p>Les titres de boîte encadrées (div de class <code>"fieldset"</code>, comme ici) se présentent comme ci-dessus.</p> |
|---|
| 110 | <p>On peut utiliser, quel que soit le niveau hx de cet intertitre la class <code>"pretty-title"</code> pour obtenir l'effet ci-dessus.</p> |
|---|
| 111 | </div> |
|---|
| 112 | <h4 class="smart-title">Autre variante</h4> |
|---|
| 113 | <p>On dispose également d'une class <code>"smart-title"</code> pour obtenir une présentation comme celle du titre de ce paragraphe.</p> |
|---|
| 114 | |
|---|
| 115 | <h2><span class="page-title">Layouts</span></h2> |
|---|
| 116 | |
|---|
| 117 | <h3 id="onglets">Onglets</h3> |
|---|
| 118 | <p>Les descriptions des constructions en multi-colonnes ci-dessous présentent un exemple de répartition en onglets.</p> |
|---|
| 119 | |
|---|
| 120 | <h3 id="multi-colonnage">Multi-colonnage</h3> |
|---|
| 121 | <div id="one-box" class="multi-part" title="One-box"> |
|---|
| 122 | <h4>Boîtes distribuées horizontalement</h4> |
|---|
| 123 | <div class="one-box"> |
|---|
| 124 | <div class="box"> |
|---|
| 125 | <p><span class="step">1</span> Toutes les boîtes de class <code>"box"</code> placées à l'intérieur d'une boîte de class <code>"one-box"</code> se distribuent horizontalement (imaginez que chaque boîte est un mot dans un paragraphe). Si les largeurs de ces boîtes ne sont pas spécifiquement définies dans la CSS, elle s'ajustent à leur contenu.</p> |
|---|
| 126 | </div> |
|---|
| 127 | <div class="box"> |
|---|
| 128 | <p><span class="step">2</span> Voici une petite boîte.</p> |
|---|
| 129 | </div> |
|---|
| 130 | <div class="box"> |
|---|
| 131 | <p><span class="step">3</span> Une autre petite boîte.</p> |
|---|
| 132 | </div> |
|---|
| 133 | <div class="box"> |
|---|
| 134 | <p><span class="step">4</span> Par défaut les « lignes » de boîtes <code>"box"</code> sont justifiées au sein de la boîte <code>"one-box"</code> et l'espacement se répartit entre elles.</p> |
|---|
| 135 | </div> |
|---|
| 136 | <div class="box"> |
|---|
| 137 | <p><span class="step">5</span> Si vous souhaitez un autre alignement des boîtes entre elles vous pouvez ajouter les class :</p> |
|---|
| 138 | <ul class="nice clear"> |
|---|
| 139 | <li><code>"txt-left"</code>,</li> |
|---|
| 140 | <li><code>"txt-right"</code></li> |
|---|
| 141 | <li>ou <code>"txt-center"</code></li> |
|---|
| 142 | </ul> |
|---|
| 143 | <p>à la class <code>"one-box"</code>.</p> |
|---|
| 144 | </div> |
|---|
| 145 | <div class="box"> |
|---|
| 146 | <p><span class="step">6</span> Le cadre placé ici autour de chaque boîte ne fait pas partie des styles par défaut.</p> |
|---|
| 147 | </div> |
|---|
| 148 | </div> |
|---|
| 149 | </div> |
|---|
| 150 | <div id="two-boxes" class="multi-part" title="Two-boxes"> |
|---|
| 151 | <h4>Boîtes distribuées deux par deux</h4> |
|---|
| 152 | <div> |
|---|
| 153 | <div class="two-boxes odd"> |
|---|
| 154 | <p><span class="step">1</span> Les boîtes de class <code>"two-boxes"</code> ont une règle CSS <code>display:inline-block;</code>. Elles se rangent alternativement à gauche et à droite. Pour plus de clarté, les blocs sont ici numérotés avec leur ordre dans le flux.</p> |
|---|
| 155 | </div><!-- |
|---|
| 156 | --><div class="two-boxes even"> |
|---|
| 157 | <p><span class="step">2</span> S'il n'y a que deux boîtes, une autre class n'est pas nécessaire. S'il y en a plusieurs, il est conseillé de leur attribuer alternativement les class <code>"odd"</code> et <code>"even"</code> pour que les marges se placent correctement.</p> |
|---|
| 158 | </div><!-- |
|---|
| 159 | --><div class="two-boxes odd"> |
|---|
| 160 | <p><span class="step">3</span> Attention, il faut soit ne pas retourner à la ligne entre la fermeture d'une boîte <code>"two-boxes"</code> et l'ouverture de la suivante soit adopter la méthode de commentaire vide mise en place ici et expliquée chez <a href="http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html">Alsacréations</a> (« Méthode 2 »).</p> |
|---|
| 161 | </div><!-- |
|---|
| 162 | --><div class="two-boxes even"> |
|---|
| 163 | <div class="box"> |
|---|
| 164 | <p><span class="step">4</span> Toutes les boîtes de class <code>"box"</code><br /> |
|---|
| 165 | placées au sein d'une boîte <code>"two-boxes"</code>…</p> |
|---|
| 166 | </div> |
|---|
| 167 | <div class="box"> |
|---|
| 168 | <p><span class="step">4 bis</span>… se distribuent horizontalement comme dans <br /> |
|---|
| 169 | une boîte <code>"one-box"</code>.</p> |
|---|
| 170 | </div> |
|---|
| 171 | </div> |
|---|
| 172 | </div> |
|---|
| 173 | </div> |
|---|
| 174 | <div id="three-boxes" class="multi-part" title="Three-boxes"> |
|---|
| 175 | <h4>Boîtes distribuées trois par trois</h4> |
|---|
| 176 | <div> |
|---|
| 177 | <div class="three-boxes"> |
|---|
| 178 | <div class="box"> |
|---|
| 179 | <p>Sur le même principe que les « two-boxes » on peut utiliser des boîtes de class <code>"three-boxes"</code> pour répartir les contenus sur trois colonnes de 30% chacune (le reste est occupé par les marges).</p> |
|---|
| 180 | </div> |
|---|
| 181 | </div><!-- |
|---|
| 182 | --><div class="three-boxes"> |
|---|
| 183 | <div class="box"> |
|---|
| 184 | <p>Comme pour les "two-boxes" il faut soit ne pas laisser d'espace ou de retour à la ligne entre les boîtes, soit adopter la méthode recommandée plus haut.</p> |
|---|
| 185 | </div> |
|---|
| 186 | </div><!-- |
|---|
| 187 | --><div class="three-boxes"> |
|---|
| 188 | <div class="box"> |
|---|
| 189 | <p>Dans les « two-boxes » comme dans les « three-boxes », on peut placer à l'intérieur plusieurs autres div de class="box" qui s'afficheront les unes à côté des autres ou l'une en dessous de l'autre selon la place dont elles disposent.</p> |
|---|
| 190 | </div> |
|---|
| 191 | </div> |
|---|
| 192 | </div> |
|---|
| 193 | </div> |
|---|
| 194 | <div id="two-cols-50-50" class="multi-part" title="Two-cols (50/50)"> |
|---|
| 195 | <h4>Deux colonnes flottantes de largeurs égales</h4> |
|---|
| 196 | <div class="two-cols clearfix"> |
|---|
| 197 | <div class="col"> |
|---|
| 198 | <p>La div englobante porte la class <code>"two-cols"</code>, chacune de ses div porte la class <code>"col"</code>. |
|---|
| 199 | Sans autre précision les deux colonnes sont d'égale largeur.</p> |
|---|
| 200 | </div> |
|---|
| 201 | <div class="col"> |
|---|
| 202 | <p>Attention : ces colonnes sont construites avec des flottants, il faut donc penser à mettre une class <code>clear</code> à l'élément suivant ou ajouter la class <code>"clearfix"</code> à la <code>div class="two-cols"</code>.</p> |
|---|
| 203 | </div> |
|---|
| 204 | </div> |
|---|
| 205 | </div> |
|---|
| 206 | <div id="two-cols-70-30" class="multi-part" title="Two-cols (70/30)"> |
|---|
| 207 | <h4>Deux colonnes flottantes de largeurs inégales</h4> |
|---|
| 208 | <div class="two-cols clearfix"> |
|---|
| 209 | <div class="col70"> |
|---|
| 210 | <p><span class="step">col70</span> La div englobante porte la class <code>"two-cols"</code>. |
|---|
| 211 | Pour obtenir des colonnes inégales, on dispose des classes <code>"col70"</code> et <code>col30</code> à attribuer à l'une ou à l'autre de ses colonnes.</p> |
|---|
| 212 | </div> |
|---|
| 213 | <div class="col30"> |
|---|
| 214 | <p><span class="step">col30</span> Penser à mettre une class <code>"clear"</code> à l'élément suivant ou ajouter la class <code>"clearfix"</code> <code>div class="two-cols"</code>.</p> |
|---|
| 215 | </div> |
|---|
| 216 | </div> |
|---|
| 217 | </div> |
|---|
| 218 | <div id="three-cols" class="multi-part" title="Three-cols (deprecated)"> |
|---|
| 219 | <h4>Trois colonnes flottantes de largeurs égales</h4> |
|---|
| 220 | <p class="warning"><strong>Deprecated.</strong> Ces règles sont conservées dans la 2.6 par souci de rétro-compatibilité mais il est recommandé d'utiliser désormais le colonnage <a href="#three-boxes">three-boxes</a>.</p> |
|---|
| 221 | <div class="three-cols clearfix"> |
|---|
| 222 | <div class="col"> |
|---|
| 223 | <h5>Colonne 1</h5> |
|---|
| 224 | <p>La div englobante porte la class <code>"three-cols"</code>, chacune de ses div porte la class <code>"col"</code>. Les trois colonnes sont d'égale largeur.</p> |
|---|
| 225 | </div> |
|---|
| 226 | <div class="col"> |
|---|
| 227 | <h5>Colonne 2</h5> |
|---|
| 228 | <p>Voici une deuxième colonne. N'oubliez pas d'ajouter la class <code>"clearfix"</code> à la class <code>"three-cols"</code> ou un élément de class <code>"clear"</code> après cet élément.</p> |
|---|
| 229 | </div> |
|---|
| 230 | <div class="col"> |
|---|
| 231 | <h5>Colonne 3</h5> |
|---|
| 232 | <p>Voilà la troisième colonne.</p> |
|---|
| 233 | </div> |
|---|
| 234 | </div> |
|---|
| 235 | </div> |
|---|
| 236 | <hr /> |
|---|
| 237 | <p><strong>Note :</strong> dans les exemples les valeurs et les numérotations sont placées dans un <code>span class="step"</code> (et ressortent donc dans un petit bloc à fond gris).</p> |
|---|
| 238 | |
|---|
| 239 | <h2><span class="page-title">Interactions</span></h2> |
|---|
| 240 | |
|---|
| 241 | <h3 id="elements">Éléments de formulaire</h3> |
|---|
| 242 | <form class="two-cols clearfix" action="#"> |
|---|
| 243 | <div class="col"> |
|---|
| 244 | <p><label for="ex1">Label simple + input text :</label><input id="ex1" type="text" /></p> |
|---|
| 245 | <p class="form-note">p class="form-note".</p> |
|---|
| 246 | <p><label for="ex2" class="required"><abbr title="'.__('Required field').'">*</abbr> Label class="required" :</label> <input id="ex2" type="text" /></p> |
|---|
| 247 | <p><label for="ex3">Input class="maximal" :</label> <input id="ex3" type="text" class="maximal" /></p> |
|---|
| 248 | <p><label for="ex4" class="classic">Label class="classic" :</label> <input id="ex4" type="text" /></p> |
|---|
| 249 | </div> |
|---|
| 250 | <div class="col"> |
|---|
| 251 | <p class="field"><label for="ex5">p.field label + input :</label><input id="ex5" type="text" /></p> |
|---|
| 252 | <p class="field"><label for="ex6">p.field label + select :</label> |
|---|
| 253 | <select id="ex6"><option value="opt2">Option 2</option><option selected="selected" value="opt2">Option 2</option></select> |
|---|
| 254 | </p> |
|---|
| 255 | <p><label class="classic" for="ex7"><input type="checkbox" checked="checked" id="ex7" value="1" name="ex7" /> |
|---|
| 256 | Checkbox (label.classic)</label></p> |
|---|
| 257 | <p><label class="classic" for="ex8-1"><input type="radio" checked="checked" id="ex8-1" value="ex8-1" name="ex8-1" /> |
|---|
| 258 | Bouton radio 1 (label.classic)</label></p> |
|---|
| 259 | <p><label class="classic" for="ex8-2"><input type="radio" id="ex8-2" value="ex8-2" name="ex8-2" /> |
|---|
| 260 | Bouton radio 2 (label.classic)</label></p> |
|---|
| 261 | <p class="form-note">Les checkboxes et les boutons radio sont dans la balise <label>.</p> |
|---|
| 262 | </div> |
|---|
| 263 | </form> |
|---|
| 264 | <form action="#" class="clear"> |
|---|
| 265 | <fieldset> |
|---|
| 266 | <legend>Légende de fieldset</legend> |
|---|
| 267 | <p>Attention: Les fieldsets ne doivent être utilisés que pour isoler un groupe de champs au sein d'un formulaire.</p> |
|---|
| 268 | </fieldset> |
|---|
| 269 | </form> |
|---|
| 270 | |
|---|
| 271 | <h3 id="boutons">Boutons</h3> |
|---|
| 272 | <div class="clearfix"> |
|---|
| 273 | <p><a class="button add">a.button.add</a> Se place en haut à droite (dans un p.top-add)</p> |
|---|
| 274 | <p><input type="button" value="Type button" /> <a href="#" class="button">a.button</a> <input type="reset" value="Type reset" /> <a href="#" class="button reset">a.reset</a></p> |
|---|
| 275 | <p><input type="submit" value="Type submit" /> <input type="submit" class="delete" value="Type submit class delete" /> <a href="#" class="button delete">a.button delete</a></p> |
|---|
| 276 | <p><input type="submit" value="Type submit class disabled" class="disabled" /></p> |
|---|
| 277 | </div> |
|---|
| 278 | |
|---|
| 279 | <h3 id="messages">Messages</h3> |
|---|
| 280 | <h4 class="smart-title">Messages système</h4> |
|---|
| 281 | <p>Il existe quatre types de messages système auxquels correspondent des classes CSS : .error, .message, .success, .warning-msg. Ils s'affichent en haut de page, sous le titre/breadcrumb.</p> |
|---|
| 282 | <div class="message"> |
|---|
| 283 | <p>Message simple. Le plus souvent horodaté dcPage::message</p> |
|---|
| 284 | </div> |
|---|
| 285 | <div class="success"> |
|---|
| 286 | <p>Message de succès. Le plus souvent horodaté dcPage::success</p> |
|---|
| 287 | </div> |
|---|
| 288 | <div class="warning-msg"> |
|---|
| 289 | <p>Message warning. Non horodaté dcPage::warning</p> |
|---|
| 290 | </div> |
|---|
| 291 | <div class="error"> |
|---|
| 292 | <p>Message d'erreur. Non horodaté dcPage::error</p> |
|---|
| 293 | </div> |
|---|
| 294 | <p>La classe .static-msg peut être utilisée directement pour affichage en haut de page :</p> |
|---|
| 295 | <div class="static-msg"> |
|---|
| 296 | <p>Comme le message simple mais sans effets de transition.</p> |
|---|
| 297 | </div> |
|---|
| 298 | <p>Un type de message réservé à Dotclear peut s'afficher en haut de la page :</p> |
|---|
| 299 | <div class="dc-update"> |
|---|
| 300 | <h3>Dotclear 42 est disponible</h3> |
|---|
| 301 | <p><a class="button submit" href="#">Mettre à jour maintenant</a> |
|---|
| 302 | <a class="button" href="u#">Me le rappeler plus tard</a></p> |
|---|
| 303 | <p class="updt-info"><a href="#">Informations sur cette version</a></p> |
|---|
| 304 | </div> |
|---|
| 305 | <h4 class="smart-title">Messages contextuels</h4> |
|---|
| 306 | <p class="warn">Paragraphe de message d'alerte class warn ou warning.</p> |
|---|
| 307 | <p class="info">Paragraphe de message de class info.</p> |
|---|
| 308 | <p>Ces messages sont en display:inline-block. Le fond s'adapte à la longueur du message.</p> |
|---|
| 309 | |
|---|
| 310 | <h2><span class="page-title">Navigation</span></h2> |
|---|
| 311 | |
|---|
| 312 | <h3 id="direct">Selecteur d'accès direct</h3> |
|---|
| 313 | <p>Sur des pages longues et denses comme les pages about:config ou about:preferences, on peut utiliser un sélecteur pour faciliter l'accès direct aux sections.</p> |
|---|
| 314 | <p class="anchor-nav"> |
|---|
| 315 | <label class="classic" for="lp_nav">Aller à : </label> |
|---|
| 316 | <select id="lp_nav" name="lp_nav"> |
|---|
| 317 | <option value="#l_accessibility">accessibility</option> |
|---|
| 318 | <option value="#l_dashboard">dashboard</option> |
|---|
| 319 | <option value="#l_dmhostingmonitor">dmhostingmonitor</option> |
|---|
| 320 | <option value="#l_dmpending">dmpending</option> |
|---|
| 321 | <option value="#l_favorites">favorites</option> |
|---|
| 322 | <option value="#l_filters">filters</option> |
|---|
| 323 | <option value="#l_interface">interface</option> |
|---|
| 324 | <option value="#l_lists">lists</option> |
|---|
| 325 | <option value="#l_toggles">toggles</option> |
|---|
| 326 | </select> |
|---|
| 327 | <input type="submit" id="lp_submit" value="Ok" style="display: none;" /> |
|---|
| 328 | <input type="hidden" value="aboutConfig" name="p" /> |
|---|
| 329 | </p> |
|---|
| 330 | <h3 id="prevnext">Navigation contextuelle</h3> |
|---|
| 331 | <p><a title="Titre du lien (nouvelle fenêtre)" onclick="window.open(this.href);return false;" href="http://fr.dotclear.org/blog" class="onblog_link">Lien vers le blog <img alt="" src="images/outgoing-blue.png" /></a></p> |
|---|
| 332 | <p class="nav_prevnext"><a title="Titre de l'élément précédente" href="post.php?id=4145">« Élément précédent</a> | <a title="Titre de l'élément suivant" href="#">Élément suivant »</a></p> |
|---|
| 333 | |
|---|
| 334 | </div><!-- /content --> |
|---|
| 335 | </div><!-- /main --> |
|---|
| 336 | <div id="main-menu"> |
|---|
| 337 | <form id="search-menu" action="search.php" method="get"> |
|---|
| 338 | <p><label for="qx" class="hidden">Chercher : </label><input type="text" size="30" name="qx" id="qx" maxlength="255" /><input type="submit" value="OK" /></p> |
|---|
| 339 | </form> |
|---|
| 340 | <div id="favorites-menu"> |
|---|
| 341 | <h3>Typo</h3> |
|---|
| 342 | <ul> |
|---|
| 343 | <li><a href="#texte">Texte</a></li> |
|---|
| 344 | <li><a href="#titres">Titres hx</a></li> |
|---|
| 345 | </ul> |
|---|
| 346 | </div><!-- /favorites-menu --> |
|---|
| 347 | <div id="blog-menu"> |
|---|
| 348 | <h3>Layouts</h3> |
|---|
| 349 | <ul> |
|---|
| 350 | <li><a href="#onglets">Onglets</a></li> |
|---|
| 351 | <li><a href="#multi-colonnage">Multi-colonnage</a></li> |
|---|
| 352 | </ul> |
|---|
| 353 | </div><!-- /blog-menu --> |
|---|
| 354 | <div id="system-menu"> |
|---|
| 355 | <h3>Interactions</h3> |
|---|
| 356 | <ul> |
|---|
| 357 | <li><a href="#elements">Éléments de formulaire</a></li> |
|---|
| 358 | <li><a href="#boutons">Boutons</a></li> |
|---|
| 359 | <li><a href="#messages">Messages</a></li> |
|---|
| 360 | </ul> |
|---|
| 361 | </div><!-- /system-menu --> |
|---|
| 362 | <div id="plugins-menu"> |
|---|
| 363 | <h3>Navigation</h3> |
|---|
| 364 | <ul> |
|---|
| 365 | <li><a href="#direct">Accès direct</a></li> |
|---|
| 366 | <li><a href="#prevnext">Précédent, suivant</a></li> |
|---|
| 367 | </ul> |
|---|
| 368 | </div><!-- /plugins-menu --> |
|---|
| 369 | </div><!-- /main-menu --> |
|---|
| 370 | |
|---|
| 371 | <div id="footer"> |
|---|
| 372 | <a href="http://dotclear.org/" title="Merci de manger des clafoutis."><img src="style/dc_logos/w-dotclear90.png" alt="Merci d'utiliser Dotclear 2.6-dev." /></a> |
|---|
| 373 | </div><!-- /footer --> |
|---|
| 374 | <!-- |
|---|
| 375 | . |
|---|
| 376 | ,;:'`':: |
|---|
| 377 | __|| |
|---|
| 378 | _____/LLLL\_ |
|---|
| 379 | \__________"| |
|---|
| 380 | ~^~^~^~^~^~^~^~^~^~ |
|---|
| 381 | --> |
|---|
| 382 | </div><!-- /wrapper --> |
|---|
| 383 | </body> |
|---|
| 384 | </html> |
|---|
