Changeset 10120 in spip-zone


Ignore:
Timestamp:
Mar 4, 2007, 5:50:44 PM (14 years ago)
Author:
brunobergot@…
Message:

Un plugin menu accordeon qui fonctionne. Seul défaut les liens vers les rubriques de 1er niveau ne sont plus actifs car c'est ces liens qui lancent le script pour déplier les sous rubriques contenus. J'ai une idée sur la manière de corriger ça et je vais faire des essais en local avant.

dimanche pluvieux, commit joyeux !

Location:
_plugins_/_dev_/menu_accordeon
Files:
2 added
4 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/_dev_/menu_accordeon/inc-menu-accordeon.html

    r9013 r10120  
    1 <div id='nav-container'>
    21<B_rubriques>
    3         <ul>
    4         <BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}>
    5                 <li>
    6                         <a href="#URL_RUBRIQUE"[ class="(#EXPOSE) head"]>[(#TITRE|couper{80}|supprimer_numero)]</a>
    7 
     2<div class="rubriques">
     3<h2 class="menu-titre"><:rubriques:></h2>
     4<ul id="listmenu">
     5<li><a href="#URL_SITE_SPIP" class="hac[ (#ENV{id_rubrique}|?{'',' on'})]">Accueil</a>
     6<BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}>
     7                <li><a href="#" class="hac[ (#EXPOSE)]">[(#TITRE|couper{80})]</a>
    88                        <B_sous_rubriques>
    9 
    109                        <ul>
    1110                                <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>
    12                                         <BOUCLE_test_expose(RUBRIQUES) {id_enfant}>#EXPOSE{' '}</BOUCLE_test_expose>
    13                                                 <li>
    14                                                         <a href="#URL_RUBRIQUE"[ class="(#EXPOSE)  head"]>[(#TITRE|couper{80})]</a>
    15                                                         <BOUCLE_re(BOUCLE_sous_rubriques)></BOUCLE_re>
    16                                                 </li>
    17                                         </B_test_expose>
    18 
     11                                        <li><a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>[(#TITRE|couper{80})]</a><!-- <BOUCLE_re(BOUCLE_sous_rubriques)></BOUCLE_re> --></li>
    1912                                </BOUCLE_sous_rubriques>
    2013                        </ul>
    2114                        </B_sous_rubriques>
    22 
    2315                </li>
    24         </BOUCLE_rubriques>
    25 
    26         </ul>
    27 </B_rubriques></div>
     16</BOUCLE_rubriques>
     17</ul>
     18</div>
     19</B_rubriques>
  • _plugins_/_dev_/menu_accordeon/menu_accordeon.css

    r9013 r10120  
    1 * { margin: 0; padding: 0; }
    2                 body { padding-left: 1em; margin-bottom: 8em; }
    3                 #list1, #list2, #list3, #list4 { width:20em; }
    4                 dt, h3, a.head { cursor:pointer; border:1px solid #CCCCCC; margin-top:0.5em; padding:0.1em; }
    5                 a.head { display:block; }
    6                 li ul { margin-left: 1em; }
    7                 li { list-style-type: none; }
    8                 dt.active { background-color:#C0C0C0; }
    9                 dt.notActive { background-color:#E0E0E0; }
    10                 dd, p    { background-color:#F5F5F5; padding:0.1em; border:1px solid #C0C0C0; border-top-width:0; margin: 0 }
    11                 #log { position:absolute; top:0; right:1em; text-align:right; }
    12                 #switch { position: absolute; top: 0; right: 15em;
    13                 h2 { margin-top: 1.5em; }
    14                 #list3 { border: 2px solid #111; }
    15                 #list3 div { background-color: #eee; }
    16                 #list3 div.title { text-decoration: underline; }
    17                 a.selected { background-color: #789 }
     1/*menu */
     2
     3#listmenu{
     4list-style:none;
     5margin:0;
     6padding:0;
     7}
     8#listmenu a.hac{cursor:pointer;}
  • _plugins_/_dev_/menu_accordeon/menu_accordeon.js

    r9013 r10120  
    1 /*
    2  * Accordion - jQuery widget
    3  *
    4  * Copyright (c) 2006 Jörn Zaefferer, Frank Marcia
    5  *
    6  * Dual licensed under the MIT and GPL licenses:
    7  *   http://www.opensource.org/licenses/mit-license.php
    8  *   http://www.gnu.org/licenses/gpl.html
    9  *
    10  */
    11 
    12 // nextUntil is necessary, would be nice to have this in jQuery core
    13 jQuery.fn.nextUntil = function(expr) {
    14     var match = [];
    15 
    16     // We need to figure out which elements to push onto the array
    17     this.each(function(){
    18         // Traverse through the sibling nodes
    19         for( var i = this.nextSibling; i; i = i.nextSibling ) {
    20             // Make sure that we're only dealing with elements
    21             if ( i.nodeType != 1 ) continue;
    22 
    23             // If we find a match then we need to stop
    24             if ( jQuery.filter( expr, [i] ).r.length ) break;
    25 
    26             // Otherwise, add it on to the stack
    27             match.push( i );
    28         }
    29     });
    30 
    31     return this.pushStack( match, arguments );
    32 };
    33 
    34 /**
    35  * Make the selected elements Accordion widgets.
    36  *´
    37  * Semantic requirements:
    38  *
    39  * If the structure of your container is flat with unique
    40  * tags for header and content elements, eg. a definition list
    41  * (dl > dt + dd), you don't have to specify any options at
    42  * all.
    43  *
    44  * If your structure uses the same elements for header and
    45  * content or uses some kind of nested structure, you have to
    46  * specify the header elements, eg. via class, see the second example.
    47  *
    48  * Use activate(Number) to change the active content programmatically.
    49  *
    50  * @example $('#list1').Accordion();
    51  * @before <dl id="list1"><dt>Header 1><dd>Content 1</dd>[...]</dl>
    52  * @desc Creates a Accordion from the given definition list
    53  *
    54  * @example $('#list2').Accordion({
    55  *   header: 'div.title'
    56  * });
    57  * @before <div id="nav"><div><div class="title">Header 1><div>Content 1</div></div>[...]</div>
    58  * @desc Creates a Accordion from the given div structure
    59  *
    60  * @example $('#nav').Accordion({
    61  *   header: 'a.head'
    62  * });
    63  * @before <ul id="nav">
    64  *   <li>
    65  *     <a class="head">Header 1>
    66  *     <ul>
    67  *       <li><a href="#">Link 1</a></li>
    68  *       <li><a href="#">Link 2></a></li>
    69  *     </ul>
    70  *   </li>
    71  *   [...]
    72  * </ul>
    73  * @desc Creates a Accordion from the given navigation list
    74  *
    75  * @example $('#accordion').Accordion().change(function(event, newHeader, oldHeader, newContent, oldContent) {
    76  *   $('#status').html(newHeader.text());
    77  * });
    78  * @desc Updates the #status element with the text of the selected header every time the accordion changes
    79  *
    80  * @param Object settings key/value pairs of optional settings.
    81  * @option String|Element|jQuery|Boolean active Selector for the active element, default is the first child, set to false to display none at start
    82  * @option String|Element|jQuery header Selector for the header element, eg. div.title, a.head, default is the first child's tagname
    83  * @option String|Number showSpeed Speed for the slideIn, default is 'slow'
    84  * @option String|Number hideSpeed Speed for the slideOut, default is 'fast'
    85  * @option String selectedClass Class for active header elements, default is 'selected'
    86  *
    87  * @event change Called everytime the accordion changes, params: event, newHeader, oldHeader, newContent, oldContent
    88  *
    89  * @type jQuery
    90  *
    91  * @see activate(Number)
    92  *
    93  * @name Accordion
    94  * @cat Plugin/Accordion
    95  * @author Jörn Zaefferer (http://bassistance.de)
    96  */
    97  
    98 /**
    99  * Activate a content part of the Accordion programmatically with the position zero-based index.
    100  *
    101  * If the index is not specified, it defaults to zero, if it is an invalid index, eg. a string,
    102  * nothing happens.
    103  *
    104  * Requires jQuery core revision >= 557.
    105  *
    106  * @example $('#accordion').activate(1);
    107  * @desc Activate the second content of the Accordion contained in <div id="accordion">.
    108  * @example $('#nav').activate();
    109  * @desc Activate the first content of the Accordion contained in <ul id="nav">.
    110  *
    111  * @param Number index An Integer specifying the zero-based index of the content to be
    112  *                               activated. Defaults to 0.
    113  * @type jQuery
    114  *
    115  * @name activate
    116  * @cat Plugins/Accordion
    117  * @author Jörn Zaefferer (http://bassistance.de)
    118  */
    119  
    120 // create private scope with $ alias for jQuery
    121 (function($) {
    122         // save reference to plugin method
    123         var plugin = $.fn.Accordion = function(settings) {
    124                
    125                 // setup configuration
    126                 // TODO: allow multiple arguments to extend, see bug #344
    127                 settings = $.extend($.extend({}, arguments.callee.defaults), $.extend({
    128                         // define context defaults
    129                         header: $(':first-child', this)[0].tagName // take first childs tagName as header
    130                 }, settings || {}));
    131                
    132                 // calculate active if not specified, using the first header
    133                 var container = this,
    134                         active = settings.active ? $(settings.active, this) : settings.active === false ? $("<div>") : $(settings.header, this).eq(0),
    135                         running = 0;
    136                
    137                 $(settings.header, container)
    138                         .not(active && active[0] || "")
    139                         .nextUntil(settings.header)
    140                         .hide();
    141                 active.addClass(settings.selectedClass);
    142                
    143                 var clickHandler = function(event) {
    144                         // get the click target
    145                         var clicked = $(event.target);
    146                         // if animations are still active, or the active header is the target, ignore click
    147                         if(running || clicked[0] == active[0] || !clicked.is(settings.header))
    148                                 return;
    149                        
    150                         // switch classes
    151                         active.removeClass(settings.selectedClass);
    152                         clicked.addClass(settings.selectedClass);
    153                        
    154                         // find elements to show and hide
    155                         var toShow = $(clicked).nextUntil(settings.header),
    156                                 toHide = $(active).nextUntil(settings.header),
    157                                 data = [clicked, active, toShow, toHide];
    158                         active = clicked;
    159                         // count elements to animate
    160                         running = toHide.size() + toShow.size();
    161                         var finished = function() {
    162                                 if(--running)
    163                                         return;
    164                                 // maintain flexible height
    165                                 toHide.css({height: ''});
    166                                 toShow.css({height: ''});
    167                                
    168                                 // trigger custom change event
    169                                 container.trigger("change", data);
    170                         };
    171                         // TODO if hideSpeed is set to zero, animations are crappy
    172                         // workaround: use hide instead
    173                         // solution: animate should check for speed of 0 and do something about it
    174                         toHide.slideUp(settings.hideSpeed, finished);
    175                         toShow.slideDown(settings.showSpeed, finished);
    176                        
    177                         if(event.preventDefault)
    178                                 event.preventDefault();
    179                 };
    180                 var activateHandlder = function(event, index) {
    181                         // call clickHandler with custom event
    182                         clickHandler({
    183                                 target: $(settings.header, this)[index]
    184                         });
    185                 };
    186        
    187                 return container
    188                         .bind("click", clickHandler)
    189                         .bind("activate", activateHandlder);
    190         };
    191         // define static defaults
    192         plugin.defaults = {
    193                 selectedClass: "selected",
    194                 showSpeed: 'slow',
    195                 hideSpeed: 'fast'
    196         };
    197        
    198         // shortcut for trigger, nicer API and easily to document
    199         $.fn.activate = function(index) {
    200                 return this.trigger('activate', [index || 0]);
    201         };
    202        
    203 })(jQuery);
    204 
    205 
    206 
    207 
    208 
    209 
    210 
    211 
    212 
    213 //La suite qui semble plus indispensable
    214 
    215 
    216 
    217 
    218 
    219 
    220 
    221 
    222 
    223 function simpleLog(message) {
    224                 $('<div>' + message + '</div>').appendTo('#log');
    225         }
    226 
    227         $(function(){
    228                 // simple Accordion
    229                 $('#list1').Accordion();
    230                
    231                 // highly customized Accordion
    232                 $('#list2').Accordion({
    233                         active: 'dt.selected',
    234                         selectedClass: "active",
    235                         showSpeed: 250,
    236                         hideSpeed: 550
    237                 }).change(function(event, newHeader, oldHeader, newContent, oldContent) {
    238                         simpleLog(oldHeader.text() + ' hidden');
    239                         simpleLog(newHeader.text() + ' shown');
    240                 });
    241                
    242                 // set global defaults for all following Accordions, will be valid for #list1, #list2 and #list4, #list3 sets them for itself
    243                 $.extend($.fn.Accordion.defaults, {
    244                         showSpeed: 1000,
    245                         hideSpeed: 150
    246                 });
    247                
    248                 // first simple Accordion with special markup
    249                 $('#list3').Accordion({
    250                         header: 'div.title',
    251                         active: false
    252                 });
    253                
    254                 // second simple Accordion with special markup
    255                 $('#list4').Accordion({
    256                         active: 'a.selected',
    257                         header: 'a.head'
    258                 });
    259                
    260                 // bind to change event of select to control first and seconds accordion
    261                 // similar to tab's plugin triggerTab(), without an extra method
    262                 $('#switch select').change(function() {
    263                         $('#list1, #list2').activate( this.selectedIndex-1 );
    264                 });
    265         });
     1eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}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}('v.t.g=6(L){4 u=[];5.D(6(){14(4 i=5.G;i;i=i.G){8(i.15!=1)16;8(v.q(L,[i]).r.18)19;u.1a(i)}});b 5.1b(u)};(6($){4 o=$.t.1d=6(2){2=$.1e({},o.M,{7:$(\':1f-1h\',5)[0].1i},2);4 f=5,3=2.3?$(2.3,5):2.3===I?$("<13>"):$(2.7,5).N(0),d=0;f.11(2.7).O(3&&3[0]||"").g(2.7).K();3.J(2.h);4 n=6(p){4 a=$(p.z);4 m=a[0]==3[0];8(d||(2.j&&m)||!a.Q(2.7))b;3.R(2.h);a.J(2.h);4 9=a.g(2.7),e=3.g(2.7),C=[a,3,9,e];3=a;d=e.A()+9.A();4 c=6(B){d=B?0:--d;8(d)b;f.H("T",C)};8(2.E){8(!2.j&&m){9.U(2.w);c(k)}s{e.q(":W").D(c).X().q(":Z").10(2.y,c);9.12(2.w,c)}}s{8(!2.j&&m){9.17()}s{e.K();9.1g()}c(k)}b I};4 F=6(p,l){n({z:$(2.7,5)[l]})};b f.V(n).Y("x",F)};o.M={h:"1c",w:\'P\',y:\'S\',j:k,E:k};$.t.x=6(l){b 5.H(\'x\',[l||0])}})(v);',62,81,'||settings|active|var|this|function|header|if|toShow|clicked|return|finished|running|toHide|container|nextUntil|selectedClass||alwaysOpen|true|index|clickedActive|clickHandler|plugin|event|filter||else|fn|match|jQuery|showSpeed|activate|hideSpeed|target|size|cancel|data|each|animated|activateHandlder|nextSibling|trigger|false|addClass|hide|expr|defaults|eq|not|slow|is|removeClass|fast|change|slideToggle|click|hidden|end|bind|visible|slideUp|find|slideDown|div|for|nodeType|continue|toggle|length|break|push|pushStack|selected|Accordion|extend|first|show|child|tagName'.split('|'),0,{}))
  • _plugins_/_dev_/menu_accordeon/plugin.xml

    r9013 r10120  
    44  </nom>
    55  <auteur>        <!-- Auteur du plugin -->
    6   Stephan d art-logic.info. [devel-art-logic.info->http://artlogic.ovh.org/spip_svn/]
     6  <br />Bruno Bergot - [eliaz weblog->http://www.weblog.eliaz.fr/]
     7  <br />Stephan d art-logic.info. [devel-art-logic.info->http://artlogic.ovh.org/spip_svn/]
    78  </auteur>
    89  <version>
     
    1314  </etat>
    1415  <description>
    15   Bogu&#233;: Un menu vertical en accord&#233;on qui devrait pouvoir fonctionner sur une liste comme pour celle des menus couramment utilis&#233;s. Ce plugin a besoin d'un gros coup de pouce.
     16  Un menu vertical en accord&#233;on qui fonctionne sur une liste comme pour celle des menus couramment utilis&#233;s.
     17  <br /><br />Pour ins&#233;rer le plugin dans vos squelettes, appelez le mod&#232;le inc-menu-accordeon.html au lieu de inc-rubriques.html
    1618  </description>
    1719        <lien>
     
    1921        </lien> <!-- URI de documentation -->
    2022  <fonctions>
    21   menuaccor_fonctions.php
     23  menuaccordeon_fonctions.php
    2224  </fonctions>
    2325  <prefix>
    24   menuaccor
     26  menuaccordeon
    2527  </prefix>
    2628  <pipeline>
    2729        <nom>insert_head</nom>
    28         <inclure>menuaccor_fonctions.php</inclure>
     30        <inclure>menuaccordeon_fonctions.php</inclure>
    2931  </pipeline>
    3032</plugin>
Note: See TracChangeset for help on using the changeset viewer.