NAVIGATION
[[Filter JS]]
Differences
This shows you the differences between two versions of the page.
|
3rd-party-modules:catalogue:catalogue-docu:catalogue-docu-examples:catalogue-docu-examples-js [2012/05/29 20:40] Peter Bracher created |
3rd-party-modules:catalogue:catalogue-docu:catalogue-docu-examples:catalogue-docu-examples-js [2018/06/03 18:08] (current) |
||
|---|---|---|---|
| Line 2: | Line 2: | ||
| ====== Filter JS ====== | ====== Filter JS ====== | ||
| + | |||
| + | Let's display the content of the catalogue module like this:\\ | ||
| + | {{:3rd-party-modules:catalogue:catalogue-docu:catalogue-docu-examples:mod_cat_065.jpg|}}\\ | ||
| + | \\ | ||
| + | the items sorted by the filter_0 (catalogs) and animated with javascript, the map, and two filters as drop down\\ | ||
| + | |||
| + | ---- | ||
| + | |||
| + | try it out with the **sample_js.tmpl** and **sample_js.css** examples in the module (as always - icons and pictures are not included)\\ | ||
| + | it requires the following settings:\\ | ||
| + | \\ | ||
| + | {{:3rd-party-modules:catalogue:catalogue-docu:catalogue-docu-examples:mod_cat_066.jpg|}}\\ | ||
| + | \\ | ||
| + | Frontend rendering will work with Mootools or JQuery | ||
| + | |||
| + | ---- | ||
| + | |||
| + | \\ | ||
| + | when the filter renders as 'js' it takes all items and orders them by the filter-tags and builts the following structure around it (red comes from the template, black comes from the script)\\ | ||
| + | \\ | ||
| + | {{:3rd-party-modules:catalogue:catalogue-docu:catalogue-docu-examples:mod_cat_067.jpg|}}\\ | ||
| + | \\ | ||
| + | |||
| + | ---- | ||
| + | |||
| + | \\ | ||
| + | As you may have noticed, the 'js'-filter counts the items per category and displays the number behind the category-title, this can be suppressed by setting 'ctg_headline_number' to display:none in the CSS\\ | ||
| + | \\ | ||
| + | It would be possible to open the info window of the marker in the map on mouseover an item in the listing, it's just a bit of javascript - talk to us to get the code, it's not completely free though! | ||
