[geojquery] accordion plugin

[Volker Mische]

Hi Jan,

I know that you prefer the second way, but even in your example you
could benifit from the first way as well. E.g. at the part where you
register for the "loadend" event. There you need specific OpenLayers
knowledge. It would be much nicer if you could simply bind to a native
jQuery event.

But it's great to have examples like these to see how the API for the
first approach should look like. It's always better to build from real
usage, rather than imagine how it could be used.

And a note to the plugin itself. It's really a nice idea and it shows
how simple it could be (btw, have a look at jQuery's .each() for your
for(x in y) loops :)

Cheers,
  Volker

js at cgeo.eu wrote:
> 
> 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
> 
> _______________________________________________
> Geojquery mailing list
> Geojquery at lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/geojquery