јКуери: прогрес бар да покаже "пуњење" у тектареа

Често проблеме који изгледају лако решити, доказати изазовнији него што се очекивало, а то је да обично постоји изгубити посао ектрицатинг пола дана поново, мање или више православних и грозничаво консултације сајтова, очајнички за некога ко је већ суочена проблема.

Када пројекат Имала сам потребу да се ограничи број карактера дозвољено у тектареа Мислио сам решен за неколико минута, није било тако, нашао сам неколико решења на нету али ни један ме је убедио до краја, па сам одлучио да имплементирати нешто обичај користећи јКуери и велики јКуериУИ , посебно компонента пакета прогессбар.

Опоравак датотеке које су потребне

Цоллегхиамоци да хттп://јкуериуи.цом/ и кликните на дугме "Цустом Буилд Довнлоадс" у горњем десном углу.
На следећој страници изаберите корисних компоненти, а један од виџета доступних одлучили смо да се само ПрогрессБар.

Бирамо графички шаблон из падајућег менија на десној страни и кликните на "Довнлоад". Отпакујте архиву сте управо преузели, а ту су и три фолдера и датотека у роот:

• цс садржи фолдер тема изабран, у нашем случају подразумевано УИ-лакоће
• развојно-пакет садржи примере и документацију
• ЈС: садржи две датотеке које су потребне за рад наше решење; јКуери и јКуери-УИ-1.4.4.мин.јс-1.8.9.цустом.мин.јс
• индек.хтмл: страница која нам омогућава да видимо пример тематских / направа, изабрали смо

За наше мале пример ми ћемо створити једноставну структуру на следећи начин:

• декомпресије фолдер јКуериУИ (јКуери-УИ-1.8.9.цустом)
• филе.хтмл пакет који садржи тектареа
• филе.јс са јКуери код

Ми стварамо нашу ХТМЛ фајл, да га значајно име (ћемо позив мрв_јкуери_тктцхецк.хтмл) и убаците у глави инклузије таг потребно: везе са темом ЦСС и ЈС фајлова за јКуери и јКуериУИ.

 а хреф = "јкуери-уи-1.8.9.цустом/цсс/уи-лигхтнесс/јкуери-уи-1.8.9.цустом.цсс" <линк типе="тект/цсс" рел="стилесхеет" />







 <сцрипт типе="тект/јавасцрипт" срц="јкуери-уи-1.8.9.цустом/јс/јкуери-1.4.4.мин.јс"> </ сцрипт>







 <сцрипт типе="тект/јавасцрипт" срц="јкуери-уи-1.8.9.цустом/јс/јкуери-уи-1.8.9.цустом.мин.јс"> </ сцрипт>

У телу додати Тектареа:

 



 <див> <ТЕКСТАРЕА наме="лимитедОне" ид="лимитедОне" стиле='видтх:250пк;хеигхт:100пк;'> </ тектареа> </ див>

 

Онда Диал Уп див који ће садржати ПрогрессБар и чувар места да вам дам идеју колико карактера су нумерички.

 <див ид="прогресс" стиле="хеигхт: 20пк;"> </ див>







 Доступно <п> <спан ид="цхарЦоунтер"> 255 </ спан> карактера. </ П>

Сада можемо наставити да посебан фајл за писање Јавасцрипт / јКуери са потребним функцијама, који је тада такође укључити у ХЕАД таг, ми ћемо позив цхецк_тектареа.јс.
Прво дефинисати основне варијабле, дозвољено карактера и они доступни имају исту вредност на почетку:

 МАКС_ЦХАРС = 255;







 Преостало = МАКС_ЦХАРС;

Онда смо дефинисати функцију која контролише и побољшава ПрогрессБар и контра:

 цхецкТектареаЛенгтх фунцтион () {





  



 цуррент_ленгтх == ундефинед вар = $ ("# лимитедОне.") Вал (). дужина?

 



 0: $ ("# лимитедОне.") Вал () Дужина;.



  



 Преостали = (МАКС_ЦХАРС - цуррент_ленгтх);



	

  



 ако је (Преостало <0) {

	

    



 ... $ ("# ЛимитедОне") ($("# ЛимитедОне Вал ") Вал () субстринг (0, МАКС_ЦХАРС));



  



 Елсе {}



    



 $ ("# ЦхарЦоунтер") ХТМЛ (преостале).;



    



 вар ПВ = Матх.флоор ((((МАКС_ЦХАРС-Преостала) / МАКС_ЦХАРС) * 100));



    



 . $ ('# Прогрес ") ПрогрессБар (" вредности ", ПВ);



  



 }







 }

Анализирамо код: Прва линија у цхецкТектареаЛенгтх добија тренутну вредност тектареа од вред функција () јКуери, затим израчуна број карактера ушао читајући дужини атрибута.
У наредни ред добија број карактера на располагању за разлику. У овом тренутку постоје 2 могућности.

1. Преостало променљива је мање од нуле (на пример, након цопи / пасте), ако блок прикупља вредност тектареа и ограничења га до 255 карактера помоћу матерњи ЈаваСкрипт подниске

 



 ... $ ("# ЛимитедОне") ($("# ЛимитедОне Вал ") Вал () субстринг (0, МАКС_ЦХАРС));

 

2. Преостало је већи од нуле, иначе блок у првом век је увећан број преосталих карактера:

 



 $ ("# ЦхарЦоунтер") ХТМЛ (преостале).;

 

Онда функција израчунава однос између максималан број карактера на располагању и оних који су тренутно укључени, библиотеку рунди Матх.флоор функција резултат (доле) до најближе:

 



 вар ПВ = Матх.флоор ((((МАКС_ЦХАРС-Преостала) / МАКС_ЦХАРС) * 100));

 

У овом тренутку можемо само да доделите вредност наћи у ПрогрессБар

 



 . $ ('# Прогрес ") ПрогрессБар (" вредности ", ПВ);

 

Хајде да пишу код који се извршава на ДОМ Реади.
Ми иницијализује ПрогрессБар и обављају везују желите да пресретну догађаји: притиском на тастер, моусеоут и промените замућења. Монитор их све да ухвати случају да корисник користи Цопи / Пасте.
Имајте на уму да позива функције се одлаже за неколико стотинки секунде кроз матерњи функција сетТимеоут па будите сигурни да увек имате вредност у одговарајућем тренутку, када корисник заврши куцањем.

 $ (Фунцтион () {



  



 $ ("# Прогрес") ПрогрессБар ().;



  



 $ ("# ЛимитедОне.") Бинд ("моусеоут промена замућења притиска на тастер", фунцтион () {



    



 сетТимеоут ("цхецкТектареаЛенгтх ()", 200);



  



 });







 });

• <<
• 1
• 2
• >>