XForms/Deselect Events
< XForms
Motivation
editYou want to catch a deselection event when you navigate away from a page.
Sample Code
edit<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>