Find file
Fetching contributors…
Cannot retrieve contributors at this time
150 lines (133 sloc) 4.33 KB
<html lang="en">
<title>Demo Page</title>
<link type="text/css" href="../../mxui/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<link type="text/css" href="../../mxui/resizable/resizable.css" rel="stylesheet" />
<style type='text/css'>
body {font-family: verdana}
.error {border: solid 1px red;}
.error_text { color: red; font-size: 10px;}
td {padding: 3px;}
#first {
border: solid 1px;
height: 200px;width: 200px;
.ui-widget {
font-size: 1em;
.ui-tabs .ui-tabs-nav li a {
padding: 0.1em 0.2em
.ui-tabs .ui-tabs-panel {
padding: 0.5em
#uitabs a:focus {
outline: dashed;
#submitform {
border-left: dotted 1px gray;
padding: 10px;
margin-left: 10px;
<div class='tabarea'>
<ul id="uitabs">
<li><a href="javascript://"><span>Instructions</span></a></li>
<li><a href="javascript://"><span>Drag Drop</span></a></li>
<li><a href="javascript://"><span>Typing</span></a></li>
<li><a href="javascript://"><span>Form</span></a></li>
<p>Welcome to the Syn demo!</p>
<p>Click, drag, and type in this page.
Your actions will be recorded as a syn-script.
You can playback this script by pressing "Replay" below.
<p>Try clicking and tabbing between tab-buttons.</p>
<ul id='uitabs2'>
<li><a href="javascript://">Alpha</a></li>
<li><a href="javascript://">Beta</a></li>
<li><a href="javascript://">Gamma</a></li>
<div>Content Alpha</div>
<div>Content Beta</div>
<div>Content Gamma</div>
<p>Drag the gray dot.</p>
<div class='wrap' id='first'>Here is some swell content</div>
<p>Test the numeric field. It only accepts numbers.
<p><input type='text' id='numeric' /></p>
<p>You can copy and paste if you select text with the keyboard like:
[shift][left][shift-up][ctrl]c[ctrl-up][right][ctrl]v[ctrl-up]. It's
possible to make mouse text selection work, but not with this recording demo.</p>
<form action='' id='submitform'>
<p id='indicator'>I turn green when this form is submitted.
<p id='changeIndicator'>I turn green when an element is changed.</p>
<label>Type enter to submit the form: </label>
<input type='text' id='clearme'/>
<label>Click to submit: </label>
<input type='submit'/>
<label>Click to toggle: </label>
<input type='checkbox' />
<label>Click to toggle: </label>
<input type='radio' name='radio' value='1'/>
<input type='radio' name='radio' value='2'/>
<input type='radio' name='radio' value='3'/>
<label>Click to change: </label>
<script type='text/javascript' src='../../steal/steal.js'></script>
<script type='text/javascript'>
$("#uitabs, #uitabs2").mxui_ui_tabs();
$(window).bind('load', function(){
$("select")[0].selectedIndex = 0;
$("#numeric").mxui_key_validator({test: /^[-+]?[0-9]*\.?[0-9]*$/}).val("")
//this is to handle all click events in the form