Düzenlenebilir Açılır?

2 Cevap javascript

Ben 4 metin kutuları ile bir php sayfası var, her metin kutuları odağı olduğunda bir "açılır" gerekir. Seçeneklerini tıklayarak (düzenlenebilir) metin kutusu (es) doldurmak ve açılır kapatmak istiyorsunuz. Metin kutuları tabii html formlarının parçasıdır. Javascript veya ajax az kod kullanarak ben bu satır içi nasıl yapabilirim?

2 Cevap

Eğer aradığınız sürece bir web sunucusu ajax burada işe yaramaz.

Bu girişi kutusunun altında olduğundan, bir div var veya oluşturmak gerekir, ve mutlak konumlandırma uygun şekilde giriş kutusuna göreli yerleştirilir sağlamak yararlı olacaktır.

Sen sadece bir işlevi olmalıdır, bu yüzden dolayısıyla, mutlak konumlandırma için neden giriş alanlarına uyarlanabilir olmalıdır.

Siz tuşa basma izlemek ve bu div olayları mouseclick ve sadece tek bir anda açık olmasını sağlamak istiyoruz, bu nedenle kullanıcı başka bir yerde tıkladığında ise div kapatır böylece bir onblur olacak.

Eğer jquery kullanmak ise size son derece kolaylıkla yapabilirsiniz.

sizin beğeninize bu çimdik olabilir:

<html>
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>

<script language='javascript'>
$(document).ready(function(){
    $("input[type='text']").focus(function(){
        $(this).parent().find('select').show();
    });

    $('select').change(function(){
        $(this).parent().find('input[type="text"]').val($(this).val());
        $(this).hide();
    }).blur(function(){
        $(this).hide();
    });
});
</script>

<form>

<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
    <option value=''>----</option>
    <option value='1'>opt1</option>
    <option value='2'>opt2</option>
    <option value='3'>opt3</option>
</select><br/>
</fieldset>

<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
    <option value=''>----</option>
    <option value='1'>opt1</option>
    <option value='2'>opt2</option>
    <option value='3'>opt3</option>
</select><br/>
</fieldset>

<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
    <option value=''>----</option>
    <option value='1'>opt1</option>
    <option value='2'>opt2</option>
    <option value='3'>opt3</option>
</select><br/>
</fieldset>

<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
    <option value=''>----</option>
    <option value='1'>opt1</option>
    <option value='2'>opt2</option>
    <option value='3'>opt3</option>
</select><br/>
</fieldset>
</form>

</html>

Lütfen seçenekleri seçin dinamik olması gerekiyorsa, ajax jquery ile çok basittir. Zaten orada olacak biliyorsanız, php gizli seçme kutularını doldurmak, ve odak olay onlara gösterecektir.

etiketler