jQuery: progress bar, lai parādītu "pildījumu" no textarea

Bieži vien problēmas, kas šķiet viegli atrisināt, izrādīties daudz grūtāks nekā gaidīts, un tas, ka parasti ir zaudēt pusi dienas darba extricating retry vairāk vai mazāk pareizticīgo un drudža konsultācijas mājas lapas, izmisis par kādu, kurš ir jau saskārušies ar problēmu.

Ja projekts man bija vajadzība ierobežot rakstzīmju skaitu atļauts textarea es domāju, man atrisināt dažas minūtes, tas nav tā, es atklāju vairākus risinājumus attiecībā uz neto, bet neviens mani pārliecināja līdz galam, tāpēc es nolēmu ieviest kaut ko custom, izmantojot jQuery un liels jQueryUI , it īpaši komponenta paketi progessbar.

Atgūšana vajadzīgi faili

Colleghiamoci uz http://jqueryui.com/ un uz pogas "Custom Build Downloads" augšdaļas tiesības klikšķi.
Nākamajā lappusē izvēlieties noderīgas sastāvdaļas, un logrīki pieejams mēs nolēmām pieņemt tikai progressbar vienu.

Mēs izvēlamies grafikas veidni no nolaižamajā izvēlnē labajā pusē un noklikšķiniet uz "Lejupielādēt". Unzip paketi jūs tikai lejupielādēt, un tur ir trīs mapes, un jo saknes failu:

• css ir par tēmu mapi izvēlētās mūsu gadījumā noklusējuma ui-vieglums
• attīstības saišķa ietver piemērus un dokumentāciju
• js: tas satur divus failus kas vajadzīgi, lai palaistu savu risinājumu, jquery un jquery-ui-1.4.4.min.js-1.8.9.custom.min.js
• index.html: lapu, kas ļauj mums redzēt piemēru / tēmu preces mēs izvēlējāmies

Mūsu mazajiem piemērā mēs izveidosim vienkāršu struktūru šādi:

• atspiests mapē jQueryUI (jquery-ui-1.8.9.custom)
• file.html iepakojumu textarea
• file.js satur jQuery kods

Mēs veidojam mūsu html failu, dod jēgpilnu nosaukumu (mēs zvanu mrw_jquery_txtcheck.html) un ievietojiet galvas tag nepieciešamo iekļautās saites uz tēmu css un js failus jQuery un jQueryUI.

 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>

Organismā pievienot textarea:

 



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

 

Tad dial up div, kurā būs progressbar un viettura, lai dotu jums priekšstatu par to, cik rakstzīmes ir arī skaitliski.

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







 Pieejams <p> <span id="charCounter"> 255 </ span> rakstzīmes. </ P>

Tagad mēs varam doties atsevišķā failā rakstīt Javascript / jQuery ar vajadzīgās funkcijas, kas tad arī iekļaut to galvu tagu, mēs to saucam check_textarea.js.
Vispirms jādefinē pamata mainīgie lielumi, ļāva rakstzīmes un tos, kas pieejami, ir tāda pati vērtība gada sākumā:

 MAX_CHARS = 255;







 Atlikušas = MAX_CHARS;

Tad mēs definējam funkciju, kas kontrolē un veicina progressbar un skaitītājs:

 checkTextareaLength funkcija () {





  



 current_length == undefined var = $ ("# limitedOne"). val (). garums?

 



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



  



 Atlikušais = (MAX_CHARS - current_length);



	

  



 ja (Atlikušas <0) {

	

    



 ... $ ("# LimitedOne") ($("# LimitedOne val ") Val () Apakšvirkne (0, MAX_CHARS));



  



 Else {}



    



 $ ("# CharCounter") Html (Atlikušas).;



    



 var pv = Math.floor ((((MAX_CHARS-Atlikušas) / MAX_CHARS) * 100));



    



 . $ ('# Progress ") Progressbar (" vērtības ", pv);



  



 }







 }

Mēs analizējam kods: pirmā līnija checkTextareaLength izpaužas pašreizējo vērtību textarea ar val funkcija () jQuery, tad skaita zīmju skaitu ieraksta izlasot garumu atribūtu.
Uz nākamo rindiņu saņem par rakstzīmju atšķirību skaitu. Šajā brīdī ir 2 iespējas.

1. Atlikušais mainīgais lielums ir mazāks par nulli (piemēram, pēc copy / paste), ja bloks savāc vērtību textarea un ierobežojumos, ko tā ir 255 rakstzīmes, izmantojot native JavaScript apakšvirkni

 



 ... $ ("# LimitedOne") ($("# LimitedOne val ") Val () Apakšvirkne (0, MAX_CHARS));

 

2. Atlikušie ir lielāks par nulli, cits bloks pirmajā sprīdis ir uzlabota ar skaitu rakstzīmju vēl atlicis:

 



 $ ("# CharCounter") Html (Atlikušas).;

 

Tad funkcija aprēķina attiecību starp maksimālo rakstzīmju skaitu, un tiem, kas pašlaik iekļauti, bibliotēkas funkciju Math.floor kārtas rezultāts (uz leju) līdz tuvākajam:

 



 var pv = Math.floor ((((MAX_CHARS-Atlikušas) / MAX_CHARS) * 100));

 

Šajā brīdī mēs varam tikai piešķirt vērtību, kas atrodama progressbar

 



 . $ ('# Progress ") Progressbar (" vērtības ", pv);

 

Pieņemsim uzrakstīt kodu, kas tiek izpildīts uz DOM Ready.
Mēs inicializ progressbar un veikt saistās vēlaties pārtvert pasākumos: taustiņa nospiešanas, mouseout un mainīt miglu. Monitor tos visus nozvejas gadījumā, ja lietotājam ir izmantot copy / paste.
Ņemiet vērā, ka funkcijas izsaukums ir aizkavējusies par dažām simtdaļām otru caur dzimtā funkcija setTimeout tāpēc pārliecinieties, ka vienmēr ir vērtību atbilstošajā brīdī, kad lietotājs ir pabeidzis rakstīt.

 $ (Funkcija () {



  



 $ ("# Progress") Progressbar ().;



  



 $ ("# LimitedOne.") Bind ("mouseout izmaiņas aizmiglot taustiņa" funkcija () {



    



 setTimeout ("checkTextareaLength ()", 200);



  



 });







 });

• <<
• 1
• 2
• >>