jQuery: bir textarea "dolgu" göstermek için bir ilerleme çubuğu

Çoğu zaman sorunları çözmek beklenenden daha en zor kanıtlamak ve bu genellikle yarım gün iş extricating zaten karşı karşıya olan biri için umutsuz, az ya da çok ortodoks ve ateşli görüşmeler web siteleri yeniden kaybetmek olmasıdır kolay görünüyor sorun.

Bir proje ben birkaç dakika içinde giderildiğini düşündüğünüz bir textarea izin verilen karakter sayısını sınırlamak için ihtiyaç vardı, o kadar, ben net çeşitli çözüm bulunamadı ama sonuna kadar beni ikna edici, bu yüzden karar kullanarak bir şey özel uygulamak jQuery ve mükemmel jQueryUI paket progessbar özellikle bileşeni.

Gereken dosyaları geri kazanımı

Için Colleghiamoci http://jqueryui.com/ ve sağ üst kısmında renkli "indir özel Oluştur" a tıklayın.
Sonraki sayfada yararlı bileşenleri seçin ve sadece ProgressBar almaya karar mevcut widget biri.

Biz sağ tarafta açılan listeden grafik şablonu seçin ve "Download" butonuna tıklayın. İndirdiğiniz paketi açın ve üç klasör ve kök bir dosyayı bulmak:

• css klasöründe bizim durumumuzda, varsayılan tema içeren, ui-hafiflik
• geliştirme paket örnekler ve belgeleri içerir
• js:; jquery ve jquery-ui-1.4.4.min.js-1.8.9.custom.min.js çözüm çalıştırmak için gereken iki dosya içeren
• index.html: Bize temalı bir örnek / biz seçtiğiniz widget görmesini sağlayan bir sayfa

Aşağıdaki gibi bizim küçük Örneğin basit bir yapı oluşturur:

• jQueryUI için sıkıştırılmış klasör (jquery-ui-1.8.9.custom)
• textarea içeren dosya.html paketi
• jQuery kodu içeren file.js

Biz, HTML dosyası oluşturabilir anlamlı bir ad (biz mrw_jquery_txtcheck.html ararım) vermek ve gerekli kafa etiketi kapanımları eklemek: tema css dosyaları ve js jQuery ve jQueryUI bağlantısını.

 href = "jquery-ui-1.8.9.custom/css/ui-lightness/jquery-ui-1.8.9.custom.css" <link type="text/css" rel="stylesheet" />







 <script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js"> </ script>







 <script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js"> </ script>

Vücutta textarea ekleyin:

 



 <div> <textarea name="limitedOne" id="limitedOne" style='width:250px;height:100px;'> </ textarea> </ p>

 

Sonra ProgressBar ve aynı zamanda sayısal kaç karakter bir fikir vermek için bir yer tutucu içeren div yerleştirin.

 <div style="height: id="progress" 20px;"> </ p>







 Mevcut <p> id="charCounter"> 255 </ span> karakter. </ P>

Şimdi o aynı zamanda içeren kafa etiketinde, biz check_textarea.js çağıracağım gerekli işlevleri ile ayrı bir dosya JavaScript / jQuery için kod yazmaya devam edebilirsiniz.
Her şeyden önce temel değişkenleri tanımlamak; karakterlere izin ve mevcut olanlar başında aynı değere sahip:

 MAX_CHARS = 255;







 = MAX_CHARS Kalan;

Daha sonra kontroller ve ProgressBar ve karşı artırır işlevi tanımlayın:

 checkTextareaLength function () {





  



 current_length == tanımsız var = $ ("# limitedOne"). val (). uzunluk?

 



 0: $ ("# limitedOne") Val () Boy;..



  



 Kalan = (MAX_CHARS - current_length);



	

  



 if (kalan> 0) {

	

    



 $ ("# LimitedOne") ($("# LimitedOne değer ") Val () Alt dize (0, MAX_CHARS))...;



  



 Else {}



    



 $ ("# CharCounter") Html (Kalan).;



    



 var pv = Math.floor ((((MAX_CHARS-Kalan) / MAX_CHARS) * 100));



    



 . $ ('# İlerleme') Progressbar ('değer', bd);



  



 }







 }

Kod analiz edelim: checkTextareaLength ilk satırı işlevi val () jQuery kullanarak textarea geçerli değerini alır, sonra boy niteliği okuyarak girilen karakter sayısını.
Sonraki satırda fark için kullanılabilir karakter sayısını verir. Bu noktada 2 seçenek mevcut.

1. Değişken Kalan (bir kopyala / yapıştır sonra gibi) sıfır daha az blok textarea değerini alır ve yerel JavaScript alt kullanarak 255 karakter o sınırlar ise

 



 $ ("# LimitedOne") ($("# LimitedOne değer ") Val () Alt dize (0, MAX_CHARS))...;

 

2. Kalan sıfırdan büyükse, başka sol karakter sayısı ile gelişmiş ilk yayılma blok:

 



 $ ("# CharCounter") Html (Kalan).;

 

Sonra fonksiyon kullanılabilir karakter sayısı ve bu şu anda dahil, kütüphane işlevi tur en yakın sonuç Math.floor (aşağı) arasındaki oranı hesaplar:

 



 var pv = Math.floor ((((MAX_CHARS-Kalan) / MAX_CHARS) * 100));

 

Bu noktada sadece progressbar bulunan değer atayabilirsiniz

 



 . $ ('# İlerleme') Progressbar ('değer', bd);

 

DOM Hazır yürütülür kod yazalım.
Biz ProgressBar bağlamak başlatmak ve durdurmak istediğiniz olayları yürütmek: basma, mouseOut, değişim ve bulanıklık. Kullanıcı kopyala / yapıştır kullanması gereken olayı durdurmak için hepsini izleyin.
Işlev çağrısı yerel işlev setTimeout ile bir saniyenin birkaç hundredths tarafından ertelenmesi olduğunu unutmayın bu yüzden her zaman kullanıcı yazmaya bittiğinde, uygun zamanda değere sahip emin olun.

 $ (Function () {



  



 $ ("# İlerleme") Progressbar ().;



  



 $ ("# LimitedOne.") Bind ("tuşa değiştirmek mouseout bulanıklık ', function () {



    



 setTimeout ("checkTextareaLength ()", 200);



  



 });







 });

• <<
• 1
• 2
• >>