jquery ui accordion dans la librairie
Par aurelien gerits le vendredi, 22 mai 2009, 01:42 - accordion - Lien permanent
Aujourd'hui de gros changement dans la librairie avec l'ajout de jQuery UI accordion.
Pour rappel, le "widget accordion" permet de créer un menu accordéon simplement avec divers options.
Ce widget faisant partie de jQuery UI est désormais intégrer dans l'API de magixcjQuery pour une utilisation dans votre code PHP.
Un exemple à également été ajouté dans le SVN pour apprendre, comprendre et surtout voir les améliorations possible avec vos suggestions.
Ce widget possède beaucoup de paramètres, les méthodes sont définie séparément pour une plus grande liberté.
Divers méthode pour une liberté total :
<?php
//instance jQuery
$jquery = new magixcjquery_jquery_magixcjQuery();
//instance plugin accordion
$accordion = new magixcjquery_jquery_plugins_ui_accordion();
print $jquery->startjQuery().
$accordion->jaccordion('#accordion',array(
$accordion->opt_Active()=>'2',
$accordion->opt_event()=>'"mouseover"',
$accordion->opt_icons()=>'{'.$accordion->opt_header().':'.'"ui-icon-circle-arrow-e",headerSelected:"ui-icon-circle-arrow-s"'.'}'
)).
$jquery->endjQuery();
?>
Avec la class jQuery_params pour faire la boucle dans le tableau de paramètre de la fonction header
<?php
//instance jQuery
$jquery = new magixcjquery_jquery_magixcjQuery();
require('../jquery.php');
//instance plugin accordion
$accordion = new magixcjquery_jquery_plugins_ui_accordion();
//instance class params spécial pour faire la boucle du tableau
$for= new magixcjquery_jquery_params();
//Tableau pour les paramètres de la fonction header de jquery ui
$headparams = array('"ui-icon-circle-arrow-e"','headerSelected:"ui-icon-circle-arrow-s"');
print $jquery->startjQuery();
$script = $accordion->jaccordion('"#accordion"',array(
$accordion->opt_Active()=>'2',
$accordion->opt_event()=>'"mouseover"',
$accordion->opt_icons()=>'{'.$accordion->opt_header().':'.$for->forUIValue($headparams).'}'
));
print $script;
print $jquery->endjQuery();
?>
Le code PHP ci-dessus retourne :
<script type="text/javascript">
$(document).ready(function(){
$("#accordion").accordion({
active:2,event:"mouseover",
icons:{header:"ui-icon-circle-arrow-e",headerSelected:"ui-icon-circle-arrow-s"}
});
})</script>
Prochaine étape, l'obsfuscation automatique avec packer dans la librairie pour optimiser le javascript au maximum.
Les premiers test sont pour le moins satisfaisant.
Voici un exemple avec notre code :
<?php
//instance jQuery
$jquery = new magixcjquery_jquery_magixcjQuery();
require('../jquery.php');
//instance plugin accordion
$accordion = new magixcjquery_jquery_plugins_ui_accordion();
//instance class params spécial pour faire la boucle du tableau
$for= new magixcjquery_jquery_params();
//Tableau pour les paramètres de la fonction header de jquery ui
$headparams = array('"ui-icon-circle-arrow-e"','headerSelected:"ui-icon-circle-arrow-s"');
print $jquery->startjQuery();
$script = $accordion->jaccordion('"#accordion"',array(
$accordion->opt_Active()=>'2',
$accordion->opt_event()=>'"mouseover"',
$accordion->opt_icons()=>'{'.$accordion->opt_header().':'.$for->forUIValue($headparams).'}'
));
//packer automatique de votre code dans cet exemple en numéric
$t1 = magixcjquery_jquery_packer_pack::timeStart();
$packed = magixcjquery_jquery_packer_pack::packer($script,95);
$t2 = magixcjquery_jquery_packer_pack::timeEnd();
print $packed;
print $jquery->endjQuery();
?>
Ce code donnera exactement le même résultat mais avec une obfuscation automatique :
<script type="text/javascript">
$(document).ready(function(){eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('$("#0").0({7:2,6:"8",b:{c:"1-3-4-5-9",d:"1-3-4-5-a"}});',14,14,'accordion|ui||icon|circle|arrow|event|active|mouseover|e|s|icons|header|headerSelected'.split('|'),0,{}))
})</script>
