Alien-GvaScript
view release on metacpan or search on metacpan
doc/html/AutoCompleter.html view on Meta::CPAN
<li><a name="item_offsetX"></a><b>offsetX</b>
<p>Offset (in pixels) from the left border of the
input element to the left border of the
suggestion DIV.
Default is 0.</p>
</li>
<li><a name="item_strict"></a><b>strict</b>
<p>If this option is true and the user
leaves the field with an illegal value
(not in the suggestion list),
the field is marked with a red background.
Default is false.</p>
</li>
<li><a name="item_blankOK"></a><b>blankOK</b>
<p>If this option is defined and false,
the field is marked with a red background
when left with an empty value.
Default is true.</p>
</li>
<li><a name="item_ignorePrefix"></a><b>ignorePrefix</b>
<p>If true, and if the datasource is a Javascript array, then
that whole array is always displayed as suggestions,
whatever may be typed in the input field (so the field
behaves more or less like a SELECT).
Default is false.</p>
</li>
<li><a name="item_caseSensitive"></a><b>caseSensitive</b>
<p>This option only applies if the datasource is a Javascript array
and if <code>ignorePrefix</code> is false.
If true (the default), filtering of the datasource array
from the current value of the input field
will be case-sensitive.</p>
</li>
<li><a name="item_colorIllegal"></a><b>colorIllegal</b>
<p>Which color to put in the background when a "strict" field contains
an illegal value (default is red).</p>
</li>
<li><a name="item_scrollCount"></a><b>scrollCount</b>
<p>How many items to skip when hitting the
<code>PAGE_UP</code> or <code>PAGE_DOWN</code> keys.
Default is 5</p>
</li>
<li><a name="item_htmlWrapper"></a><b>htmlWrapper</b>
<p>See the <code>ChoiceList</code> documentation.</p>
</li>
doc/html/CustomButtons.html view on Meta::CPAN
<p>Example CSS stylesheet for styling buttons.</p>
<p>By default, css classnames are prefixed by 'gva'.</p>
<p>This can be overloaded by a global js variable: CSS_PREFIX
if declared before the inclusion of this Library</p>
<p>Notice the <b>btn-focus</b>, <b>btn-hover</b> and <b>flash</b> classnames that are used to style
the buttons in their different states.</p>
<pre> /* IE fix: to the ridiculously wide buttons in IE */
.gva-btn-container .btn {width:1pt;overflow:visible;}
/* END: IE specific */
.gva-actionsbar {background-color:#E8E8E8;border:1px solid #8c8c8c;border-width:1px 0px;height:25px;padding:4px 0 1px;}
.gva-btn-container {display:inline;}
.gva-btn-container .btn {margin:0 3px;font-size:12px;cursor:pointer;}
.gva-btn-container .btn {
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
background:none;
border:none;
cursor:pointer;
padding:1px 2px;
color:#000;
background-color:transparent !important;
}
.gva-btn-container .btn {float:left;}
.gva-btn-container.btn-focus .btn {color:#aa0000;}
.gva-btn-container span {display:block;float:left;height:21px;}
.gva-btn-container span.left {background:transparent url(btn_sprite.gif) no-repeat scroll 0 0;padding:0 1px 0 2px;margin-left:4px;}
.gva-btn-container span.center {background:transparent url(btn_sprite.gif) repeat-x scroll 0 -42px;padding:0 2px}
.gva-btn-container span.right {background:transparent url(btn_sprite.gif) no-repeat scroll 0 -21px;padding:0 1px 0 2px;}
.gva-btn-container.btn-hover span.left {background-position:0 -63px;}
.gva-btn-container.btn-hover span.center {background-position:0 -105px;}
.gva-btn-container.btn-hover span.right {background-position:0 -84px;}
.gva-btn-container.btn-focus span.left {background-position:0 -63px;}
.gva-btn-container.btn-focus span.center {background-position:0 -126px;}
.gva-btn-container.btn-focus span.right {background-position:0 -84px;}
.gva-btn-container.flash .btn {color:red !important}</pre>
</div>
</div>
<div class="TN_node" id="DEPENDENCIES">
<h2 class="TN_label">DEPENDENCIES</h2>
<div class="TN_content">
<p>This class depends on other GvaScript classes:</p>
<ul>
doc/html/Grid.html view on Meta::CPAN
</div></pre>
</div>
</div>
<div class="TN_node" id="CSS">
<h3 class="TN_label">CSS</h3>
<div class="TN_content">
<pre> /* class given to grid list container when an AJAX request is being affected */
.dmweb-loading {
background:url(ajax_loading.gif) no-repeat center center;
position:absolute;
width:30px;height:30px;
top:50%;left:50%;
}
/* grid toolbar */
.dmweb-grid-toolbar {
background:#C5CCE8 url(glass-bg-n.gif) repeat-x scroll left top;
border:1px solid #A3BAD9;
height:28px;
}
.dmweb-grid-actionsbar {float:left;}
.dmweb-paginatorbar {float:right;width:250px;}
.dmweb-paginatorbar div {width:16px;height:16px;cursor:pointer;float:right;}
.dmweb-paginatorbar div.first {background:url(page-first.gif) no-repeat top center;}
.dmweb-paginatorbar div.last {background:url(page-last.gif) no-repeat top center;}
.dmweb-paginatorbar div.back {background:url(page-prev.gif) no-repeat top center;}
.dmweb-paginatorbar div.forward {background:url(page-next.gif) no-repeat top center;}
.dmweb-paginatorbar div.inactive {cursor:default;opacity:0.25;filter:alpha(opacity=25);}
.dmweb-paginatorbar div.text {text-align:center;width:140px;color:#4b34c5;font-size:10pt;}
.dmweb-paginatorbar span.dmweb-btn-container {display:block;margin-right:4px;}
/* grid table */
.dmweb-grid {width:100%;}
.dmweb-grid th.grid-header {
text-align:center;
padding:2px;
font-size:75%;
color: #183E6C;
background-color: #D0D6ED;
border:1px solid #6F82A5;
}
.dmweb-grid td {font-size:75%;color:#183E6C;}
.dmweb-grid .grid-marker {width:15px;background-color: #D0D6ED;border:1px solid #6F82A5;}
.dmweb-grid tr.liste_highlight td.grid-marker {
background: #D0D6ED url(selector.gif) no-repeat center center;
}
.dmweb-grid tr.liste_highlight td.grid-cell {background-color: #6F82A5 !important;color:#f5f5f5 !important;}
.dmweb-grid td.grid-cell {padding:2px !important;border:1px solid #e8e8e8;}
.dmweb-grid td.grid-cell.index_1 {background-color:#EFEFEF;}
.dmweb-grid td.grid-cell.center {text-align:center;float:none;}
.dmweb-grid td.grid-cell.right {text-align:right;float:none;}
.dmweb-grid td.grid-cell.red {color:red;}</pre>
</div>
</div>
</div>
</div>
doc/html/GvaScript_doc.css view on Meta::CPAN
BODY, TD {
font-family: Verdana, Arial, Helvetica;
font-size: 85%;
background-color: #f5f5f5;
color: #333;
}
TABLE {
border-collapse: collapse;
}
TD {
border: 1px solid #888;
padding: 6px;
}
H1, H2, H3, H4, H5, H6 {
display:inline;
color: navy;
}
h1 {color: #a00;}
PRE {
background: #eee;
border: 1px solid #888;
padding: 4px;
}
CODE {
background: #eee;
border: 1px solid #888;
padding: 1px;
}
.TN_node {
display : block;
}
/* node content is 15px more on the right than the node itself */
.TN_content {
display : block;
doc/html/GvaScript_doc.css view on Meta::CPAN
/* labels are clickable */
.TN_label {
display: -moz-inline-box;
cursor: pointer;
}
/* buttons in front of each node label */
.TN_button {
background-image: url(minus.gif);
background-repeat : no-repeat;
background-position : center left;
width: 15px;
padding-right: 15px;
cursor: pointer;
}
/* how to highlight the current selected node */
.TN_selected {
background-color: #e0e3ef;
}
/* class to implement pseudo-hover on node labels */
.TN_mouse {
text-decoration: underline;
}
/* when a node is closed, the button icon becomes a 'plus', and
the content is hidden */
.TN_closed .TN_button {
background-image: url(plus.gif);
}
.TN_closed .TN_content {
display : none;
}
/* leaf nodes have a single icon 'dot' */
.TN_leaf .TN_button {
background-image: url(dot.gif);
cursor: default;
}
doc/html/Paginator.html view on Meta::CPAN
</div>
<div class="TN_node" id="CSS">
<h4 class="TN_label">CSS</h4>
<div class="TN_content">
<p>Easy customization of icons</p>
<p>By default, css classnames are prefixed by 'gva'.</p>
<p>This can be overloaded by a global js variable: CSS_PREFIX
if declared before the inclusion of this Library</p>
<pre> .gva-paginatorbar {float:right;width:250px;}
.gva-paginatorbar div {width:16px;height:16px;cursor:pointer;float:right;}
.gva-paginatorbar div.first {background:url(page-first.gif) no-repeat top center;}
.gva-paginatorbar div.last {background:url(page-last.gif) no-repeat top center;}
.gva-paginatorbar div.back {background:url(page-prev.gif) no-repeat top center;}
.gva-paginatorbar div.forward {background:url(page-next.gif) no-repeat top center;}
.gva-paginatorbar div.inactive {cursor:default;opacity:0.25;filter:alpha(opacity=25);}
.gva-paginatorbar div.text {text-align:center;width:140px;color:#4b34c5;font-size:10pt;}
/* classname given to the list container while data is waiting to be loaded */
.gva-loading {
background:url(ajax_loading.gif) no-repeat center center;
position:absolute;
width:30px;height:30px;
top:50%;left:50%;
}</pre>
</div>
</div>
</div>
doc/html/TreeNavigator.html view on Meta::CPAN
</div>
</div>
<div class="TN_node" id="Icons_customization">
<h3 class="TN_label">Icons customization</h3>
<div class="TN_content">
<p>By default, the navigation buttons inserted on the
left of labels are small icons representing +/- signs.
To show other icons, change the CSS rules about the
<code>TN_button</code> class:</p>
<pre> .TN_button {
background-image: url(myIconForOpenNodes.gif);
}
.TN_closed .TN_button {
background-image: url(myIconForClosedNodes.gif);
}</pre>
<p>In addition, if you want another icon for illustrating
the node's content (like for example an open or closed
folder), you can proceed as follows:</p>
<ul>
<li>
<p>add an empty <code>span</code> element within the
labels that should have the icon</p>
<pre> <span class="TN_label"><span class="specialNode"></span>some label</span></pre>
</li>
<li>
<p>define CSS background images for selectors
<code>.specialNode</code> and <code>.TN_closed .specialNode</code>,
as in the example above</p>
</li>
</ul>
</div>
</div>
</div>
</div>
doc/html/TreeNavigator.html view on Meta::CPAN
<p>If there was a selected node, unselect it; then select the argument
node. The argument can be <code>null</code>, in which case the tree no longer
has any selected node.</p>
<p>The second argument <code>prevent_autoscroll</code> is optional; if true,
no autoscroll will be performed.</p>
</li>
<li><a name="item__code_scrollTo_node___code_"></a><b><code>scrollTo(node)</code></b>
<p>Positions the node in the middle of the screen</p>
</li>
<li><a name="item__code_flash_node__duration__color___code_"></a><b><code>flash(node, duration, color)</code></b>
<p>Changes the background color of <i>node</i> to <i>color</i> for <i>duration</i>
milliseconds. Duration and color are optional and default to 200 ms
and 'red' (unless otherwise specified in the options to the
<code>treeNavigator</code> constructor).</p>
</li>
<li><a name="item__code_isClosed_node___code_"></a><b><code>isClosed(node)</code></b>
<p>Returns true if the node is closed</p>
</li>
<li><a name="item__code_isVisible_node___code_"></a><b><code>isVisible(node)</code></b>
<p>Returns true if the node is visible
(i.e. does not have <code>display:none</code>).</p>
lib/Alien/GvaScript/AutoCompleter.pod view on Meta::CPAN
Offset (in pixels) from the left border of the
input element to the left border of the
suggestion DIV.
Default is 0.
=item strict
If this option is true and the user
leaves the field with an illegal value
(not in the suggestion list),
the field is marked with a red background.
Default is false.
=item blankOK
If this option is defined and false,
the field is marked with a red background
when left with an empty value.
Default is true.
=item ignorePrefix
If true, and if the datasource is a Javascript array, then
that whole array is always displayed as suggestions,
whatever may be typed in the input field (so the field
behaves more or less like a SELECT).
Default is false.
lib/Alien/GvaScript/AutoCompleter.pod view on Meta::CPAN
=item caseSensitive
This option only applies if the datasource is a Javascript array
and if C<ignorePrefix> is false.
If true (the default), filtering of the datasource array
from the current value of the input field
will be case-sensitive.
=item colorIllegal
Which color to put in the background when a "strict" field contains
an illegal value (default is red).
=item scrollCount
How many items to skip when hitting the
C<PAGE_UP> or C<PAGE_DOWN> keys.
Default is 5
=item htmlWrapper
lib/Alien/GvaScript/CustomButtons.pod view on Meta::CPAN
This can be overloaded by a global js variable: CSS_PREFIX
if declared before the inclusion of this Library
Notice the B<btn-focus>, B<btn-hover> and B<flash> classnames that are used to style
the buttons in their different states.
/* IE fix: to the ridiculously wide buttons in IE */
.gva-btn-container .btn {width:1pt;overflow:visible;}
/* END: IE specific */
.gva-actionsbar {background-color:#E8E8E8;border:1px solid #8c8c8c;border-width:1px 0px;height:25px;padding:4px 0 1px;}
.gva-btn-container {display:inline;}
.gva-btn-container .btn {margin:0 3px;font-size:12px;cursor:pointer;}
.gva-btn-container .btn {
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
background:none;
border:none;
cursor:pointer;
padding:1px 2px;
color:#000;
background-color:transparent !important;
}
.gva-btn-container .btn {float:left;}
.gva-btn-container.btn-focus .btn {color:#aa0000;}
.gva-btn-container span {display:block;float:left;height:21px;}
.gva-btn-container span.left {background:transparent url(btn_sprite.gif) no-repeat scroll 0 0;padding:0 1px 0 2px;margin-left:4px;}
.gva-btn-container span.center {background:transparent url(btn_sprite.gif) repeat-x scroll 0 -42px;padding:0 2px}
.gva-btn-container span.right {background:transparent url(btn_sprite.gif) no-repeat scroll 0 -21px;padding:0 1px 0 2px;}
.gva-btn-container.btn-hover span.left {background-position:0 -63px;}
.gva-btn-container.btn-hover span.center {background-position:0 -105px;}
.gva-btn-container.btn-hover span.right {background-position:0 -84px;}
.gva-btn-container.btn-focus span.left {background-position:0 -63px;}
.gva-btn-container.btn-focus span.center {background-position:0 -126px;}
.gva-btn-container.btn-focus span.right {background-position:0 -84px;}
.gva-btn-container.flash .btn {color:red !important}
=head1 DEPENDENCIES
This class depends on other GvaScript classes:
=over
lib/Alien/GvaScript/Grid.pod view on Meta::CPAN
</span>
</div>
</div>
</div>
=head2 CSS
/* class given to grid list container when an AJAX request is being affected */
.dmweb-loading {
background:url(ajax_loading.gif) no-repeat center center;
position:absolute;
width:30px;height:30px;
top:50%;left:50%;
}
/* grid toolbar */
.dmweb-grid-toolbar {
background:#C5CCE8 url(glass-bg-n.gif) repeat-x scroll left top;
border:1px solid #A3BAD9;
height:28px;
}
.dmweb-grid-actionsbar {float:left;}
.dmweb-paginatorbar {float:right;width:250px;}
.dmweb-paginatorbar div {width:16px;height:16px;cursor:pointer;float:right;}
.dmweb-paginatorbar div.first {background:url(page-first.gif) no-repeat top center;}
.dmweb-paginatorbar div.last {background:url(page-last.gif) no-repeat top center;}
.dmweb-paginatorbar div.back {background:url(page-prev.gif) no-repeat top center;}
.dmweb-paginatorbar div.forward {background:url(page-next.gif) no-repeat top center;}
.dmweb-paginatorbar div.inactive {cursor:default;opacity:0.25;filter:alpha(opacity=25);}
.dmweb-paginatorbar div.text {text-align:center;width:140px;color:#4b34c5;font-size:10pt;}
.dmweb-paginatorbar span.dmweb-btn-container {display:block;margin-right:4px;}
/* grid table */
.dmweb-grid {width:100%;}
.dmweb-grid th.grid-header {
text-align:center;
padding:2px;
font-size:75%;
color: #183E6C;
background-color: #D0D6ED;
border:1px solid #6F82A5;
}
.dmweb-grid td {font-size:75%;color:#183E6C;}
.dmweb-grid .grid-marker {width:15px;background-color: #D0D6ED;border:1px solid #6F82A5;}
.dmweb-grid tr.liste_highlight td.grid-marker {
background: #D0D6ED url(selector.gif) no-repeat center center;
}
.dmweb-grid tr.liste_highlight td.grid-cell {background-color: #6F82A5 !important;color:#f5f5f5 !important;}
.dmweb-grid td.grid-cell {padding:2px !important;border:1px solid #e8e8e8;}
.dmweb-grid td.grid-cell.index_1 {background-color:#EFEFEF;}
.dmweb-grid td.grid-cell.center {text-align:center;float:none;}
.dmweb-grid td.grid-cell.right {text-align:right;float:none;}
.dmweb-grid td.grid-cell.red {color:red;}
=head1 DEPENDENCIES
This class depends on the following GvaScript classes:
=over 12
lib/Alien/GvaScript/Paginator.pod view on Meta::CPAN
Easy customization of icons
By default, css classnames are prefixed by 'gva'.
This can be overloaded by a global js variable: CSS_PREFIX
if declared before the inclusion of this Library
.gva-paginatorbar {float:right;width:250px;}
.gva-paginatorbar div {width:16px;height:16px;cursor:pointer;float:right;}
.gva-paginatorbar div.first {background:url(page-first.gif) no-repeat top center;}
.gva-paginatorbar div.last {background:url(page-last.gif) no-repeat top center;}
.gva-paginatorbar div.back {background:url(page-prev.gif) no-repeat top center;}
.gva-paginatorbar div.forward {background:url(page-next.gif) no-repeat top center;}
.gva-paginatorbar div.inactive {cursor:default;opacity:0.25;filter:alpha(opacity=25);}
.gva-paginatorbar div.text {text-align:center;width:140px;color:#4b34c5;font-size:10pt;}
/* classname given to the list container while data is waiting to be loaded */
.gva-loading {
background:url(ajax_loading.gif) no-repeat center center;
position:absolute;
width:30px;height:30px;
top:50%;left:50%;
}
=head1 Programming Interface
=head2 Methods
lib/Alien/GvaScript/TreeNavigator.pod view on Meta::CPAN
=head2 Icons customization
By default, the navigation buttons inserted on the
left of labels are small icons representing +/- signs.
To show other icons, change the CSS rules about the
C<TN_button> class:
.TN_button {
background-image: url(myIconForOpenNodes.gif);
}
.TN_closed .TN_button {
background-image: url(myIconForClosedNodes.gif);
}
In addition, if you want another icon for illustrating
the node's content (like for example an open or closed
folder), you can proceed as follows:
=over
=item *
add an empty C<span> element within the
labels that should have the icon
<span class="TN_label"><span class="specialNode"></span>some label</span>
=item *
define CSS background images for selectors
C<.specialNode> and C<.TN_closed .specialNode>,
as in the example above
=back
=head1 Usage : navigation
Navigation in the tree is either with the mouse or with
the keyboard. At any point in time, at most one node is
I<selected> : this is the one that receives keyboard
lib/Alien/GvaScript/TreeNavigator.pod view on Meta::CPAN
no autoscroll will be performed.
=item C<scrollTo(node)>
Positions the node in the middle of the screen
=item C<flash(node, duration, color)>
Changes the background color of I<node> to I<color> for I<duration>
milliseconds. Duration and color are optional and default to 200 ms
and 'red' (unless otherwise specified in the options to the
C<treeNavigator> constructor).
=item C<isClosed(node)>
Returns true if the node is closed
=item C<isVisible(node)>
lib/Alien/GvaScript/lib/GvaScript.css view on Meta::CPAN
html { font-size: 100%; }
body { font: 0.75em Verdana,Arial,Helvetica,sans-serif; background-color: #f5f5f5; color: #333; }
h1 {color: #4e5b82; letter-spacing: 2px; font-variant: small-caps;}
h2 {color: #a00;}
h3 {color: navy;}
/* LOG BLOCK */
#logs {
height:100px;
padding: 0.3em;
margin: 0.2em 0 2em;
background-color: #E0EFE2;
overflow-y:auto;
border:1px solid green;
font:8pt 'courier new';
}
#logs .msg { border-bottom: 1px solid #c3dfc7; }
#logs .msg em { color: #a8cfad; }
/* AUTOCOMPLETER */
input.inputComplete {
background-repeat :no-repeat;
background-position:right center;
background-image:url(images/search-small.png);
}
.AC_dropdown {
position: absolute;
background-color:#ecf2ff;
border: 1px solid #183E6C;
padding: 3px;
padding-right: 25px; /* so that scrollbars don't hide the content */
color: #183E6C;
overflow-y: auto;
}
.AC_highlight {
background-color: #183E6C;
color: #ecf2ff;
}
.AC_message {
width: auto;
background-color: #ff9;
padding : 4px;
color: black;
border: 1px black solid;
}
.AC_action {
width: auto;
color: #f24;
}
.AC_input {
background-position: right;
background-repeat: no-repeat;
background-image: url(autocomplete.gif);
}
.AC_loading {
background-position: right;
background-repeat: no-repeat;
background-image: url(ajax_loading_small.gif);
}
/* TREE NAVIGATOR */
.TN_node {
display : block;
}
/* node content is 15px more on the right than the node itself */
lib/Alien/GvaScript/lib/GvaScript.css view on Meta::CPAN
/* labels are clickable */
.TN_label {
display: -moz-inline-box;
cursor: pointer;
}
/* buttons in front of each node label */
.TN_button {
background-image: url(minus.gif);
background-repeat : no-repeat;
background-position : center left;
width: 15px;
padding-right: 15px;
cursor: pointer;
}
/* how to highlight the current selected node */
.TN_selected {
background-color: yellow;
}
/* class to implement pseudo-hover on node labels */
.TN_mouse {
text-decoration: underline;
}
/* when a node is closed, the button icon becomes a 'plus', and
the content is hidden */
.TN_closed .TN_button {
background-image: url(plus.gif);
}
.TN_closed .TN_content {
display : none;
}
/* leaf nodes have a single icon 'dot' */
.TN_leaf .TN_button {
background-image: url(dot.gif);
cursor: default;
}
/* showall : the content of closed nodes is nevertheless visible
(useful for printing) */
.TN_showall .TN_closed .TN_content {
display: block;
}
.TN_showall {
border-left: 5px dotted gray;
}
/* CHOICE LIST */
.CL_highlight, .hilite td {
background-color: #183E6C !important;
color: #ecf2ff !important;
}
/* CUSTOM BUTTONS */
.flash {background-color:red !important;}
.flash .btn {color:red !important}
.gva-actionsbar {background-color:#E8E8E8;border:1px solid #8c8c8c;border-width:1px 0px;height:25px;padding:4px 0 1px;}
.gva-btn-container {display:inline;}
.gva-btn-container .btn {margin:0 3px;font-size:12px;cursor:pointer;}
.gva-btn-container .btn {
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
background:none;
border:none;
cursor:pointer;
padding:1px 2px;
color:#000;
background-color:transparent !important;
}
.gva-btn-container .btn {float:left;}
.gva-btn-container.btn-focus .btn {color:#aa0000;}
.gva-btn-container span {display:block;float:left;height:21px;}
.gva-btn-container span.left {background:transparent url(btn_sprite.gif) no-repeat scroll 0 0;padding:0 1px 0 2px;margin-left:4px;}
.gva-btn-container span.center {background:transparent url(btn_sprite.gif) repeat-x scroll 0 -42px;padding:0 2px}
.gva-btn-container span.right {background:transparent url(btn_sprite.gif) no-repeat scroll 0 -21px;padding:0 1px 0 2px;}
.gva-btn-container.btn-hover span.left {background-position:0 -63px;}
.gva-btn-container.btn-hover span.center {background-position:0 -105px;}
.gva-btn-container.btn-hover span.right {background-position:0 -84px;}
.gva-btn-container.btn-focus span.left {background-position:0 -63px;}
.gva-btn-container.btn-focus span.center {background-position:0 -126px;}
.gva-btn-container.btn-focus span.right {background-position:0 -84px;}
/* GRID */
table {padding:0;margin: 0;border-collapse:collapse;}
#grid_container {border: 1px solid #a3bad9; border-width: 0 1px;}
.gva-loading {
background:url(images/formulaire/ajax_loading.gif) no-repeat center center;
position:absolute;
width:30px;height:30px;
top:50%;left:50%;
}
/* grid toolbar */
.gva-grid-toolbar {
background:#C5CCE8 url(images/paginator/glass-bg-n.gif) repeat-x scroll left top;
border:1px solid #A3BAD9;
width: 100%;
height:28px;
}
.gva-grid-actionsbar {float:left;margin-top:4px;}
.gva-paginatorbar {float:right;width:250px;margin-top:7px;}
.gva-paginatorbar div {width:16px;height:16px;cursor:pointer;float:right;}
.gva-paginatorbar div.first {background:url(images/paginator/page-first.gif) no-repeat top center;}
.gva-paginatorbar div.last {background:url(images/paginator/page-last.gif) no-repeat top center;}
.gva-paginatorbar div.back {background:url(images/paginator/page-prev.gif) no-repeat top center;}
.gva-paginatorbar div.forward {background:url(images/paginator/page-next.gif) no-repeat top center;}
.gva-paginatorbar div.inactive {cursor:default;opacity:0.25;filter:alpha(opacity=25);}
.gva-paginatorbar div.text {text-align:center;width:140px;color:#4b34c5;font-size:10pt;}
.gva-paginatorbar span.gva-btn-container {display:block;margin-right:4px;}
/* grid table */
.gva-grid {width:100%;font-size:12px}
.gva-grid th.grid-header {
text-align:center;
padding:2px;
color: navy;
background-color: #D0D6ED;
border:1px solid #6F82A5;
}
.gva-grid td {color: navy;}
.gva-grid .grid-marker {
width:15px;
background-color: #D0D6ED;
border:1px solid #6F82A5;
}
.gva-grid tr.liste_highlight td.grid-marker {
background: #D0D6ED url(images/paginator/selector.gif) no-repeat center center;
}
.gva-grid tr.liste_highlight td.grid-cell {background-color: #6F82A5 !important;color:#f5f5f5 !important;}
.gva-grid td.grid-cell {padding:2px !important;border:1px solid #e8e8e8;}
.gva-grid td.grid-cell.index_1 {background-color:#EFEFEF;}
.gva-grid td.grid-cell.center {text-align:center;float:none;}
.gva-grid td.grid-cell.right {text-align:right;float:none;}
.gva-grid td.grid-cell.red {color:#a00;}
.icon-add {
display:inline-table;
width:16px;
height:16px;
cursor:pointer;
background: transparent url(add.png) no-repeat left center;
}
.icon-delete {
display:inline-table;
float: right;
width:16px;
height:16px;
cursor:pointer;
background: transparent url(delete.png) no-repeat left center;
}
lib/Alien/GvaScript/lib/GvaScript.js view on Meta::CPAN
}
}
//----------treeNavigator.js
//-----------------------------------------------------
// Constructor
//-----------------------------------------------------
GvaScript.TreeNavigator = function(elem, options) {
// fix bug of background images on dynamic divs in MSIE 6.0, see URLs
// http://www.bazon.net/mishoo/articles.epl?art_id=958
// http://misterpixel.blogspot.com/2006/09/forensic-analysis-of-ie6.html
try { document.execCommand("BackgroundImageCache",false,true); }
catch(e) {};
elem = $(elem); // in case we got an id instead of an element
options = options || {};
// default options
var defaultOptions = {
lib/Alien/GvaScript/lib/GvaScript.js view on Meta::CPAN
autoSuggest : true, // will dropDown automatically on keypress
autoSuggestDelay : 100, // milliseconds, (OBSOLETE)
checkNewValDelay : 100, // milliseconds
typeAhead : true, // will fill the inputElement on highlight
classes : {}, // see below for default classes
maxHeight : 200, // pixels
minWidth : 200, // pixels
offsetX : 0, // pixels
strict : false, // will complain on illegal values
blankOK : true, // if strict, will also accept blanks
colorIllegal : "red", // background color when illegal values
scrollCount : 5,
multivalued : false,
multivalue_separator : /[;,\s]\s*/,
choiceItemTagName: "div",
htmlWrapper : function(html) {return html;},
observed_scroll : null, // observe the scroll of a given element and
// move the dropdown accordingly (useful in
// case of scrolling windows)
additional_params: null, // additional parameters with optional default
// values (only in the case where the
lib/Alien/GvaScript/lib/GvaScript.js view on Meta::CPAN
// PRIVATE METHODS
//----------------------------------------------------------------------
_updateChoicesFromAjax: function (val_to_complete, continuation) {
// copies into local variables, needed for closures below (can't rely on
// 'this' because 'this' may have changed when the ajax call comes back)
var autocompleter = this;
var inputElement = this.inputElement;
inputElement.style.backgroundColor = ""; // remove colorIllegal
// abort prev ajax request on this input element
if (this._runningAjax[inputElement.name])
this._runningAjax[inputElement.name].transport.abort();
Element.addClassName(inputElement, this.classes.loading);
// encode value to complete
val_to_complete = val_to_complete.split("").map(function (c) {
if (c.match(/[@\+\/]/)) {
lib/Alien/GvaScript/lib/GvaScript.js view on Meta::CPAN
this._fireFinalStatus(this.inputElement, this.choices);
}
// if not enough chars to get valid choices, this is illegal
else if (value.length < this.options.minimumChars) {
var return_value = this.fireEvent({
type: "IllegalValue", value: value
}, this.inputElement);
if(! return_value) {
this.inputElement.style.backgroundColor = this.options.colorIllegal;
this._updateDependentFields(this.inputElement, null);
}
}
// otherwise get choices and then inspect status (maybe asynchronously)
else {
this._updateChoices(this._fireFinalStatus.bind(this,
this.inputElement));
}
}
lib/Alien/GvaScript/lib/GvaScript.js view on Meta::CPAN
}
else {
var return_value = this.fireEvent({
type : "IllegalValue",
value : input_val,
controller : null
}, inputElement);
if(! return_value) {
inputElement.style.backgroundColor = this.options.colorIllegal;
this._updateDependentFields(inputElement, null);
}
}
},
_updateDependentFields: function(inputElement, choice) {
// "choice" might be
// - an object or nonempty string ==> update dependent fields
// - an empty string ==> clear dependent fields
// - null ==> put "ILLEGAL_***"
lib/Alien/GvaScript/lib/GvaScript.js view on Meta::CPAN
// if, meanwhile, another keyDown occurred, then abort
if (this._timeLastKeyDown > this._timeLastCheck) {
// if (window.console)
// console.log('after updateChoices .. abort because of keyDown',
// now, this._timeLastKeyDown);
return;
}
this.choices = choices;
if (choices && choices.length > 0) {
this.inputElement.style.backgroundColor = ""; // remove colorIllegal
if (this.options.autoSuggest)
this._displayChoices();
}
else if (this.options.strict && (!this.options.blankOK)) {
this.inputElement.style.backgroundColor = this.options.colorIllegal;
}
};
// now call updateChoices (which then will call the continuation)
this._updateChoices(continuation.bind(this));
}
},
// return the value to be completed
src/autoCompleter.js view on Meta::CPAN
autoSuggest : true, // will dropDown automatically on keypress
autoSuggestDelay : 100, // milliseconds, (OBSOLETE)
checkNewValDelay : 100, // milliseconds
typeAhead : true, // will fill the inputElement on highlight
classes : {}, // see below for default classes
maxHeight : 200, // pixels
minWidth : 200, // pixels
offsetX : 0, // pixels
strict : false, // will complain on illegal values
blankOK : true, // if strict, will also accept blanks
colorIllegal : "red", // background color when illegal values
scrollCount : 5,
multivalued : false,
multivalue_separator : /[;,\s]\s*/,
choiceItemTagName: "div",
htmlWrapper : function(html) {return html;},
observed_scroll : null, // observe the scroll of a given element and
// move the dropdown accordingly (useful in
// case of scrolling windows)
additional_params: null, // additional parameters with optional default
// values (only in the case where the
src/autoCompleter.js view on Meta::CPAN
// PRIVATE METHODS
//----------------------------------------------------------------------
_updateChoicesFromAjax: function (val_to_complete, continuation) {
// copies into local variables, needed for closures below (can't rely on
// 'this' because 'this' may have changed when the ajax call comes back)
var autocompleter = this;
var inputElement = this.inputElement;
inputElement.style.backgroundColor = ""; // remove colorIllegal
// abort prev ajax request on this input element
if (this._runningAjax[inputElement.name])
this._runningAjax[inputElement.name].transport.abort();
Element.addClassName(inputElement, this.classes.loading);
// encode value to complete
val_to_complete = val_to_complete.split("").map(function (c) {
if (c.match(/[@\+\/]/)) {
src/autoCompleter.js view on Meta::CPAN
this._fireFinalStatus(this.inputElement, this.choices);
}
// if not enough chars to get valid choices, this is illegal
else if (value.length < this.options.minimumChars) {
var return_value = this.fireEvent({
type: "IllegalValue", value: value
}, this.inputElement);
if(! return_value) {
this.inputElement.style.backgroundColor = this.options.colorIllegal;
this._updateDependentFields(this.inputElement, null);
}
}
// otherwise get choices and then inspect status (maybe asynchronously)
else {
this._updateChoices(this._fireFinalStatus.bind(this,
this.inputElement));
}
}
src/autoCompleter.js view on Meta::CPAN
}
else {
var return_value = this.fireEvent({
type : "IllegalValue",
value : input_val,
controller : null
}, inputElement);
if(! return_value) {
inputElement.style.backgroundColor = this.options.colorIllegal;
this._updateDependentFields(inputElement, null);
}
}
},
_updateDependentFields: function(inputElement, choice) {
// "choice" might be
// - an object or nonempty string ==> update dependent fields
// - an empty string ==> clear dependent fields
// - null ==> put "ILLEGAL_***"
src/autoCompleter.js view on Meta::CPAN
// if, meanwhile, another keyDown occurred, then abort
if (this._timeLastKeyDown > this._timeLastCheck) {
// if (window.console)
// console.log('after updateChoices .. abort because of keyDown',
// now, this._timeLastKeyDown);
return;
}
this.choices = choices;
if (choices && choices.length > 0) {
this.inputElement.style.backgroundColor = ""; // remove colorIllegal
if (this.options.autoSuggest)
this._displayChoices();
}
else if (this.options.strict && (!this.options.blankOK)) {
this.inputElement.style.backgroundColor = this.options.colorIllegal;
}
};
// now call updateChoices (which then will call the continuation)
this._updateChoices(continuation.bind(this));
}
},
// return the value to be completed
src/treeNavigator.js view on Meta::CPAN
//-----------------------------------------------------
// Constructor
//-----------------------------------------------------
GvaScript.TreeNavigator = function(elem, options) {
// fix bug of background images on dynamic divs in MSIE 6.0, see URLs
// http://www.bazon.net/mishoo/articles.epl?art_id=958
// http://misterpixel.blogspot.com/2006/09/forensic-analysis-of-ie6.html
try { document.execCommand("BackgroundImageCache",false,true); }
catch(e) {};
elem = $(elem); // in case we got an id instead of an element
options = options || {};
// default options
var defaultOptions = {
test/functional/autoCompleter/dependent.html view on Meta::CPAN
<body>
<h1>Autocompleter with dependent fields</h1>
<p>Conveniently relate other inputs to the autocompleter</p>
<form>
Sandwich : <input name="main" class="AC_input" onfocus="ac.autocomplete(this)" />
Price : <input name="detail" size="4" disabled style="border: 1px solid #ddd;background-color: #eee"/>
<input type=submit value="place order" />
</form>
</body>
</html>
test/functional/form/effects.js view on Meta::CPAN
Effect.Highlight = Class.create(Effect.Base, {
initialize: function(element) {
this.element = $(element);
if (!this.element) throw(Effect._elementDoesNotExistError);
var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || { });
this.start(options);
},
setup: function() {
// Prevent executing on elements not in the layout flow
if (this.element.getStyle('display')=='none') { this.cancel(); return; }
// Disable background image during the effect
this.oldStyle = { };
if (!this.options.keepBackgroundImage) {
this.oldStyle.backgroundImage = this.element.getStyle('background-image');
this.element.setStyle({backgroundImage: 'none'});
}
if (!this.options.endcolor)
this.options.endcolor = this.element.getStyle('background-color').parseColor('#ffffff');
if (!this.options.restorecolor)
this.options.restorecolor = this.element.getStyle('background-color');
// init color calculations
this._base = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16) }.bind(this));
this._delta = $R(0,2).map(function(i){ return parseInt(this.options.endcolor.slice(i*2+1,i*2+3),16)-this._base[i] }.bind(this));
},
update: function(position) {
this.element.setStyle({backgroundColor: $R(0,2).inject('#',function(m,v,i){
return m+((this._base[i]+(this._delta[i]*position)).round().toColorPart()); }.bind(this)) });
},
finish: function() {
this.element.setStyle(Object.extend(this.oldStyle, {
backgroundColor: this.options.restorecolor
}));
}
});
Effect.ScrollTo = function(element) {
var options = arguments[1] || { },
scrollOffsets = document.viewport.getScrollOffsets(),
elementOffsets = $(element).cumulativeOffset(),
max = (window.height || document.body.scrollHeight) - document.viewport.getHeight();
test/functional/form/effects.js view on Meta::CPAN
var ids = track.get('ids'), effect = track.get('effect'), options = track.get('options');
var elements = [$(ids) || $$(ids)].flatten();
return elements.map(function(e){ return new effect(e, Object.extend({ sync:true }, options)) });
}).flatten(),
this.options
);
}
});
Element.CSS_PROPERTIES = $w(
'backgroundColor backgroundPosition borderBottomColor borderBottomStyle ' +
'borderBottomWidth borderLeftColor borderLeftStyle borderLeftWidth ' +
'borderRightColor borderRightStyle borderRightWidth borderSpacing ' +
'borderTopColor borderTopStyle borderTopWidth bottom clip color ' +
'fontSize fontWeight height left letterSpacing lineHeight ' +
'marginBottom marginLeft marginRight marginTop markerOffset maxHeight '+
'maxWidth minHeight minWidth opacity outlineColor outlineOffset ' +
'outlineWidth paddingBottom paddingLeft paddingRight paddingTop ' +
'right textIndent top width wordSpacing zIndex');
Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/;
test/functional/form/form.gvascript.css view on Meta::CPAN
.clearfix {zoom: 1;}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.message {float:right;padding:4px;}
.message-info {background-color: #EFFFF1;border:1px solid green;}
.message-error {background-color: pink;border: 1px solid red;}
span.counter {
float: left;
background-color: #ddd;
border-right: 1px dashed #aaa;
color: #aaa;
height: 100%;
margin-right: 5px;
padding: 0 2px;
font-weight: bold;
}
form {width:800px;border:1px solid #aaa;padding:4px;margin:0 auto;background-color:#f5f5f5;}
form.form-edited {border-color:green;}
form.form-error {border-color:red;}
div.header, div.authors {
float:left; width:50%;
}
label {
display: block;
padding: 2px;
color: #aaa;
test/functional/form/form.gvascript.css view on Meta::CPAN
border: 1px solid #ddd;
padding: 2px;
}
textarea {
width: 350px;
height: 50px;
overflow: auto;
}
div.header {}
div.author {height:170px;background-color:#eee;margin:2px 0;}
.hover {border-color: #a0a;}
.focus {background-color: cornsilk;}
.validation-failed {background-color:pink;border-color:red;}
.validation-advice {display:inline; font: italic 8pt 'courier new';color: red;margin-left:3px;}
test/functional/keyMap/basic.html view on Meta::CPAN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="../../test.css" rel="stylesheet" type="text/css">
<link href="../../images/GvaScript.css" rel="stylesheet" type="text/css">
<script src="../../../lib/Alien/GvaScript/lib/prototype.js"></script>
<script src="../../../lib/Alien/GvaScript/lib/GvaScript.js"></script>
<style type="text/css">
#current_cell {background-color: blue; color: yellow;}
tt {font-size:1.2em;background-color:#eee;}
table {border-width: 2px;}
td {width: 20px; text-align: center;}
td.rborder {border-right: 2px solid black;}
tr.bborder td {border-bottom: 2px solid black;}
</style>
<script>
function Red(event) {
$('current_cell').style.backgroundColor="red";
Event.stop(event);
}
function Up() {
var cell = $('current_cell');
var colIndex = cell.cellIndex;
var row = cell.parentNode;
if (row.rowIndex > 0) {
cell.id = null;
row.parentNode.rows[row.rowIndex - 1].cells[colIndex].id = "current_cell";
test/functional/keyMap/basic.html view on Meta::CPAN
function push_ignore_all() {
keymap.rules.push(GvaScript.KeyMap.MapAllKeys(function () {}));
}
function push_navigate_divs() {
var cur_div = 3;
var tmp_rules = {
UP : function () {
if (cur_div > 1) {
document.getElementById("d" + cur_div).style.background = "";
cur_div -= 1;
document.getElementById("d" + cur_div).style.background = "yellow";
}
},
DOWN : function () {
if (cur_div < 4) {
document.getElementById("d" + cur_div).style.background = "";
cur_div += 1;
document.getElementById("d" + cur_div).style.background = "yellow";
}
},
REGEX: [[null, '.*', function () {}]]
}
keymap.rules.push(tmp_rules);
}
function log_rules() {
$A(keymap.rules).each(function(r, i) {
test/functional/treeNavigator/dropdownMenu.html view on Meta::CPAN
<head>
<link href="../../test.css" rel="stylesheet" type="text/css">
<link href="../../images/GvaScript.css" rel="stylesheet" type="text/css">
<script src="../../../lib/Alien/GvaScript/lib/prototype.js"></script>
<script src="../../../lib/Alien/GvaScript/lib/GvaScript.js"></script>
<style>
#menu {
display: none;
position: absolute;
border: 1px solid blue;
background-color: white;
padding: 4px;
}
/* icons on the right for dropdown menus */
.TN_node .TN_label {
background-image: url(special_icons/navopen.gif);
background-repeat: no-repeat;
background-position: center right;
padding-right: 20px;
}
.TN_closed .TN_label {
background-image: url(special_icons/navclose.gif);
}
.TN_leaf .TN_label {
background-image: none;
}
</style>
<script>
var treeNav; // GvaScript.TreeNavigator associated with the menu
var treeNav_rules; // keymap rules of that object
var textboxKeymap; // keymap associated with the input textbox
var menuVisible = false;
function showMenu(event) {
if (menuVisible) return;
test/functional/treeNavigator/dropdownMenu.html view on Meta::CPAN
if (!treeNav) { // if first time here, instantiate GvaScript.TreeNavigator
treeNav = new GvaScript.TreeNavigator('menu', {
treeTabIndex : -1,
tabIndex : -1, // no tabbing
createButtons : false, // no +/- buttons
keymap : textboxKeymap // reuse keymap from textbox
});
}
else // else reuse rules popped from last hideMenu()
textboxKeymap.rules.push(treeNav_rules);
textbox.style.backgroundImage = "url(special_icons/navopen.gif)";
if (event) Event.stop(event);
}
function hideMenu(event) {
if (!menuVisible) return;
menuVisible = false;
$('menu').style.display = "none";
treeNav_rules = textboxKeymap.rules.pop();
$('textbox').style.backgroundImage = "url(special_icons/navclose.gif)";
if (event) Event.stop(event);
}
function selectEntry(event) {
var node = Event.element(event);
if (treeNav.isLeaf(node)) {
$('textbox').value = node.getAttribute("value");
hideMenu();
}
test/functional/treeNavigator/dropdownMenu.html view on Meta::CPAN
// bind event handlers to the textbox
textboxKeymap = new GvaScript.KeyMap({DOWN:showMenu,
ESCAPE: hideMenu});
textboxKeymap.observe('keydown', textbox, {preventDefault:false,
stopPropagation:false});
Event.observe(textbox, "click", maybeToggleMenu);
Event.observe(textbox, "blur", maybeBackFocus);
with (textbox.style) {
backgroundImage = "url(special_icons/navclose.gif)";
backgroundRepeat = "no-repeat";
backgroundPosition = "center right";
}
textbox.focus();
}
document.observe('dom:loaded', setup);
</script>
</head>
test/functional/treeNavigator/form.html view on Meta::CPAN
RETURN: function(event) {
var elem_type = Event.element(event).type;
if (/^(text|checkbox|radio|select)$/.test(elem_type))
Event.stop(event);
}
});
});
</script>
<style>
.TN_node { padding: 8px 2px; background-color: #ddd; border-bottom: 1px solid #aaa;}
.TN_label { font-weight: 700; font-size: 1.2em;}
.TN_content { background-color: #eee; padding: 0.5em; margin-top: 5px; }
</style>
</head>
<body>
<h1>Form Tree Navigator</h1>
<em>Form fields within a tree navigator: TAB navigation passes
smoothly from form fields to node labels and automatically opens
test/images/GvaScript.css view on Meta::CPAN
/* AUTOCOMPLETER */
.AC_input { background: #fff url(search-small.png) no-repeat right center; }
.AC_loading { background-image: url(ajax_loading_small.gif); }
.AC_highlight { background-color: #183E6C; color: #ecf2ff; }
.AC_dropdown {
position: absolute;
background-color:#ecf2ff;
border: 1px solid #183E6C;
padding: 3px;
color: #183E6C;
overflow-y: auto;
cursor: default;
}
.AC_message {
width: auto;
background-color: #ff9;
padding : 4px;
color: black;
border: 1px black solid;
}
/* TREE NAVIGATOR */
.TN_node { display : block; }
.TN_label { cursor: pointer; } /* labels are clickable */
.TN_selected { background-color: yellow; } /* how to highlight the current selected node */
.TN_content { display : block; margin: 0; margin-left: 15px; } /* node content is 15px more on the right than the node itself */
.TN_mouse { text-decoration: underline; } /* class to implement pseudo-hover on node labels */
/* buttons in front of each node label */
.TN_button {
background: transparent url(tn_sprite.png) no-repeat 0 -9px;
float:left;
width:9px;
height:9px;
margin:1px;margin-left:0;
padding-right:2px;
cursor:pointer;
clear:left;
}
/* when a node is closed, the button icon becomes a 'plus', and
the content is hidden */
.TN_closed .TN_button {background-position: 0 0;}
.TN_closed .TN_content { display : none; }
.TN_leaf .TN_button {background-position: 0 -18px;} /* leaf nodes have a single icon 'dot' */
/* showall : the content of closed nodes is nevertheless visible
(useful for printing) */
.TN_showall .TN_closed .TN_content { display: block; }
.TN_showall { border-left: 5px dotted gray; }
/* CHOICE LIST */
.CL_highlight, .hilite td { background-color: #183E6C !important; color: #ecf2ff !important; }
/* CUSTOM BUTTONS */
.flash {background-color:red !important;}
.flash .btn {color:red !important}
.gva-actionsbar {background-color:#E8E8E8;border:1px solid #8c8c8c;border-width:1px 0px;height:25px;padding:4px 0 1px;}
.gva-btn-container {display:inline;}
.gva-btn-container .btn {margin:0 3px;font-size:12px;cursor:pointer;}
.gva-btn-container .btn {
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
background:none;
border:none;
cursor:pointer;
padding:1px 2px;
color:#000;
background-color:transparent !important;
}
.gva-btn-container .btn {float:left;}
.gva-btn-container.btn-focus .btn {color:#aa0000;}
.gva-btn-container span {display:block;float:left;height:21px;}
.gva-btn-container span.left {background:transparent url(btn_sprite.gif) no-repeat scroll 0 0;padding:0 1px 0 2px;margin-left:4px;}
.gva-btn-container span.center {background:transparent url(btn_sprite.gif) repeat-x scroll 0 -42px;padding:0 2px}
.gva-btn-container span.right {background:transparent url(btn_sprite.gif) no-repeat scroll 0 -21px;padding:0 1px 0 2px;}
.gva-btn-container.btn-hover span.left {background-position:0 -63px;}
.gva-btn-container.btn-hover span.center {background-position:0 -105px;}
.gva-btn-container.btn-hover span.right {background-position:0 -84px;}
.gva-btn-container.btn-focus span.left {background-position:0 -63px;}
.gva-btn-container.btn-focus span.center {background-position:0 -126px;}
.gva-btn-container.btn-focus span.right {background-position:0 -84px;}
/* GRID */
table {padding:0;margin: 0;border-collapse:collapse;}
#grid_container {border: 1px solid #a3bad9; }
.gva-loading {
background:url(ajax_loading.gif) no-repeat center center;
position:absolute;
width:30px;height:30px;
top:50%;left:50%;
}
/* grid toolbar */
.gva-grid-toolbar {
background:#C5CCE8 url(glass-bg.gif) repeat-x scroll left top;
border:1px solid #A3BAD9;
width: 100%;
height:28px;
}
.gva-grid-actionsbar {float:left;margin-top:4px;}
.gva-paginatorbar {float:right;width:250px;margin-top:7px;}
.gva-paginatorbar div {width:16px;height:16px;cursor:pointer;float:right;}
.gva-paginatorbar div.first {background-position: center -48px;}
.gva-paginatorbar div.last {background-position: center -32px;}
.gva-paginatorbar div.back {background-position: center 0;}
.gva-paginatorbar div.forward {background-position: center -16px;}
.gva-paginatorbar div {width:16px;height:16px;cursor:pointer;float:right;background:url(paginator-sprite.png) no-repeat}
.gva-paginatorbar div.inactive {cursor:default;opacity:0.25;filter:alpha(opacity=25);}
.gva-paginatorbar div.text {text-align:center;width:140px;color:#4b34c5;font-size:10pt;}
.gva-paginatorbar span.gva-btn-container {display:block;margin-right:4px;}
/* grid table */
.gva-grid {width:100%;font-size:12px}
.gva-grid th.grid-header {
text-align:center;
padding:2px;
color: navy;
background-color: #D0D6ED;
border:1px solid #6F82A5;
}
.gva-grid td {color: navy;}
.gva-grid .grid-marker {
width:15px;
background-color: #D0D6ED;
border:1px solid #6F82A5;
}
.gva-grid tr.liste_highlight td.grid-marker {
background: #D0D6ED url(selector.gif) no-repeat center center;
}
.gva-grid tr.liste_highlight td.grid-cell {background-color: #6F82A5 !important;color:#f5f5f5 !important;}
.gva-grid td.grid-cell {padding:3px !important;border:1px solid #e8e8e8;}
.gva-grid td.grid-cell.index_1 {background-color:#EFEFEF;}
.gva-grid td.grid-cell.center {text-align:center;float:none;}
.gva-grid td.grid-cell.right {text-align:right;float:none;}
.gva-grid td.grid-cell.red {color:#a00;}
/* FORM REPEAT */
.icon-add {
display:inline-table;
width:16px;
height:16px;
cursor:pointer;
background: transparent url(add.png) no-repeat left center;
}
.icon-delete {
display:inline-table;
float: right;
width:16px;
height:16px;
cursor:pointer;
background: transparent url(delete.png) no-repeat left center;
}
test/test.css view on Meta::CPAN
html { font-size: 100%; height: 100%;}
body { font: 0.8em Verdana,Arial,Helvetica,sans-serif; background-color: #f5f5f5; color: #333; }
h1 {color: #4e5b82; letter-spacing: 2px; font-variant: small-caps;}
h2 {color: #a00;}
h3 {color: navy;}
em {color: #aaa;}
sup {color: #a00;}
tt {background-color: #eee; border: 1px solid #ddd; white-space: pre; font-size: 10pt;}
input, textarea {border: 1px solid #ddd;}
/* navigation menu */
.navigation { background: #4E5B82; color: #f5f5f5; position:relative; height: 98%; }
.navigation h1 { font-size: 20px; color: #ffffcc; }
.navigation a { color: #ffc; }
.navigation ul li a { color: #e8a400; }
.navigation h2 {
font-size: 16px;
font-weight: normal;
margin: 0;
border: 1px solid #a00;
border-bottom: 0;
background: #ffc;
color: #a00;
padding: 8px;
padding-bottom: 0;
}
.navigation ul {
margin-top: 0;
border: 1px solid #8F248E;
border-top: none;
background: #ffc;
padding: 8px;
margin-left: 0;
list-style-position: inside;
list-style-type: circle;
}
.navigation ul li {
font-size: 12px;
margin-top: 1px;
margin-bottom: 1px;
color: #555;
}
.navigation p#version strong {color: #fff;}
.navigation .footnote {background-color: #4e5b82; margin-top: 15px; font-size: 8pt; border-top: 1px solid; position: absolute; bottom: 0;}
.navigation .footnote * {color:#f5f5f5;}
.navigation .footnote tt {background-color: transparent; border: none; font-size: 8pt;}
/* LOG BLOCK */
#logs {
height:100px;
padding: 0.3em;
margin: 0.2em 0 2em;
background-color: #E0EFE2;
overflow-y:auto;
border:1px solid green;
font:8pt 'courier new';
}
#logs .msg { border-bottom: 1px solid #c3dfc7; }
#logs .msg em { color: #a8cfad; }
#logs .msg strong { color: #f5f5f5; font-weight: bold; background-color:green;}
#logsummary { margin-bottom: 1em; padding: 1ex; border: 1px solid #000; font-weight: bold; }
#logtable { width:100%; border-collapse: collapse; border: 1px dotted #666; }
#logtable td, #logtable th { text-align: left; padding: 3px 8px; border: 1px dotted #666; }
#logtable .passed { background-color: #cfc; }
#logtable .failed, #logtable .error { background-color: #fcc; }
#logtable .nameCell { cursor: pointer; }
( run in 2.350 seconds using v1.01-cache-2.11-cpan-f56aa216473 )