Servoy 2020 Documentation
Child pages
  • sablo-tabseq
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

Sablo provides a set of angular directives that can help custom web component developers.

svy-tabseq

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:

IMPORTANT

One must always have in the DOM structure a top-most svy-tabseq element marked with

<someTag ... svy-tabseq="0" svy-tabseq-config="{root: true}"/>

. This can be for example the <body> tag.

IMPORTANT

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>
  • No labels