+ added task input placeholder

This commit is contained in:
Max Pozdeev 2010-09-09 11:41:39 +04:00
parent 135a2e4c46
commit 35bb0dba07
3 changed files with 10 additions and 1 deletions

View file

@ -128,6 +128,10 @@ var mytinytodo = window.mytinytodo = _mtt = {
if(event.keyCode == 27) {
$(this).val('');
}
}).focusin(function(){
$('#task_placeholder').removeClass('placeholding');
}).focusout(function(){
if('' == $(this).val()) $('#task_placeholder').addClass('placeholding');
});

View file

@ -106,7 +106,10 @@ $().ready(function(){
<table class="mtt-taskbox"><tr><td class="mtt-tb-cell">
<div class="mtt-tb-c">
<form id="newtask_form" method="post">
<input type="text" name="task" value="" maxlength="250" id="task" autocomplete="off" />
<label id="task_placeholder" class="placeholding" for="task">
<input type="text" name="task" value="" maxlength="250" id="task" autocomplete="off" />
<span><?php _e('htab_newtask');?></span>
</label>
<div id="newtask_submit" class="mtt-taskbox-icon mtt-icon-submittask" title="<?php _e('btn_add');?>"></div>
</form>
</div>

View file

@ -107,6 +107,8 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
.mtt-taskbox td.mtt-tb-cell { padding:0px; width:350px; }
.mtt-tb-c { position:relative; padding-left:22px; /*input padding+border*/ }
#task { color:#444444; background:#fff; height:1.35em; padding:2px; padding-right:18px; border:1px inset #F0F0F0; width:100%; margin-left:-22px; }
#task_placeholder span { display:none; color:#ccc; position:absolute; left:0; top:0; height:1.35em; line-height:1.35em; padding:3px; /*input top and left padding+border*/ }
#task_placeholder.placeholding span { display:inline-block; }
.mtt-taskbox-icon { width:16px; height:16px; position:absolute; top:50%; margin-top:-8px; }
.mtt-taskbox-icon.mtt-icon-submittask { background:url(images/mzl.png) 0px -32px no-repeat; right:4px; }