Как отобразить Div на полях ввода в JQuery - PullRequest
Новая
       24

Как отобразить Div на полях ввода в JQuery

0 голосов
/ 26 апреля 2011

Я делаю форму JQuery.Где мне нужно отобразить div только в тех полях ввода, где я нажимаю.(как всплывающая подсказка .. но не совсем) ... да .. Вы можете назвать это как datepicker ...

Спасибо ---- обновлено Javascript: 

 <script>
        $(document).ready(function() {

            $('#months :input').click(function(){
                xpos = $(this).css('left');
                ypos = $(this).css('top');
                var dateField = $(this);

                $('#calender').addClass('calender_visible');
                var m = $('#calender .picker_month :selected').val();
                var y = $('#calender .picker_year :selected').val();


                $('#calender :button').click(function(){
                    dateField.val(m+'/'+y);
                    $('#calender').removeClass('calender_visible');

                })

            })

        });

        </script>

CSS: 

<style>
    .calender_hidden{
        display:none;
    }

.calender_visible{
    display:block;
    position:relative;
background-color:#CCCCCC;
width:120px;

    height:50px;
  }
</style>

HTML: 

    <input name="month2"  />

    <input name="month3"  />

    <input name="month4"  />

    <input name="month5"  />
    </div>




    <div id="calender" class="calender_hidden" > 

    <select  class="picker_month">
        <option value="Jan">Jan</option>
        <option value="Feb">Feb</option>
        <option value="Mar">Mar</option>
        <option value="Apr">Apr</option>
    </select>

    <select  class="picker_year">
        <option value="2001">2001</option>
        <option value="2002">2002</option>
        <option value="2003">2003</option>
        <option value="2004">2004</option>
    </select>
    <input type="button" value="close" />
    </div>

Теперь вопрос ... я хочу отобразитьэтот небольшой календарь только в выбранном мной элементе div ... но он не отображается под объектом, который я щелкнул ... как я перемещаюсь каждый раз, когда нажимаю на поля ввода.

Ответы [ 3 ]

0 голосов
/ 26 апреля 2011

Не уверен, пытаетесь ли вы захватить щелчок для ввода, такого как кнопка, или фокус для ввода, такого как ввод текста.В любом случае захват события в jQuery прост: 

//capture click event
$('input#id').click(function() {
       $('div#id').show();
}
//capture focus event (such as clicking in a text input field)
$('input#id').focus(function() {
       $('div#id').show();
}

Надеюсь, это поможет

0 голосов
/ 26 апреля 2011

вы должны взглянуть на jQuery UI там есть диалог (), который, вероятно, так же близок, как вы собираетесь, пока не всплывет подсказка

0 голосов
/ 26 апреля 2011

Если вы хотите использовать средство выбора даты, вы можете использовать его в пользовательском интерфейсе jquery

http://jqueryui.com/demos/datepicker/

...