XForms/Deselect Events
Motivation
You want to catch a deselection event when you navigate away from a page.
Sample Code
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:ev="http://www.w3.org/2001/xml-events"> <head> <title>Demo of Deselection Event</title> <style type="text/css"> @namespace xf url("http://www.w3.org/2002/xforms"); body {font-family: Helvetica, sans-serif;} /* style each individual tab */ #tab-bar xf|trigger { color: black; border: 3px outset gray; border-bottom: none; font-weight: bold; margin-right: 5px; padding: 0.2em; /* round the top corners - works only with FireFox */ -moz-border-radius: .5em .5em 0em 0em; } </style> <xf:model id="image"> <xf:instance xmlns="" id="image"> <data/> </xf:instance> </xf:model> </head> <body> <h1>Deselection Events Demo</h1> <p>The deselection event will generate a message each time a new tab is selected.</p> <div id="tab-bar"> <xf:trigger appearance="minimal"> <xf:label>Image Tab</xf:label> <xf:toggle case="image-tab" ev:event="DOMActivate"/> </xf:trigger> <xf:trigger appearance="minimal"> <xf:label>Metadata for Image Tab</xf:label> <xf:toggle case="metadata-tab" ev:event="DOMActivate"/> </xf:trigger> <xf:trigger appearance="minimal"> <xf:label>Rights Tab</xf:label> <xf:toggle case="rights-tab" ev:event="DOMActivate"/> </xf:trigger> </div> <xf:switch> <xf:case id="image-tab"> <xf:message level="modal" ev:event="xforms-deselect">Deselecting Image Tab</xf:message> <h1>Image Tab</h1> <xf:input> <xf:label>Alt text:</xf:label> </xf:input> <xf:select1 appearance="minimal"> <xf:label>Image Type:</xf:label> <xf:message level="modal" ev:event="xforms-deselect">select1 deselect</xf:message> <xf:message level="modal" ev:event="DOMFocusOut">DOM Focus Out</xf:message> <xf:item> <xf:label>Photo</xf:label> <xf:value>Photo</xf:value> </xf:item> <xf:item> <xf:label>Logo</xf:label> <xf:value>Logo</xf:value> </xf:item> <xf:item> <xf:label>Other</xf:label> <xf:value>Other</xf:value> </xf:item> </xf:select1> <xf:input> <xf:label>Caption</xf:label> </xf:input> <xf:textarea> <xf:label>CMS description</xf:label> </xf:textarea> </xf:case> <xf:case id="metadata-tab"> <xf:message level="modal" ev:event="xforms-deselect">Deselecting Metadata Tab</xf:message> <h1>Metadata Tab</h1> </xf:case> <xf:case id="rights-tab"> <xf:message level="modal" ev:event="xforms-deselect">Deselecting Rights Tab</xf:message> <h1>Metadata Tab</h1> <xf:label>Rights details</xf:label> <xf:help>State the rights ownership of this feature.</xf:help> <xf:input> <xf:label>Rights owner</xf:label> <xf:help> <p class="instructions">'BBC' is set as the default. Only set an owner if there are particular requirements</p> </xf:help> </xf:input> <xf:select1 appearance="minimal"> <xf:label>Rights status</xf:label> <xf:item> <xf:label>Free</xf:label> <xf:value>free</xf:value> </xf:item> <xf:item> <xf:label>Copyrighted</xf:label> <xf:value>copyrighted</xf:value> </xf:item> </xf:select1> <xf:textarea> <xf:label>Rights notes:</xf:label> </xf:textarea> </xf:case> </xf:switch> </body> </html>