Semantics.JS provides a framework for using semantics to control javascript behavior on your website or rich internet application.
Inspired by WAI-ARIA and 508 compliance, this light library allows strong use of semantics to guide user behavior. All JS is hooked up to a single listener on the page, which dispatches out to various plugins. We call this uber bubbling.
Simply include the script on the page.
<scripttype="text/javascript" src="../semantics.min.js"></script><scripttype="text/javascript">// It's also possible, but not necessary to use jQuery// This will ensure that callbacks receive jQuery objectsSemantics.use('jQuery');</script>Here we will create a TabView, and another TabView which inherits from the first one.
<!-- This is a standard TabView, notice the data-js attribute --><divdata-js="TabView.toggle"><ul><li><ahref="#tab1">Tab 1</a></li><li><ahref="#tab2">Tab 2</a></li><li><ahref="#tab3">Tab 3</a></li></ul></div><!-- Here is an AjaxTabView, which may have different functionality from a normal TabView. --><divdata-js="AjaxTabView.toggle"><ul><li><ahref="#tab1">Tab 1</a></li><li><ahref="#tab2">Tab 2</a></li><li><ahref="#tab3">Tab 3</a></li></ul></div><scripttype="text/javascript">// All classes should extend viewSemantics.extend('View',{name: 'TabView',methods: {toggle: function(el){console.log('We are toggling a regular TabView.',el);}}});// Alternatively, we can extend any previous class that we have created// Notice how the first argument maps to the name of the TabView object we created earlier.Semantics.extend('TabView',{name: 'AjaxTabView',methods: {/** * The first argument of the method is the link that the user interacted with (click, mouseover, etc) * The second argument is the element which captured the event. In this case, the <ul> element. */toggle: function(el,container){console.log('We are toggling an ajax tab view',el);// Call the toggle method of a regular tab view.this._super();}}});</script>