Добавить div над текстовым полем без изменения позиции текстового поля - PullRequest
Новая
       31

Добавить div над текстовым полем без изменения позиции текстового поля

4 голосов
/ 20 июля 2009

Мне нужно добавить некоторое содержимое HTML (изображения, метки и т. Д.) Над ячейкой таблицы, содержащей текстовое поле. На странице должно быть не менее 10 строк с 8 столбцами в каждой строке. Все 8 столбцов содержат текстовое поле.

Я уже собрал несколько jQuery, которые будут показывать и скрывать эту новую область содержимого над ячейкой таблицы, но CSS неверен, и поля ввода сдвигаются вниз ... Область содержимого, на которую я ссылаюсь to - это DIV, добавляемый плагином jQuery с классом inputbanner.

CSS 

.inputbanner
{
    background-color: Orange;
    position: absolute;
    top: -20px;
    display: none;
}

HTML 

<tr>
    <td class="itemdescr">
        SWR: 1123 My Biggest Project
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox" />
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
</tr>
<script language="javascript">
    $().ready(function() {
        $('.timebox').inputmenu();
    });
</script>

Функция jQuery 

(function($) {
    $.fn.inputmenu = function() {
        function createInputMenu(node) {
            $(node).bind('focus', function() {
                $(this).parent().toggleClass('highlight');
                $(this).prev('div.inputbanner').toggle();
            });
            $(node).bind('blur', function() {
                $(this).parent().toggleClass('highlight');
                $(this).prev('div.inputbanner').toggle();
            });
            $(node).parent().prepend('<div class="inputbanner"><img src="../../Content/Images/arrow_left_active.gif" />&nbsp<img src="../../Content/Images/arrow_left_inactive.gif" /></div>');
        }
        return this.each(function() {
            createInputMenu(this);
        });
    }
})(jQuery);

1 Ответ

2 голосов
/ 20 июля 2009
...