Author: admitriev Date: 2008-03-06 06:52:44 -0500 (Thu, 06 Mar 2008) New Revision: 6588 Modified: management/design/inplaceInput/design/inplaceInput.html Log: Modified: management/design/inplaceInput/design/inplaceInput.html =================================================================== --- management/design/inplaceInput/design/inplaceInput.html 2008-03-06 11:02:42 UTC (rev 6587) +++ management/design/inplaceInput/design/inplaceInput.html 2008-03-06 11:52:44 UTC (rev 6588) @@ -8,6 +8,8 @@ body{padding : 30px;} fieldset{padding : 30px; border : 1px solid #c0c0c0;} legend{font-weight : bold} +.tab_example {width : 700px; border-top:1px solid #c0c0c0; border-left:1px solid #c0c0c0;} +.tab_example td{width : 350px; border-bottom:1px solid #c0c0c0; border-right:1px solid #c0c0c0;} @@ -19,6 +21,21 @@ .is_edit_state{position : relative; width : 100px;} .is_field{background : #FBFF8E/*editBackgroundColor*/; padding : 0px 0px 0px 0px; border : 0px; margin : 0px; width : 100px; position : absolute; top:0px; left : 0px;} .is_strut{width : 100px; height : 1px} + + +.is_view_block{position : relative; width : 100%;; padding : 0px 0px 0px 0px; border : 0px; margin : 0px;} +.is_edit_state_block{background : #FBFF8E/*editBackgroundColor*/; position : relative; width : 100%;; padding : 0px 0px 0px 0px; border : 0px; margin : 0px;} +.is_field_block{background : #FBFF8E/*editBackgroundColor*/; padding : 0px 0px 0px 0px; border : 0px; margin : 0px; width : 100%;} + + + +.is_edit_state_block_div{position : relative;} +.is_view_block_div{position : relative; padding : 2px 2px 2px 5px; border : 0px; margin :0px;} +.is_edit_block_div{background : #FBFF8E/*editBackgroundColor*/; position : relative; padding : 0px; border : 0px; margin : 2px 2px 2px 5px;} +.is_field_block_div{background : #FBFF8E/*editBackgroundColor*/;padding :0px; border : 0px; margin : 0px 0px 0px 0px; width : 344px;} +.is_edit_block_bg_div{ position : absolute; top:0px; left : 0px; background : #FBFF8E/*editBackgroundColor*/; width : 349px; height : 17px; text-align : right} + + .is_btn{ background : url(images/bg_btn.png) top repeat-x #C7D7EC; /*gradient - from generalBackgroundColor to tabBackgroundColor, background-color - tabBackgroundColor*/ border : 1px outset #BED6F8; /*panelBorderColor*/ @@ -29,6 +46,8 @@ border : 1px inset #BED6F8; /*panelBorderColor*/ padding : 0px; margin : 0px;} +.is_btn_set_block{ position : absolute; top:-12px; right : 0px; white-space : nowrap} + .is_btn_set{ position : absolute; top:0px; left : 100px; white-space : nowrap} .is_btn_set_tl{ position : absolute; bottom:11px /*generalSizeFont*/; left : 0px; white-space : nowrap} @@ -41,10 +60,10 @@ .is_shadow{ top:0; left:0; position : absolute;} .is_shadow_size{ width : 34px; height : 16px;} -.is_shadow_tl{ background : url(images/bg_shadow.png) repeat-x top left;} -.is_shadow_tr{ background : url(images/bg_shadow.png) repeat-x top right;} -.is_shadow_bl{ background : url(images/bg_shadow.png) repeat-x bottom left;} -.is_shadow_br{ background : url(images/bg_shadow.png) repeat-x bottom right;} +.is_shadow_tl{ background : url(images/bg_shadow.png) repeat-x top left; border : 0px !important} +.is_shadow_tr{ background : url(images/bg_shadow.png) repeat-x top right; border : 0px !important} +.is_shadow_bl{ background : url(images/bg_shadow.png) repeat-x bottom left; border : 0px !important} +.is_shadow_br{ background : url(images/bg_shadow.png) repeat-x bottom right; border : 0px !important} </style> </head> @@ -61,7 +80,7 @@ -<fieldset><legend>Edit State</legend><br><br> +<fieldset><legend>Edit State (inline)</legend><br><br> <div style="width : 300px;"> Fresh off his victory in the Florida primary, Sen. John McCain is poised to take another big prize. Former <span class="is_edit_state"> @@ -105,5 +124,117 @@ </fieldset> +<fieldset><legend>Edit State (block variant 1)</legend><br><br> +<Table class="tab_example" border="0" cellpadding="0" cellspacing="0"> + <tr> + <td> + <input type="Text" class="is_view_block" readonly="readonly" value="View mode"> + </td> + <td> + <input type="Text" class="is_view_block" readonly="readonly" value="View mode"> + </td> + </tr> + <tr> + <td> + <div class="is_edit_state_block"> + <input type="Text" value="Edit mode" class="is_field_block"><div class="is_btn_set_block"> + <div class="is_shadow"> + <table cellpadding="0" cellspacing="0" border="0" class="is_shadow_size"> + <tr> + <td class="is_shadow_tl"> + <img src="images/spacer.gif" width="10" height="1" alt="" border="0"><br> + </td> + <td class="is_shadow_tr"> + <img src="images/spacer.gif" width="1" height="10" alt="" border="0"><br> + </td> + </tr> + <tr> + <td class="is_shadow_bl"> + <img src="images/spacer.gif" width="1" height="10" alt="" border="0"><br> + </td> + <td class="is_shadow_br"> + <img src="images/spacer.gif" width="10" height="1" alt="" border="0"><br> + </td> + </tr> + </table> + </div> + <div style="position : relative"> + <input type="image" src="images/ico_ok.gif" class="is_btn" onmousedown="this.className='is_btn_press'" onmouseout="this.className='is_btn'" onmouseup="this.className='is_btn'"><input type="image" src="images/ico_cancel.gif" class="is_btn" onmousedown="this.className='is_btn_press'" onmouseout="this.className='is_btn'" onmouseup="this.className='is_btn'"> + </div> + </div> + </div> + </td> + <td> + <input type="Text" class="is_view_block" readonly="readonly" value="View mode"> + </td> + </tr> + <tr> + <td> + <input type="Text" class="is_view_block" readonly="readonly" value="View mode"> + </td> + <td> + <input type="Text" class="is_view_block is_changed_state" readonly="readonly" value="View mode"> + </td> + </tr> +</table> +</fieldset> + + +<fieldset><legend>Edit State (variant 2)</legend><br><br> +<Table class="tab_example" border="0" cellpadding="0" cellspacing="0"> + <tr> + <td> + <div class="is_view_block_div">View mode</div> + </td> + <td> + <div class="is_view_block_div">View mode</div> + </td> + </tr> + <tr> + <td> + <div class="is_edit_state_block_div" style="background : green"> + <div class="is_view_block_div">View mode</div><div class="is_edit_block_bg_div"><input type="Text" value="Edit mode" class="is_field_block_div"></div><div class="is_btn_set_block"> + <div class="is_shadow"> + <table cellpadding="0" cellspacing="0" border="0" class="is_shadow_size"> + <tr> + <td class="is_shadow_tl"> + <img src="images/spacer.gif" width="10" height="1" alt="" border="0"><br> + </td> + <td class="is_shadow_tr"> + <img src="images/spacer.gif" width="1" height="10" alt="" border="0"><br> + </td> + </tr> + <tr> + <td class="is_shadow_bl"> + <img src="images/spacer.gif" width="1" height="10" alt="" border="0"><br> + </td> + <td class="is_shadow_br"> + <img src="images/spacer.gif" width="10" height="1" alt="" border="0"><br> + </td> + </tr> + </table> + </div> + <div style="position : relative"> + <input type="image" src="images/ico_ok.gif" class="is_btn" onmousedown="this.className='is_btn_press'" onmouseout="this.className='is_btn'" onmouseup="this.className='is_btn'"><input type="image" src="images/ico_cancel.gif" class="is_btn" onmousedown="this.className='is_btn_press'" onmouseout="this.className='is_btn'" onmouseup="this.className='is_btn'"> + </div> + </div> + </div> + </td> + <td> + <div class="is_view_block_div">View mode</div> + </td> + </tr> + <tr> + <td> + <div class="is_view_block_div">View mode</div> + </td> + <td> + <div class="is_view_block_div">View mode</div> + </td> + </tr> +</table> +</fieldset> + + </body> </html>