Exhibit/Lens Templates

From SIMILE Widgets
Jump to: navigation, search

To add a custom lens template your exhibit, add

<div ex:role="lens"> … </div>

Settings include:

setting name type of value default choices meaning
ex:itemTypes list of item-type-names (none) the item types which should be displayed using this lens; if unspecified, this is the default lens for all item types
ex:onshow javascript or style attributes (none) to execute Javascript or change style attributes when the lens is displayed

The URL of an Exhibit page followed by a hash with the label of an item will display a dialog box with that item's properties. You can create a lens template for this dialog box to specify which properties are displayed and how. The lens needs to be inside the body of the HTML page but outside any view elements, with its display style set to none. For example, this lens controls what will be displayed in a dialog for a single item of type Person:

<div ex:role="lens"
ex:itemTypes="Person"
style="display: none">
…
</div>

ex:onshow can be used to execute Javascript or change style attributes when the lens is displayed. The mailing list includes these details.

For example,

<div ex:role="lens" ex:onshow="this.style.background = 'blue';"> … </div><nowiki>

causes the lens to always be blue. (Of course you could have just used 
style="background: blue".) Use this.getAttribute('ex:itemID') to get the 
ID of the item. An elaborate example would include a lens template like this

 <nowiki><div ex:role="lens" ex:onshow="prepareLens(this);>
  …
  <div ex:id-subcontent="tab1-{{value}}"> … </div>
  <div ex:id-subcontent="tab2-{{value}}"> … </div>
  …
</div>

together with some Javascript like this

function prepareLens(elmt) {
  var itemID = elmt.getAttribute("ex:itemID");
  var tab1 = document.getElementById("tab1-" + itemID);
  var tab2 = document.getElementById("tab2-" + itemID);
  …
}
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox