-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding less file for Behavior.HtmlTable
* cleaning up HTML for more-behavior tests
- Loading branch information
Showing
15 changed files
with
1,341 additions
and
1,167 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
Oops, something went wrong.