Fiches techniquesInclusions [Version serveur]

Lien de modification des gadgets [quickedit]

Lien de modification des gadgets
Bien pratique ce petit tournevis situé en-dessous des gadgets et qui permet d'accéder aux paramètres.
Où se trouve le code et que cache-t'il ?

Présentation du code

Le code XML du lien de modification des gadgets est une inclusion stockée du côté des serveurs de Blogger. Le contenu de l'inclusion est inaccessible aux utilisateurs.

Dans pratiquement tous les gadgets, vous trouverez uniquement l'appel de cet inclusion :


  • Tableau de bord
  • Modèle
  • Modifier le code HTML


XML
<b:include name='quickedit'/>


Cette inclusion génère ce code :

Reconstitution rendu HTML
<span class='widget-item-control'>
  <span class='item-control blog-admin'>
    <a class='quickedit' href='//www.blogger.com/rearrange?blogID=BLOG_ID&amp;widgetType=GADGET_TYPE&amp;widgetId=GADGET_ID&amp;action=editWidget&amp;sectionId=SECTION_ID' onclick='return _WidgetManager._PopupConfig(document.getElementById(&#39;GADGET_ID&#39;));' target='configGADGET_ID' title='EDIT/MODIFIER'>
      <img alt='' height='18' src='https://resources.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
    </a>
  </span>
</span>
<div class='clear'/>


Réécrire l'inclusion dans le modèle

Pour réécrire explicitement l'inclusion dans le code XML de votre modèle, vous aurez besoin de certaines données. Consultez la bibliothèque.
Si vous ne trouvez pas l'inspiration, vous pouvez employer cette formule :

Reconstitution XML
Les class CSS item-control et blog-admin ont pour rôle d'afficher ou non la clef selon le PID de l'utilisateur qui visite la page.


Les CSS par défaut

Si vous avez désactivé le fichier CSS de Blogger, vous aurez besoin d'ajouter ces fichiers directement dans votre modèle, afin de masquer/démasquer le bouton.

Fichier CSS bundle
.item-control {
  display: none;
}

.item-control a,.item-action a {
  text-decoration: none !important;
}

.widget-item-control {
  float: right;
  height: 20px;
  margin-top: -20px;
  position: relative;
  z-index: 10;
}

.widget-item-control a {
  opacity: .5;
}

.widget-item-control a:hover {
  opacity: 1;
}

.widget .widget-item-control a img {
  border: none;
  padding: none;
  background: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -ie-box-shadow: none;
  box-shadow: none;
}


Modifier le contenu côté serveur

Bien que le contenu de l'inclusion est inaccessible aux utilisateurs, il est possible d'employer des alias. C'est-à-dire, remplacer les valeurs des données, en employant uniquement l'appel de l'inclusion.

Dans l'exemple ci-dessous, nous allons remplacer la valeur de l'infobulle (contenue dans la donnée data:edit-link), par un texte personnalisé.

Méthode 1 - Avec une balise Alias.
<b:with value='"modifier le gadget " + data:widget.type' var='edit-link'>
  <b:include name='quickedit'/>
</b:with>

Méthode 2 - Un alias dans un attribut data.
<b:include data='{ edit-link: ("modifier le gadget " + data:widget.type) }' name='quickedit'/>

La nouvelle valeur de la donnée data:edit-link sera :

modifier le gadget widget_type
Dernière modification :

Posts les plus consultés de ce blog

DéveloppementsFichiers XML
Favicons multi-sets [icon / apple-touch-icon / msapplication]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire