Sablo provides a set of angular directives that can help custom web component developers.
This directive helps provide dynamic tab sequences on the client. All it needs is a set of so called 'design' values on DOM nodes inside your document (<input ... svy-tabseq="2" ...) and an optional config attribute (<div ... svy-tabseq-config:{container: true} ...).
Based on only these two things that you can add to a new custom component as needed, the svy-tabseq directive will generate and dynamically manage the "tabIndex" attributes for all the DOM elements displayed in the browser - that use this directive.
IMPORTANT:
One must always have in the DOM structure a top-most svy-tabseq element marked with
. This can be for example the <body> tag. |
svy-tabseq requires you to include a full jQuery lib in your page, before angular.js. It will now work with angular shipped jQLite only (because it relies on jquery trigger() which is not available in jQLite). |
For example:
<!DOCTYPE html> <html ng-app="myApp" svy-tabSeq="1" svy-tabSeq-config="{container: true}"> <head> <title>Tabseq</title> <link href="css/style.css" rel="stylesheet" /> <script src="../lib/jquery-1.11.1.js"></script> <script src="../lib/angular-1.3.0-beta.2/angular.js"></script> <script src="controllers/impl.js"></script> </head> <body ng-controller="myController"> <mycustomcomponent svy-tabSeq="model1.tabSeq"></mycustomcomponent > <div svy-tabSeq="2" svy-tabSeq-config="{container: true, reservedGap: 50}"> <input svy-tabSeq="1" value="a"/> <input svy-tabSeq="-2" value="b"/> <input svy-tabSeq="1" value="c"/> </div> <mycustomcomponent svy-tabSeq="model2.tabSeq"></mycustomcomponent > </body> </html> |