Difference between revisions of "Web2.0 Javascript use and maintenance"
Line 91: | Line 91: | ||
== dataTable == | == dataTable == | ||
--- note: old info ---- | --- note: old info ---- | ||
+ | |||
using the dataTable jquery plugin, in the template do: | using the dataTable jquery plugin, in the template do: | ||
[% dataTable_list(header array,data,table_id,styling) %] | [% dataTable_list(header array,data,table_id,styling) %] |
Revision as of 21:32, 19 August 2013
Layout
The javascript is all in /root/js/wormbase.js. Wrapped in an anonymous IFFE to preserve scope. Public functions are stored inside window.WB.
Public functions in window.WB
:
{ // initiate page init: init, // initiate all js on wormbase page
// searching search: search, // run search using current filters search_change: search_change, // change the class search filter search_species_change: search_species_change, // change the species search filter checkSearch: checkSearch, // check search results - post-format if needed allResults: allResults, // setup search all page
// static widgets getMarkItUp: getMarkItUp, // get markup language for static widgets StaticWidgets: StaticWidgets, // modify static widgets (edit/update)
// layouts deleteLayout: Layout.deleteLayout, // delete saved layout columns: Layout.columns, // get column configuration from layout setLayout: Layout.setLayout, // save a layout resetPageLayout: Layout.resetPageLayout, // reset page to default widget layout resetLayout: Layout.resetLayout, // change page layout openAllWidgets: Layout.openAllWidgets, // open all widgets on the page newLayout: Layout.newLayout, // create a new layout resize: Layout.resize, // resize the page
// scrolling goToAnchor: Scrolling.goToAnchor, // Scroll page to certain anchor scrollToTop: scrollToTop, // scroll to the top of the page
// loading - ajax/plugins/files/RSS ajaxGet: ajaxGet, // load data via ajax request setLoading: setLoading, // add the loading image to a certain div loadRSS: loadRSS, // load RSS (homepage) loadFile: Plugin.loadFile // load a file dynamically getPlugin: Plugin.getPlugin, // load plugin
// notifications displayNotification: displayNotification, // display notification at the top of the page
// user session, comments/issues openid: openid, // login via openid historyOn: historyOn, // turn on history comment: comment, // add comment to a page issue: issue, // submit an issue
// miscellaneous validate_fields: validate_fields, // validate form fields recordOutboundLink: recordOutboundLink, // record external links setupCytoscape: setupCytoscape, // setup cytoscape for use reloadWidget: reloadWidget, // refresh a widget }
This file is loaded dynamically at the bottom of root/boilerplate/html. Minified version is loaded depending on installation_type.
<script> var se = document.createElement('script'); se.src = "/js/wormbase[% c.config.installation_type == 'development' ? : '.min' %].js?v[% git_commit_id %]"; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(se, s); ... </script>
Some JS effects
toggle
use the jquery slideToggle call
$(".toggle").live('click',function() { $(this).toggleClass("active").next().slideToggle("fast"); return false; });
In the template, do as follow:
<div class="toggle">some hint text...</div> <div>.... the content you want to toggle</div>
tooltip
using custom css tooltip To use, do as follow:
<a tip="this is the tooltip">Some text</a>
dataTable
--- note: old info ----
using the dataTable jquery plugin, in the template do:
[% dataTable_list(header array,data,table_id,styling) %] eg. [% dataTable_list(['Gene','Coding sequences','Species','Experiment'],fields.rnai.data.1.aaData,'table_rnai_1') %]
data struction is an array of array reference and save in an hash with keyword "aaData", the reason to do this is dataTable can also load data from external file which requires to be in such JSON format.
eg. { aaData=> [ ['a','b',..], ['c','d',..], ['e','f',..], .... ]
note: the "styling" parameter is optional, it helps to further define the look&function of your dataTable, for more pls look at dataTable's website.