<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>Spry Widgets</title>
|
<link href="../css/articles.css" rel="stylesheet" type="text/css" />
|
<link href="collapsiblepanel/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
|
<script language="javascript" type="text/javascript" src="collapsiblepanel/SpryCollapsiblePanel.js"></script>
|
<script language="javascript" type="text/javascript" src="../includes/SpryDOMUtils.js"></script>
|
<style type="text/css">
|
<!--
|
td p {padding: -3px;}
|
.CollapsiblePanel{width:400px; float:left; border-top:none;}
|
th{background-color:#666666; color:#FFFFFF;}
|
td{border-bottom:none;}
|
h3{margin-top:0;margin-bottom:0; cursor:pointer;}
|
-->
|
</style>
|
</head>
|
<body>
|
<h2>Spry Widgets</h2>
|
<p>Spry Widgets are pieces of HTML, CSS and Javascript that provide advanced functionality to web pages. This document lists our widgets and links to source files, articles and samples.</p>
|
<ul>
|
<li><a href="../articles/spry_widget_model/index.html">Spry Widget Model</a> - Describes the philosophy behind the widgets</li>
|
<li><a href="../articles/data_api/index.html">Spry API</a> - A technical reference for Spry Functionality</li>
|
</ul>
|
<div id="CollapsiblePanelGroup1" class="CollapsiblePanelGroup">
|
<div class="CollapsiblePanel">
|
<h3>Accordion </h3>
|
<div>
|
<table width="398">
|
<tr>
|
<th scope="col">Files</th>
|
<th scope="col">Samples</th>
|
</tr>
|
<tr>
|
<td><p><a href="../articles/accordion_overview/index.html">Overview</a></p>
|
<p><a href="accordion/SpryAccordion.html">Reference Sample</a></p>
|
<p><a href="accordion/SpryAccordion.css">CSS File</a></p>
|
<p><a href="accordion/SpryAccordion.js">Javascript File</a></p></td>
|
<td><p><a href="../samples/accordion/AccordionSample.html">Basic Accordion Sample</a></p>
|
<p><a href="../samples/accordion/AccordionSample2.html">Accordion From Spry Data</a></p>
|
<p><a href="../samples/accordion/Accordion_unobtrusive.html">Unobtrusive Accordion</a></p></td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
<div class="CollapsiblePanel">
|
<h3>AutoSuggest</h3>
|
<div>
|
<table width="398">
|
<tr>
|
<th width="151" scope="col">Files</th>
|
<th width="161" scope="col">Samples</th>
|
</tr>
|
<tr>
|
<td><p><a href="../articles/autosuggest_overview/index.htm">Overview</a></p>
|
<p><a href="autosuggest/SpryAutoSuggest.html">Reference Sample</a></p>
|
<p><a href="autosuggest/SpryAutoSuggest.css">CSS File</a></p>
|
<p><a href="autosuggest/SpryAutoSuggest.js">Javascript File</a></p></td>
|
<td><a href="../samples/autosuggest/SuggestSample.html">AutoSuggest Sample</a></td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
<br style="clear:both;" />
|
<div class="CollapsiblePanel">
|
<h3>Checkbox Validation</h3>
|
<div>
|
<table width="398">
|
<tr>
|
<th width="149" scope="col">Files</th>
|
<th width="207" scope="col">Samples</th>
|
</tr>
|
<tr>
|
<td><p><a href="../articles/checkbox_overview/index.html">Overview</a></p>
|
<p><a href="checkboxvalidation/SpryValidationCheckbox.html">Reference Sample</a></p>
|
<p><a href="checkboxvalidation/SpryValidationCheckbox.css">CSS File</a></p>
|
<p><a href="checkboxvalidation/SpryValidationCheckbox.js">Javascript File</a></p></td>
|
<td><a href="../samples/validationwidgets/CheckboxValidationSample.html">Checkbox Validation Sample</a></td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
<div class="CollapsiblePanel">
|
<h3>Collapsible Panel</h3>
|
<div>
|
<table width="399">
|
<tr>
|
<th width="165" scope="col">Files</th>
|
<th width="184" scope="col">Samples</th>
|
</tr>
|
<tr>
|
<td><p><a href="../articles/collapse_panel/index.html">Overview</a></p>
|
<p><a href="collapsiblepanel/SpryCollapsiblePanel.html">Reference Sample</a></p>
|
<p><a href="collapsiblepanel/SpryCollapsiblePanel.css">CSS File</a></p>
|
<p><a href="collapsiblepanel/SpryCollapsiblePanel.js">Javascript File</a></p></td>
|
<td><p><a href="../samples/collapsiblepanel/collapsible_panel_sample.htm">Collapsible Panel</a></p>
|
<p><a href="../samples/collapsiblepanel/CollapsiblePanelGroupSample.html">Collapsible Panel Group</a></p>
|
<p><a href="../samples/collapsiblepanel/collapsible_panel_unobtrusive.htm">Unobtrusive Panels</a></p></td>
|
</tr>
|
</table>
|
</div>
|
</div><br style="clear:both;" />
|
<div class="CollapsiblePanel">
|
<h3>Confirmation Validation</h3>
|
<div>
|
<table width="398">
|
<tr>
|
<th width="161" scope="col">Files</th>
|
<th width="227" scope="col">Samples</th>
|
</tr>
|
<tr>
|
<td><p><a href="../articles/confirm_overview/index.html">Overview</a></p>
|
<p><a href="confirmvalidation/SpryValidationConfirm.html">Reference Sample</a></p>
|
<p><a href="confirmvalidation/SpryValidationConfirm.css">CSS File</a></p>
|
<p><a href="confirmvalidation/SpryValidationConfirm.js">Javascript File</a></p></td>
|
<td><a href="../samples/validationwidgets/ConfirmValidationSample.html">Confirm Sample</a></td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
<div class="CollapsiblePanel">
|
<h3>HTML Panel</h3>
|
<div>
|
<table width="398">
|
<tr>
|
<th width="162" scope="col">Files</th>
|
<th width="224" scope="col">Samples</th>
|
</tr>
|
<tr>
|
<td><p><a href="../articles/html_panel/index.html">Overview</a></p>
|
<p><a href="htmlpanel/SpryHTMLPanel.html">Reference Sample</a></p>
|
<p><a href="htmlpanel/SpryHTMLPanel.css">CSS File</a></p>
|
<p><a href="htmlpanel/SpryHTMLPanel.js">Javascript File</a></p></td>
|
<td><a href="../samples/htmlpanel/html_panel_sample.html">HTML Panel</a></td>
|
</tr>
|
</table>
|
</div>
|
</div><br style="clear:both;" />
|
<div class="CollapsiblePanel">
|
<h3>Password Validation</h3>
|
<div>
|
<table width="398">
|
<tr>
|
<th width="157" scope="col">Files</th>
|
<th width="218" scope="col">Samples</th>
|
</tr>
|
<tr>
|
<td><p><a href="../articles/password_overview/index.html">Overview</a></p>
|
<p><a href="passwordvalidation/SpryValidationPassword.html">Reference Sample</a></p>
|
<p><a href="passwordvalidation/SpryValidationPassword.css">CSS File</a></p>
|
<p><a href="passwordvalidation/SpryValidationPassword.js">Javascript File</a></p></td>
|
<td><a href="../samples/validationwidgets/PasswordValidationSample.html">Password Sample</a></td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
<div class="CollapsiblePanel">
|
<h3>Radio Button Validation</h3>
|
<div>
|
<table width="398">
|
<tr>
|
<th width="171" scope="col">Files</th>
|
<th width="208" scope="col">Samples</th>
|
</tr>
|
<tr>
|
<td><p><a href="../articles/radio_overview/index.html">Overview</a></p>
|
<p><a href="radiovalidation/SpryValidationRadio.html">Reference Sample</a></p>
|
<p><a href="radiovalidation/SpryValidationRadio.css">CSS File</a></p>
|
<p><a href="radiovalidation/SpryValidationRadio.js">Javascript File</a></p></td>
|
<td><a href="../samples/validationwidgets/RadioValidationSample.html">Radio Button Sample</a></td>
|
</tr>
|
</table>
|
</div>
|
</div><br style="clear:both;" />
|
<div class="CollapsiblePanel">
|
<h3>Select Validation</h3>
|
<div>
|
<table width="398">
|
<tr>
|
<th width="158" scope="col">Files</th>
|
<th width="234" scope="col">Samples</th>
|
</tr>
|
<tr>
|
<td><p><a href="../articles/select_overview/index.html">Overview</a></p>
|
<p><a href="selectvalidation/SpryValidationSelect.html">Reference Sample</a></p>
|
<p><a href="selectvalidation/SpryValidationSelect.css">CSS File</a></p>
|
<p><a href="selectvalidation/SpryValidationSelect.js">Javascript File</a></p></td>
|
<td><p><a href="../samples/validationwidgets/SelectValidationSample.html">Select Sample</a></p>
|
<p><a href="../samples/validationwidgets/SelectWithData.html">Select from Spry Data</a></p></td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
<div class="CollapsiblePanel">
|
<h3>Sliding Panels</h3>
|
<div>
|
<table width="398">
|
<tr>
|
<th width="159" scope="col">Files</th>
|
<th width="225" scope="col">Samples</th>
|
</tr>
|
<tr>
|
<td><p><a href="../articles/sliding_panels/index.html">Overview</a></p>
|
<p><a href="slidingpanels/SprySlidingPanels.html">Reference Sample</a></p>
|
<p><a href="slidingpanels/SprySlidingPanels.css">CSS File</a></p>
|
<p><a href="slidingpanels/SprySlidingPanels.js">Javascript File</a></p></td>
|
<td><p><a href="../samples/slidingpanels/SlidingPanelsSample.html">Sliding Panels</a></p>
|
<p><a href="../samples/slidingpanels/SlidingPanelsSample2.html">2 Panel Sample</a></p>
|
<p><a href="../samples/slidingpanels/SlidingPanelsFromData.html">Sliding Panels from Spry Data</a></p>
|
<p><a href="../samples/slidingpanels/SlidingPanels_unobtrusive.html">Unobtrusive Sliding Panels</a></p></td>
|
</tr>
|
</table>
|
</div>
|
</div><br style="clear:both;" />
|
<div class="CollapsiblePanel">
|
<h3>Tabbed Panels</h3>
|
<div>
|
<table width="398">
|
<tr>
|
<th width="165" scope="col">Files</th>
|
<th width="230" scope="col">Samples</th>
|
</tr>
|
<tr>
|
<td><p><a href="../articles/tabbed_panel/index.html">Overview</a></p>
|
<p><a href="tabbedpanels/SpryTabbedPanels.html">Reference Sample</a></p>
|
<p><a href="tabbedpanels/SpryTabbedPanels.css">CSS File</a></p>
|
<p><a href="tabbedpanels/SpryTabbedPanels.js">Javascript File</a></p></td>
|
<td><p><a href="../samples/tabbedpanels/tabbed_panel_sample.htm">Tabbed Panels</a></p>
|
<p><a href="../samples/tabbedpanels/tabbed_panel_sample2.html">Tabbed Panels from Data</a></p>
|
<p><a href="../samples/tabbedpanels/tabbed_panel_unobtrusive.htm">Unobtrusive Tabbed Panels</a></p></td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
<div class="CollapsiblePanel">
|
<h3>Text Area Validation</h3>
|
<div>
|
<table width="398">
|
<tr>
|
<th width="167" scope="col">Files</th>
|
<th width="216" scope="col">Samples</th>
|
</tr>
|
<tr>
|
<td><p><a href="../articles/textarea_overview/index.html">Overview</a></p>
|
<p><a href="textareavalidation/SpryValidationTextArea.html">Reference Sample</a></p>
|
<p><a href="textareavalidation/SpryValidationTextarea.css">CSS File</a></p>
|
<p><a href="textareavalidation/SpryValidationTextarea.js">Javascript File</a></p>
|
<p></p></td>
|
<td><a href="../samples/validationwidgets/TextareaValidationSample.html">Text Area Sample</a></td>
|
</tr>
|
</table>
|
</div>
|
</div><br style="clear:both;" />
|
<div class="CollapsiblePanel">
|
<h3>Text Field Validation</h3>
|
<div>
|
<table width="398">
|
<tr>
|
<th width="156" scope="col">Files</th>
|
<th width="239" scope="col">Samples</th>
|
</tr>
|
<tr>
|
<td><p><a href="../articles/textfield_overview/index.html">Overview</a></p>
|
<p><a href="textfieldvalidation/SpryValidationTextField.html">Reference Sample</a></p>
|
<p><a href="textfieldvalidation/SpryValidationTextField.css">CSS File</a></p>
|
<p><a href="textfieldvalidation/SpryValidationTextField.js">Javascript File</a></p></td>
|
<td><a href="../samples/validationwidgets/TextfieldValidationSample.html">Text Field Sample</a></td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
<div class="CollapsiblePanel">
|
<h3>Tooltip</h3>
|
<div>
|
<table width="398">
|
<tr>
|
<th width="156" scope="col">Files</th>
|
<th width="234" scope="col">Samples</th>
|
</tr>
|
<tr>
|
<td><p><a href="../articles/tooltip_overview/index.html">Overview</a></p>
|
<p><a href="tooltip/SpryTooltip.html">Reference Sample</a></p>
|
<p><a href="tooltip/SpryTooltip.css">CSS File</a></p>
|
<p><a href="tooltip/SpryTooltip.js">Javascript File</a></p></td>
|
<td><p><a href="../samples/tooltip/SpryTooltipSample.html">Tooltip</a></p>
|
<p><a href="../samples/data_region/TooltipwithData.html">Tooltip from Spry Data</a></p></td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
