Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
330 lines (284 sloc) 14.1 KB
<script type="text/javascript" charset="utf-8">
$(function(){
//Inline Error Demo
$(".ixf-tabs li a").click(function(){
if($(this).hasClass("inline-error-demo") == true){
$("#notifier-error").fadeIn();
} else{
$("#notifier-error").fadeOut();
}
});
//Loading Demo + Change Selected Row
$("#page-loading-demo").click(function(){
$(".panel-loading").fadeIn();
setTimeout("loadMania()", 1300);
});
$("#save-demo").click(function(){
$(".saving-demo").fadeIn();
setTimeout("showSaved()", 3000);
});
$(".saving-demo").click(function(){
$(this).fadeOut();
});
}); //doc ready
function showSaved(){
$(".saving p, .saving span").hide();
$(".saved").fadeIn();
$(".saved").css("display","inline-block");
}
function loadMania(){
$(".panel-loading").fadeOut();
}
</script>
<div class="panel-loading">
<p>Loading...</p><span></span>
</div><!-- /panel-loading -->
<h1 class="margin-bottom-sm">System Feedback</h1>
<div class="ixf-tabs-wrapper ixf-set-minheight ui-corner-bottom" id="tabs">
<ul class="ixf-tabs">
<li><a href="#tab-1"><span>Alerts</span></a></li>
<li><a href="#tab-2" class="inline-error-demo"><span>Inline Errors</span></a></li>
<li><a href="#tab-3"><span>Banner Errors</span></a></li>
<li><a href="#tab-4"><span>Loading &amp; Saving</span></a></li>
</ul>
<div id="tab-1" class="padding-lg">
<div class="source">
<div class="ixf-alert">
<p><strong>Success!</strong> Your record has been saved.</p>
<a href="#x" class="close">Close</a>
</div>
</div>
<div class="source">
<div class="ixf-alert error">
<p><strong>Oops!</strong> Please correct the following issues:</p>
<ul>
<li>Email address is required.</li>
<li>Date format is invalid.</li>
<li>Unit name is mispelled.</li>
</ul>
<a href="#x" class="close">Close</a>
</div>
</div>
<div class="source">
<div class="ixf-alert notice">
<p><strong>Note:</strong> Don't forget <a href="#d">the</a> following due dates:</p>
<ul>
<li>Annual History is due <strong>07 June 2010</strong>,</li>
<li>Unit Progress Report is due <strong>14 Jul 2010</strong>.</li>
</ul>
<a href="#x" class="close">Close</a>
</div>
</div>
<div class="source">
<div class="ixf-alert critical">
<p><strong>Error!</strong> The application has lost contact with the server. Please try again later.</p>
<a href="#x" class="close">Close</a>
</div>
</div>
<p>By default clicking the close icon removes the alert from the DOM so that it isn't there to make anything slower. If you want to just hide it instead of remove it to be able to use it again, add a class of <code>keep</code> to the <code>.ixf-alert</code> element.</p>
</div><!-- /tab-1 -->
<div id="tab-2" class="padding-lg">
<!-- Sample Error Message -->
<div class="ixf-alert error" style="display:none;" id="alert-demo">
<p><strong>Oops!</strong> Please correct the following issues:</p>
<ul>
<li>Required Text is required.</li>
<li>Error Select is required.</li>
<li>Checkboxes is required.</li>
</ul>
<a href="#x" class="close">Close</a>
</div><!-- /error message -->
<div class="ixf-alert error">
<p>Inline errors have been temporarily removed from the IxF. The logic behind how they would work, and the code supporting them were not ready. This tab is being left in place for people to find it who knew it was here previously.</p>
</div>
<!-- <form action="" method="get" class="ixf-form">
<input type="hidden" name="showErrors" value="true" id="showErrors" />
<fieldset class="table">
<dl class="error required">
<dt><span title="required" class="required-indicator">*</span> <span title="error" class="error-indicator" style="display:none;">!</span> <label for="product-name">Required Text</label></dt>
<dd><input type="text" name="product-name" id="product-name" size="30" maxlength="50" />
<span class="inline-error"><strong>Required Even if You Have a Lot of Text</strong></span>
</dd>
</dl>
<dl class="error">
<dt><label for="product-name">Date Picker</label></dt>
<dd><input type="text" name="product-name" class="datepicker" id="date" size="30" maxlength="50" />
<span class="inline-error"><em></em><strong>Date Cannot Be before Today</strong></span>
</dd>
</dl>
<dl class="error">
<dt><span title="error" class="error-indicator" style="display:none;">!</span> <span title="required" class="required-indicator">*</span> <label for="product-category">Error Select</label></dt>
<dd>
<select name="product-category" id="product-category">
<option></option>
<option>Audio &amp; Video Software</option>
<option>Security &amp; Spyware</option>
<option>Utilities &amp; Drivers</option>
<option>Design Tools</option>
<option>Desktop Enhancements</option>
<option>Business &amp; Productivity</option>
<option>Developer Tools</option>
<option>Home &amp; Education</option>
<option>PC Starter Kit</option>
<option>Digital Photography</option>
<option>Browsers</option>
<option>Networking</option>
<option>Chat &amp; E-mail</option>
</select>
<span class="inline-error"><em></em><strong>Required</strong></span>
</dd>
</dl>
<dl class="error">
<dt><label for="product-serial-part1">Multiple text fields</label></dt>
<dd>
<input type="text" class="sm" name="product-serial-part1" id="product-serial-part1" size="4" maxlength="4" /> -
<label for="product-serial-part2" class="invisible">Serial Number part 2</label>
<input type="text" class="md" name="product-serial-part2" id="product-serial-part2" size="8" maxlength="8" />
<span class="inline-error"><em></em><strong>Invalid Format</strong></span>
<br />
<samp>e.g. WMEV-86331212</samp>
</dd>
</dl>
<dl class="error">
<dt><span title="error" class="error-indicator" style="display:none;">!</span> <span title="required" class="required-indicator">*</span> Checkboxes
</dt>
<dd class="options-vertical">
<fieldset>
<legend class="invisible">Platform</legend>
<span class="ixf-option"><input type="checkbox" value="check" id="check2" checked /> <label for="check2" class="notred">This is checked</label></span>
<span class="ixf-option"><input type="checkbox" value="Other" id="other2" /> <label for="other2" class="notred">This is not checked</label></span>
<span class="ixf-option"><input type="checkbox" value="disabled" id="disabled2" disabled /> <label for="disabled2" class="notred">This is disabled</label></span>
<span class="ixf-option"><input type="checkbox" value="Stop" id="disablecheck" disabled checked /> <label for="disablecheck" class="notred">This is checked and disabled</label></span>
</fieldset>
</dd>
<span class="inline-error"><em></em><strong>Required</strong></span>
</dl>
<dl class="required error">
<dt>Radio Buttons</dt>
<dd class="options-vertical">
<fieldset>
<legend class="invisible">Contact Type</legend>
<span class="ixf-option"><input type="radio" value="1" id="1" name="normal" checked /> <label for="1" class="notred">This is normal</label></span>
<span class="ixf-option"><input type="radio" value="2" id="2" name="normal" /> <label for="2" class="notred">This is normal</label></span>
<span class="ixf-option"><input type="radio" value="disabled" id="disabled" name="disabled" disabled /> <label for="disabled" class="notred">This is disabled</label></span>
<span class="ixf-option"><input type="radio" value="check" id="check" name="check" disabled checked /> <label for="check" class="notred">This is checked and disabled</label></span>
</fieldset>
</dd>
<span class="inline-error"><em></em><strong>That's an odd choice.</strong></span>
</dl>
<dl class="error">
<dt><label for="textarea">Textarea</label></dt>
<dd><textarea name="textarea" id="textarea"></textarea>
<span class="inline-error"><em></em><strong>140 Character Maximum</strong></span>
</dd>
</dl>
<dl>
<dt><label for="product-name">Date Picker</label></dt>
<dd><input type="text" name="product-name" class="datepicker" id="date" size="30" maxlength="50" />
<span class="inline-error"><em></em><strong>Date Must Be after Today</strong></span>
</dd>
</dl>
</fieldset>
</form> --><!-- /ixf-form -->
</div><!-- /tab-2 -->
<div id="tab-3" class="padding-lg">
<!-- Sample Error Message -->
<div class="ixf-alert error">
<p><strong>Oops!</strong> Please correct the following issues:</p>
<ul>
<li>Required Text is required.</li>
<li>Error Select is required.</li>
<li>Checkboxes is required.</li>
<li>etc.</li>
</ul>
<a href="#x" class="close">Close</a>
</div><!-- /error message -->
<form action="" method="get" class="ixf-form">
<input type="hidden" name="showErrors" value="true" id="showErrors" />
<dl class="error required">
<dt><span title="required" class="required-indicator">*</span> <span title="error" class="error-indicator">!</span> <label for="product-name">Required Text</label></dt>
<dd><input type="text" name="product-name" id="product-name" size="30" maxlength="50" /></dd>
</dl>
<dl class="error">
<dt><label for="product-name">Date Picker</label><span title="error" class="error-indicator">!</span></dt>
<dd><input type="text" name="product-name" class="datepicker" id="date" size="30" maxlength="50" /></dd>
</dl>
<dl class="error">
<dt><span title="error" class="error-indicator">!</span> <span title="required" class="required-indicator">*</span> <label for="product-category">Error Select</label></dt>
<dd>
<select name="product-category" id="product-category">
<option></option>
<option>Audio &amp; Video Software</option>
<option>Security &amp; Spyware</option>
<option>Utilities &amp; Drivers</option>
<option>Design Tools</option>
<option>Desktop Enhancements</option>
<option>Business &amp; Productivity</option>
<option>Developer Tools</option>
<option>Home &amp; Education</option>
<option>PC Starter Kit</option>
<option>Digital Photography</option>
<option>Browsers</option>
<option>Networking</option>
<option>Chat &amp; E-mail</option>
</select>
</dd>
</dl>
<dl class="error">
<dt><span title="error" class="error-indicator">!</span><label for="product-serial-part1">Multiple Text Fields</label></dt>
<dd>
<input type="text" class="sm" name="product-serial-part1" id="product-serial-part1" size="4" maxlength="4" /> -
<label for="product-serial-part2" class="invisible">Serial Number part 2</label>
<input type="text" class="md" name="product-serial-part2" id="product-serial-part2" size="8" maxlength="8" />
<br />
<samp>e.g. WMEV-86331212</samp>
</dd>
</dl>
<dl class="error">
<dt><span title="error" class="error-indicator">!</span> <span title="required" class="required-indicator">*</span> Checkboxes</dt>
<dd class="options-vertical">
<fieldset>
<legend class="invisible">Platform</legend>
<span class="ixf-option"><input type="checkbox" value="check" id="check2" checked /> <label for="check2" class="notred">This is checked</label></span>
<span class="ixf-option"><input type="checkbox" value="Other" id="other2" /> <label for="other2" class="notred">This is not checked</label></span>
<span class="ixf-option"><input type="checkbox" value="disabled" id="disabled2" disabled /> <label for="disabled2" class="notred">This is disabled</label></span>
<span class="ixf-option"><input type="checkbox" value="Stop" id="disablecheck" disabled checked /> <label for="disablecheck" class="notred">This is checked and disabled</label></span>
</fieldset>
</dd>
</dl>
<dl class="required error">
<dt><span title="error" class="error-indicator">!</span> Radio Buttons</dt>
<dd class="options-vertical">
<fieldset>
<legend class="invisible">Contact Type</legend>
<span class="ixf-option"><input type="radio" value="1" id="1" name="normal" checked /> <label for="1" class="notred">This is normal</label></span>
<span class="ixf-option"><input type="radio" value="2" id="2" name="normal" /> <label for="2" class="notred">This is normal</label></span>
<span class="ixf-option"><input type="radio" value="disabled" id="disabled" name="disabled" disabled /> <label for="disabled" class="notred">This is disabled</label></span>
<span class="ixf-option"><input type="radio" value="check" id="check" name="check" disabled checked /> <label for="check" class="notred">This is checked and disabled</label></span>
</fieldset>
</dd>
</dl>
<dl class="error">
<dt><span title="error" class="error-indicator">!</span><label for="textarea">Textarea</label></dt>
<dd><textarea name="textarea" id="textarea"></textarea></dd>
</dl>
</form><!-- /ixf-form -->
</div><!-- /tab-3 -->
<div id="tab-4" class="padding-lg">
<p><a href="#d" id="page-loading-demo">Page Loading</a> &ndash; Used in the master/detail layout where the entire detail portion of the screen needs time to load. It can also be used when loading and entire page, regardless of layout, if there is a delay when loading content.</p>
<p><a href="#d" id="save-demo">Action Bar Saving</a> &ndash; When you click <strong>Save</strong>, this is a way of confirming with the user without leaving the page. When saving is complete, a small confirmation follows. The confirmation can stay there until the user navigates away from the page, or they can click to dismiss it.</p>
<form action="" method="get" class="ixf-form">
<input type="hidden" name="showErrors" value="true" id="showErrors" />
<dl>
<dt><label for="autocomplete">Autocomplete</label></dt>
<dd><input type="text" name="autocomplete" value="" id="autocomplete" class="autocomplete xl ixf-autocomplete" data-ac-source="ajax-people.html" /></dd>
</dl>
</form><!-- /ixf-form -->
</div><!-- /tab-4 -->
</div><!-- /ixf-tabs-wrapper -->
<div class="ixf-actions">
<a href="#x" class="ixf-button primary float-right">Save</a>
<div class="notifier saving saving-demo" style="display:none;"><p>Saving...</p><span></span><p class="sprite check prefix saved" style="display:none;">Saved</p></div>
<div class="notifier errors" id="notifier-error" style="display:none;"><p>7 Errors</p></div>
<a href="#x" class="ixf-button">Cancel</a>
</div><!-- /ixf-actions -->
Something went wrong with that request. Please try again.