Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: mootools-1.2
Fetching contributors…

Cannot retrieve contributors at this time

411 lines (327 sloc) 16.816 kB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/cfe.css" />
<!--[ if IE7]>
<link rel="stylesheet" href="css/ie7.css" />
<![endif]-->
<style type="text/css">
/* resetting styles for browsers */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
font-family: Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
clear: both;
margin: .25em 0 .75em;
}
p{
margin-bottom: 1.25em;
}
ol, ul {
list-style: none;
}
blockquote {
quotes: none;
}
blockquote:before, blockquote:after {
content: '';
content: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset {
border: 1px solid #E7E7E7;
margin: 0 0 24px 0;
padding: 24px;
}
fieldset legend {
background: #fff;
font-weight: bold;
padding: 0 24px;
}
form{
margin: 20px;
}
/* CFE custom css styles */
.cfeButton, .cfeCheckbox, .cfeRadiobutton, label{height: 1.8em}
body{
line-height: 1.4
}
</style>
</head>
<body>
<h1>CFE Barebone Example</h1>
<p>for mootools 1.2</p>
<p>
<a href="http://customformelements.net">Visit homepage</a>
</p>
<form id="form" method="post" action="#" enctype="multipart/form-data">
<fieldset class="chb1" id="c1"><legend class="tog"><strong>Checkboxes</strong> (input[checkbox])</legend>
<ul>
<li><input title="One important checkbox" id="chb1" type="checkbox" value="Checkbox1:Great!" name="checkbox1" />
<label for="chb1">Checkbox #1 - checked by default</label>
</li>
<li><input id="chb2" type="checkbox" value="Checkbox2:Wow!" name="checkbox2" />
<label for="chb2">Checkbox #2</label>
</li>
<li><input id="chb3" type="checkbox" value="Checkbox3:Fascinating!" name="checkbox3" />
<label for="chb3">Checkbox #3</label></li>
<li><input id="chb4" type="checkbox" value="Checkbox4:Oh.Disabled!" name="checkbox4" checked="checked" disabled="disabled" />
<label for="chb4">Checkbox #4 (disabled)</label></li>
<li><a href="#" id="trigger">trigger checkbox 4 disabled/enabled</a>
</li>
<li><a href="index.php?select=group1" id="selectAll">select all Checkboxes above</a>
</li>
<li><a href="index.php?deselect=group1" id="deselectAll">deselect all Checkboxes above</a>
</li>
</ul>
</fieldset>
<fieldset class="chb2" id="c2"><legend class="tog"><strong>Checkboxes</strong> with implicit labelling</legend>
<p><em>NOTE: 3rd Checkbox has dependencies: 1st and 2nd get automatically checked if not already</em></p>
<ul>
<li><label><input title="One important checkbox" id="chb21" type="checkbox" checked="checked" value="Checkbox1:Great!" name="checkbox21" /><span class="label">Checkbox #1 - checked by default</span></label>
</li>
<li><label><input id="chb22" type="checkbox" value="Checkbox2:Wow!" name="checkbox22" /><span class="label">Checkbox #2</span></label>
</li>
<li><label><input id="chb23" type="checkbox" value="Checkbox3:Fascinating!" name="checkbox23" /><span class="label">Checkbox #3</span></label></li>
</ul>
</fieldset>
<fieldset class="rb1" id="r1"><legend class="tog"><strong>Radiobuttons</strong> (input[radio])</legend>
<ul>
<li><input id="rb1" title="The first element has a title-Attribute" type="radio" value="1:Choice1:Hooray!" name="radio" />
<label for="rb1">Radiobutton #1 - checked by default</label>
</li>
<li><input id="rb2" type="radio" value="1:Choice2:Woot!" name="radio" />
<label for="rb2">Radiobutton #2</label>
</li>
<li><label>
<input type="radio" title="The first element has a title-Attribute" value="2:Choice1:Hooray!" name="radio2[hallo]" />
<span class="label">Radiobutton #1 - checked by default</span>
</label>
</li>
<li><label>
<input type="radio" value="2:Choice2:Woot!" name="radio2[hallo]" />
<span class="label">Radiobutton #2</span></label>
</li>
<li><input type="radio" title="The first element has a title-Attribute" value="3:Choice1:Hooray!" name="radio3[hallo]" />
</li>
<li><input type="radio" value="3:Choice2:Woot!" name="radio3[hallo]" />
</li>
</ul>
</fieldset>
<fieldset class="txt1" id="i1"><legend class="tog"><strong>Textinput&amp;-area</strong>(input[text,password],textarea)- w/ slidingDoors</legend>
<ul>
<li><label for="input1">This toggles a text field</label>
<input id="input1" class="mediumInput" type="text" value="" name="input1" />
</li>
<li><label for="input2">This toggles a second text field</label>
<input id="input2" type="text" value="" name="input2" />
</li>
<li><label for="input3">This toggles a smaller third text field</label>
<input id="input3" class="shortInput" title="Put your initials here" type="text" value="" name="input3" />
</li>
<li><label for="input4">This textfield is disabled</label>
<input id="input4" class="shortInput" title="Nothing to do here. Disabled." type="text" value="...disabled" disabled="disabled" name="input4" />
</li>
<li><a href="#" id="triggertxt">trigger textfield 4 disabled/enabled</a>
</li>
<li><label for="input5">This textfield is readonly</label>
<input id="input5" class="shortInput" title="Feel free to read this." type="text" value="...readonly" name="input5" readonly="readonly" />
</li>
<li><label for="password">Secret password field</label>
<input id="password" title="Enter secret password" type="password" value=" " name="password" />
</li>
<li><label for="textarea1">And this one a text area</label>
<textarea name="textarea1" id="textarea1" rows="4" cols="5"></textarea>
</li>
<li><label for="textarea2">And this one a disabled text area</label>
<textarea name="textarea2" id="textarea2" rows="2" cols="5" disabled="disabled">...disabled</textarea>
</li>
<li><a href="#" id="triggerta">trigger textarea 2 disabled/enabled</a>
</li>
<li><label for="textarea3">And this one a readonly text area</label>
<textarea name="textarea3" id="textarea3" rows="2" cols="5" readonly="readonly">...readonly</textarea>
</li>
</ul>
</fieldset>
<fieldset class="txt2" id="i2"><legend class="tog"><strong>Textinput&amp;-area</strong> with implicit labelling</legend>
<ul>
<li><label><span class="label">This toggles a text field</span>
<input type="text" class="mediumInput" value="" name="input31" id="autotabnext" /></label>
</li>
<li><label><span class="label">This toggles a second text field</span>
<input type="text" value="" name="input32" /></label>
</li>
<li><label><span class="label">This toggles a smaller third text field</span>
<input class="shortInput" title="Put your initials here" type="text" value="" name="input33" /></label>
</li>
<li><label><span class="label">Secret password field</span>
<input title="Enter secret password" type="password" value="" name="password32" /></label>
</li>
<li><label><span class="label">And this one a text area</span>
<textarea name="textarea31" rows="4" cols="5"></textarea></label>
</li>
</ul>
</fieldset>
<!-- <fieldset class="txt1" id="i1"><legend class="tog"><strong>Textinput</strong>(input[text])- w/ autoTab</legend>
<em>after input of 3, 2 and 4 chars, the focus switches to the next field<br />after completing the last field, the cursor will jump to a specified element - here: $('autotabnext')</em>
<ul>
<li><label for="input21">This toggles a text field</label>
<input id="input21" size="2" class="autotab-group1-3" type="text" value="<?php echo($_POST['input1']) ?> " name="input21" />
<input id="input22" size="1" class="autotab-group1-2" type="text" value="<?php echo($_POST['input2']) ?> " name="input22" />
<input id="input23" size="3" class="autotab-group1-4" title="Put your initials here" type="text" value="<?php echo($_POST['input3']) ?> " name="input23" />
<input id="input23" size="3" class="autotab-group1-4" title="Put your initials here" type="text" value="<?php echo($_POST['input3']) ?> " name="input23" />
</li>
</ul>
</fieldset>
-->
<fieldset class="sel1" id="s1"><legend class="tog"><strong>Selectfield</strong> (select) with and without multiple option and preselected</legend>
<ul>
<li><label for="sel-norm">Normal select box</label>
<select id="sel-norm" name="selectNormal" title="select your occupation">
<option value="op1">Option 1</option>
<option value="op2">znother option 2</option>
<option value="op3">3rd option superfancywide</option>
<option value="op4">z Option 4</option>
<option value="op5">g Option 5</option>
<option value="op6">jl Option 6</option>
<option value="op7">jOption 7</option>
<option value="op8" selected="selected">jOption 8</option>
<option value="op9">h opt 43</option>
<option value="op10">hui</option>
</select>
</li>
<li><label for="sel-norm2">Normal select box 2 (smaller, with icons)</label>
<select id="sel-norm2" name="selectNormal2" title="select your occupation">
<option value="op1">Option 1</option>
<option value="op2">znother option 2</option>
<option value="op3" class="icon1">3rd (class "icon1")</option>
<option value="op4">z Option 4</option>
<option value="op5">g Option 5</option>
<option value="op6">jl Option 6</option>
<option value="op7" class="icon2">jOption 7 (class "icon2")</option>
<option value="op8" selected="selected">jOption 8</option>
<option value="op9">h opt 43</option>
<option value="op10">hui</option>
</select>
</li>
<li><label for="sel-norm3">Normal select box 3 (disabled)</label>
<select id="sel-norm3" name="selectNormal3" title="select nothing" disabled="disabled">
<option value="op1">Option 1</option>
<option value="op2">znother option 2</option>
<option value="op3">3rd option superfancywide</option>
<option value="op4">z Option 4</option>
<option value="op5">g Option 5</option>
<option value="op6">jl Option 6</option>
<option value="op7">jOption 7</option>
<option value="op8" selected="selected">jOption 8</option>
<option value="op9">h opt 43</option>
<option value="op10">hui</option>
</select>
</li>
<li><a href="#" id="trigger2">trigger select 3 disabled/enabled</a>
</li>
<li id="sm"><label for="sel-mult">Multiple select box</label>
<select id="sel-mult" multiple="multiple" name="selectMultiple[]">
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
<option value="op3">Option 3</option>
<option value="op4">Option 4</option>
<option value="op5">Option 5</option>
<option value="op6">Option 6</option>
<option value="op7">Option 7</option>
<option value="op8">Option 8</option>
</select>
</li>
<li id="sm2"><label for="sel-mult2">Multiple select box</label>
<select id="sel-mult2" multiple="multiple" name="selectMultiple2[]" disabled="disabled">
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
<option value="op3">Option 3</option>
<option value="op4">Option 4</option>
<option value="op5">Option 5</option>
<option value="op6">Option 6</option>
<option value="op7">Option 7</option>
<option value="op8">Option 8</option>
</select>
</li>
<li><a href="#" id="trigger3">trigger multiple select 2 disabled/enabled</a>
</li>
</ul>
</fieldset>
<fieldset class="up1" id="u1"><legend class="tog"><strong>file upload</strong> (input[file]) -- without and with implicit labelling</legend>
<ul>
<li><label for="upload">Upload a file</label>
<input id="upload" type="file" name="file" title="Upload a nice picture of yours. Maybe jpeg,jpg,gif." />
</li>
<li><label><span class="label">Upload a file</span>
<input id="upload2" type="file" name="file" title="Upload a nice picture of yours. Maybe jpeg,jpg,gif." />
</label>
</li>
<li><label for="upload3">Upload no file</label>
<input id="upload3" type="file" name="file3" title="Upload nothing - disabled." disabled="disabled" />
</li>
</ul>
</fieldset>
<fieldset class="btn1" id="b1">
<legend>Check POST Data or Reset Data via <strong>Buttons</strong> (input[submit], input[reset], input[image])</legend>
<ul>
<li>
<input type="submit" id="submitNorm" name="submit[normal]" title="via submit..." value="Submit" />
</li>
<li>
<input type="reset" id="resetty" name="none" title="Reset the form..." value="Reset" />
</li>
<li>
<input type="submit" id="submitNorm2" name="submit[normal2]" title="disabled" value="No function" disabled="disabled" />
</li>
<li>
<input type="image" id="submitImg" name="submit[image]" src="gfx/cfeImage.gif" title="via input type=image button" value="Image" />
</li>
<li>
<input type="image" id="submitImg2" disabled="disabled" name="submit[image2]" src="gfx/cfeImage.gif" title="via input type=image button" value="Image" />
</li>
</ul>
</fieldset>
<fieldset class="txt1" id="searchfield"><legend class="tog"><strong>Advanced example: Search field</strong></legend>
<ul>
<li>
<input id="searchBox" size="2" type="text" value="" name="inputSearch" />
<input id="searchBoxSubmit" type="submit" value="Go >" name="inputSearchSubmit" />
</li>
</ul>
</fieldset>
</form>
<script src="lib/mootools-1.2.4-core.js" type="text/javascript"></script>
<script src="lib/mootools-1.2.4-more.js" type="text/javascript"></script>
<script src="cfe-minified/cfe.js" type="text/javascript"></script>
<script src="cfe-minified/addons/cfe.addon.dependencies.js" type="text/javascript"></script>
<script src="cfe-minified/addons/cfe.addon.toggleCheckboxes.js" type="text/javascript"></script>
<script src="cfe-minified/addons/cfe.addon.toolTips.js" type="text/javascript"></script>
<script src="cfe.autostart.sample.js" type="text/javascript"></script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.