Skip to content

Commit

Permalink
Adding less file for Behavior.HtmlTable
Browse files Browse the repository at this point in the history 
* cleaning up HTML for more-behavior tests
  • Loading branch information
@anutron
anutron committed May 2, 2011
1 parent ae4efa0 commit d1a7ad0
Show file tree
Hide file tree
Showing 15 changed files with 1,341 additions and 1,167 deletions.
121 changes: 121 additions & 0 deletions Styles/Interface/Behavior.HtmlTable.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
table[data-filters*=HtmlTable] {
width: 100%;
}
table[data-filters*=HtmlTable] thead, table[data-filters*=HtmlTable] tfoot {
background: url(th_back.png);
}
table[data-filters*=HtmlTable] thead th, table[data-filters*=HtmlTable] tfoot th {
text-align: left;
white-space: nowrap;
padding: 0px 6px;
border: 1px solid #b2b2b2;
border-width: 0px 1px 1px 0px;
height: 16px !important;
line-height: 16px !important;
font-size: 12px;
font-weight: normal;
overflow: hidden;
}
table[data-filters*=HtmlTable] th:last-child {
border-right: none;
}

table[data-filters*=HtmlTable] td {
white-space: nowrap;
padding: 0px 8px;
height: 20px;
line-height: 20px;
background: #fff;
border: none;
overflow: hidden;
}
table[data-filters*=HtmlTable] tr.table-tr-odd td {
background-color: #f3f3f3;
}
table.jframe-bordered-table {
width: 98%;
margin: 4px 1%;
border: 1px solid #888;
}

table[data-filters*=HtmlTable].selectable tr:hover > td, table[data-filters*=HtmlTable].selectable tr.table-tr-hovered td,
table[data-filters*=HtmlTable].multiselect tr:hover > td, table[data-filters*=HtmlTable].multiselect tr.table-tr-hovered td,
table[data-filters*=HtmlTable].selectable tr:hover > td a, table[data-filters*=HtmlTable].selectable tr.table-tr-hovered td a,
table[data-filters*=HtmlTable].multiselect tr:hover > td a, table[data-filters*=HtmlTable].multiselect tr.table-tr-hovered td a {
background-color: #d4e7f8;
color: #000;
cursor: pointer;
}

table[data-filters*=HtmlTable] tr.selected td,
table[data-filters*=HtmlTable] tr.table-tr-selected td,
table[data-filters*=HtmlTable] tr.selected td a,
table[data-filters*=HtmlTable] tr.table-tr-selected td a,
table[data-filters*=HtmlTable] tr.selected:hover td,
table[data-filters*=HtmlTable] tr.table-tr-selected:hover td,
table[data-filters*=HtmlTable] tr.selected:hover td a,
table[data-filters*=HtmlTable] tr.table-tr-selected:hover td a {
background-color: #3875d7;
color: #fff;
}
table.table-sortable th {
cursor: pointer;
}
table.table-sortable th div {
position: relative;
padding-right: 10px;
}
span.table-th-sort-span {
width: 7px;
height: 16px;
display: block;
cursor: pointer;
position: absolute;
right: -2px;
top: 0px;
}
.table-th-sort span.table-th-sort-span {
background: url(bullet_arrow_down.png) -4px top no-repeat;
}
.table-th-sort-rev span.table-th-sort-span {
background: url(bullet_arrow_up.png) -4px top no-repeat;
}
table[data-filters*=HtmlTable].treeView tr.hidden {
display: none;
}
table[data-filters*=HtmlTable].treeView tr a.expand {
display: block;
float: left;
width: 10px;
height: 10px;
background: url(divots.png);
position: relative;
top: 4px;
left: -4px;
text-indent: -200px;
overflow: hidden;
}
table[data-filters*=HtmlTable].treeView tr.table-expanded a.expand {
background: url(divots.png) 0px -14px;
}
table[data-filters*=HtmlTable].treeView tbody tr > td:first-child {
padding-right: 20px;
}
.table-th-resizable.table-th-sort span.table-th-sort-span, .table-th-resizable.table-th-sort-rev span.table-th-sort-span {
padding-right: 13px;
}

table.table-resizable th div {
position: relative;
padding-right: 0px;
}
span.table-th-resizer {
position: absolute;
cursor: col-resize;
right: 9px;
width: 6px;
top: 0px;
display: block;
height: 100%;
z-index: 1;
}
Binary file added Styles/Interface/bullet_arrow_down.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Styles/Interface/bullet_arrow_up.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Styles/Interface/divots.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Styles/Interface/th_back.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 25 additions & 15 deletions Tests/Behaviors/Behavior.FormRequest.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,30 @@
<p>Click either submit button to update the box below. The box should have an ajax spinner and then update with the content in the button.</p>
<!DOCTYPE html>
<html>
<head>
<title>Behavior.FormRequest</title>
<script src="/depender/build?require=More-Behaviors/Behavior.FormRequest,More/Spinner"></script>
<link rel="stylesheet" href="/asset/more/spinner.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>

<link rel="stylesheet" href="/asset/more/spinner.css" type="text/css" media="screen" title="no title" charset="utf-8">
<p>Click either submit button to update the box below. The box should have an ajax spinner and then update with the content in the button.</p>

<form id="test" data-filters="FormRequest" data-update-by-id="update" action="/ajax_html_echo/" method="post">
<input type="submit" name="html" value="fetch html (button 1)"/>
<input type="submit" name="html" value="fetch html (button 2)"/>
</form>

<div style="position: relative; margin-top: 10px">
<div id="update" style="padding: 10px; width: 200px; border: 1px solid black; height: 100px; overflow:hidden;">
this box should get new text when you click the input above.
</div>
</div>
<form id="test" data-filters="FormRequest" data-update-by-id="update" action="/ajax_html_echo/" method="post">
<input type="submit" name="html" value="fetch html (button 1)"/>
<input type="submit" name="html" value="fetch html (button 2)"/>
</form>

<script src="/depender/build?require=More-Behaviors/Behavior.FormRequest,More/Spinner"></script>
<script>
new Behavior().apply(document.body);
</script>
<div style="position: relative; margin-top: 10px">
<div id="update" style="padding: 10px; width: 200px; border: 1px solid black; height: 100px; overflow:hidden;">
this box should get new text when you click the input above.
</div>
</div>

<script>
new Behavior().apply(document.body);
</script>


</body>
</html>
115 changes: 63 additions & 52 deletions Tests/Behaviors/Behavior.FormValidator.html
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,66 @@
<style>
.validation-advice {
color: red;
padding: 10px 0px;
}
input {
margin: 5px 0px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>Behavior.FormValidator</title>
<script src="/depender/build?require=More-Behaviors/Behavior.FormValidator"></script>
<style>
.validation-advice {
color: red;
padding: 10px 0px;
}
input {
margin: 5px 0px;
}
</style>
</head>
<body>

<p>Validates that a form's inputs are correct. Fill out the form as described and submit it. Errors should be displayed as you enter invalid values.</p>

<form id="foo" data-filters="FormValidator">
<dl>
<dt>this cannot be empty</dt>
<dd><input name="a" class="required"></dd>
<dt>this must be an integer (-1,0,1,2,3, etc)</dt>
<dd><input name="b" class="required validate-integer"></dd>
<dt>this must be numeric (0, 1.3, -5.2, 10, etc) </dt>
<dd><input name="c" class="required validate-numeric"></dd>
<dt>this must be between 3 and 6 characters long</dt>
<dd><input name="d" class="required minLength:3 maxLength:6"></dd>
<dt>this must be numbers only, but punctuation and spaces are ok</dt>
<dd><input name="e" class="required validate-digits"></dd>
<dt>this must be only letters</dt>
<dd><input name="f" class="required validate-alpha"></dd>
<dt>this must be letters and/or numbers</dt>
<dd><input name="g" class="required validate-alphanum"></dd>
<dt>this must be a date; try lots of combos</dt>
<dd><input name="h" class="required validate-date"></dd>
<dt>this must be an email address</dt>
<dd><input name="i" class="required validate-email"></dd>
<dt>this must be a url</dt>
<dd><input name="j" class="required validate-url"></dd>
<dt>this must be a dollar currency ($1.00, $1,000.00, $100)</dt>
<dd><input name="k" class="required validate-currency-dollar"></dd>
<dt>this one of these must be checked</dt>
<dd>a: <input name="l" type="checkbox" value="1">
b: <input name="m" type="checkbox" value="2"> c: <input type="checkbox" value="3" class="validate-one-required"></dd>
</dl>
<input type="submit">
</form>
<p>Validates that a form's inputs are correct. Fill out the form as described and submit it. Errors should be displayed as you enter invalid values.</p>

<script src="/depender/build?require=More-Behaviors/Behavior.FormValidator"></script>
<script>
new Behavior().apply(document.body);
$('foo').retrieve('validator').setOptions({
serial: false,
onFormValidate: function(passed, form, event){
event.stop();
if (passed) alert('form validated');
else alert('form did NOT validate');
}
});
</script>
<form id="foo" data-filters="FormValidator">
<dl>
<dt>this cannot be empty</dt>
<dd><input name="a" class="required"></dd>
<dt>this must be an integer (-1,0,1,2,3, etc)</dt>
<dd><input name="b" class="required validate-integer"></dd>
<dt>this must be numeric (0, 1.3, -5.2, 10, etc) </dt>
<dd><input name="c" class="required validate-numeric"></dd>
<dt>this must be between 3 and 6 characters long</dt>
<dd><input name="d" class="required minLength:3 maxLength:6"></dd>
<dt>this must be numbers only, but punctuation and spaces are ok</dt>
<dd><input name="e" class="required validate-digits"></dd>
<dt>this must be only letters</dt>
<dd><input name="f" class="required validate-alpha"></dd>
<dt>this must be letters and/or numbers</dt>
<dd><input name="g" class="required validate-alphanum"></dd>
<dt>this must be a date; try lots of combos</dt>
<dd><input name="h" class="required validate-date"></dd>
<dt>this must be an email address</dt>
<dd><input name="i" class="required validate-email"></dd>
<dt>this must be a url</dt>
<dd><input name="j" class="required validate-url"></dd>
<dt>this must be a dollar currency ($1.00, $1,000.00, $100)</dt>
<dd><input name="k" class="required validate-currency-dollar"></dd>
<dt>this one of these must be checked</dt>
<dd>a: <input name="l" type="checkbox" value="1">
b: <input name="m" type="checkbox" value="2"> c: <input type="checkbox" value="3" class="validate-one-required"></dd>
</dl>
<input type="submit">
</form>


<script>
new Behavior().apply(document.body);
$('foo').retrieve('validator').setOptions({
serial: false,
onFormValidate: function(passed, form, event){
event.stop();
if (passed) alert('form validated');
else alert('form did NOT validate');
}
});
</script>

</body>
</html>
34 changes: 21 additions & 13 deletions Tests/Behaviors/Behavior.FxAccordion.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,23 @@
<p> Below is an accordion, only one of the target areas should be visible at a time, dependent on which toggle was clicked last. </p>
<div data-filters="Accordion" style="width: 300px; margin: 10px;">
<div class="toggle" style="cursor:pointer; background: #777; padding: 2px;">Toggle 1</div>
<div class="target" style="padding: 4px;">This area is controlled by Toggle 1.</div>
<div class="toggle" style="cursor:pointer; background: #777; padding: 2px;">Toggle 2</div>
<div class="target" style="padding: 4px;">This area is controlled by Toggle 2.</div>
<div class="toggle" style="cursor:pointer; background: #777; padding: 2px;">Toggle 3</div>
<div class="target" style="padding: 4px;">This area is controlled by Toggle 3.</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title>Behavior.FxAccordion</title>
<script src="/depender/build?require=More-Behaviors/Behavior.FxAccordion"></script>
</head>
<body>
<p> Below is an accordion, only one of the target areas should be visible at a time, dependent on which toggle was clicked last. </p>
<div data-filters="Accordion" style="width: 300px; margin: 10px;">
<div class="toggle" style="cursor:pointer; background: #777; padding: 2px;">Toggle 1</div>
<div class="target" style="padding: 4px;">This area is controlled by Toggle 1.</div>
<div class="toggle" style="cursor:pointer; background: #777; padding: 2px;">Toggle 2</div>
<div class="target" style="padding: 4px;">This area is controlled by Toggle 2.</div>
<div class="toggle" style="cursor:pointer; background: #777; padding: 2px;">Toggle 3</div>
<div class="target" style="padding: 4px;">This area is controlled by Toggle 3.</div>
</div>

<script>
new Behavior().apply(document.body);
</script>

<script src="/depender/build?require=More-Behaviors/Behavior.FxAccordion"></script>
<script>
new Behavior().apply(document.body);
</script>
</body>
</html>

0 comments on commit d1a7ad0

Please sign in to comment.