[geojquery] accordion plugin

[js at cgeo.eu]

Hi list:

regarding the 'two ways' geojquery can be implemented, we would prefer  
the second one, say, to do the same thing geoext/hslayers does but  
with jquery instead of extjs.

That's why our idea is to extend OL with JQuery funcionality and we  
would priorize the plugins/clases of components OL doesn't have like  
trees, accordion or a grid.

Here is a simple example for a plugin, it's just a one day work so we  
are quite shure that it could done better. This plugin doesn't  
implement methods to keep it simple, for shure it could be done (for  
example the mouseovers in http://188.40.69.131/geojquery/index.php ).

Maybe it's better do implement clases inside the plugins to acces  
methods like mouse-overs, ¿what do you think about this idea? ¿Are  
there any examples?

The accordion plugin-example is here:  
http://188.40.69.131/geojquery/index2.php it lists some of the loaded  
hiking trails of tenerife island.
By zooming in, the number of trails in the accordion gets reduced.

First, we generate the accordion en JQuery over a layer like this:

  <div id="accordion">
     <h3><a href="#">First header</a></h3>
     <div>First content</div>
     <h3><a href="#">Second header</a></h3>
     <div>Second content</div>
</div>

we execute:

<script type="text/javascript">
$(function() {
$("#accordion").accordion();
});
</script>


The js-code, first we generate the wfs point layer:
   layerSenderosCentralAntiguos = new OpenLayers.Layer.WFS(
             "SENDEROS_CENTRAL_ANTIGUOS",
             "/cgi-bin/mapserv?map=/var/maps/senderos_antiguos_sel.map",

             {
                 typename: "SENDEROS_CENTRAL_ANTIGUOS"
             },
             {
                 styleMap: s_map,
                 extractAttributes:'true',
                 visibility: true,
                 projections:["epsg:4326","epsg:32628"]
             }
         );
We apply to the div with id=listSenderos el result del plugin AcordionWFS:

$("#listSenderos").AcordionWFS(layerSenderosCentralAntiguos,'nombre','accordion');

This would be all.


This is the code of the jquery plugin (it's done like described in  
http://docs.jquery.com/Plugin#Options)

jQuery.fn.AcordionWFS =  
function(layerWFS,attributes_ppal,acorddionName,options) {
   // define defaults and override with options, if available
   // by extending the default settings, we don't modify the argument
   settings = jQuery.extend({
      name: "defaultName",
      size: 5,
      global: true
   }, options);

   //Search the id of the object for which we want to generate the accordion

   var obj = "#" + this.attr("id")

    //Register the event "loadend" for the layer
    layerWFS.events.register(
     "loadend",
     layerWFS,
     function() {
         var cbc
         var content=''
         var html='<div id="' + acorddionName + '">'

         //for all features of the WFS generate the codigo in function  
del format del accordion needed by jquery

         for(var  obj_aux  in layerWFS.features){

                 for(var  res  in layerWFS.features[obj_aux]['attributes']){

                     switch (res){
                         case attributes_ppal:
                             cbc = '<h3><a href="#">' +  
layerWFS.features[obj_aux]['attributes'][res] + '</a></h3>'
                         break;
                         case 'the_geom':
                         case 'boundedBy':
                         case 'msGeometry':

                         break;
                         default:
                             content += '<b>' + res +":</b>"+  
layerWFS.features[obj_aux]['attributes'][res]+"<br/>"
                         break;
                     }

                 }
                 html +=  cbc + '<div>' + content + '</div>'
                 cbc = ''
                 content = ''

         }
         html += "</div>"

          //insert the HTML in the accordion

         $(obj).html( html)
         var aux = "#" +acorddionName

         //Init the accordion

         $(aux).accordion({
             header: "h3",
             active: false,
             alwaysOpen: false})
        });
}

Well, what do you think about 'this way' of implementing geoJQuery?
Jan