Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Paggawa ng Keyboard gamit ang CSS at jQuery

by
Difficulty:IntermediateLength:MediumLanguages:

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Kung minsan masaya lang na paglaruan ang programming languages na alam natin at tingnan kung ano ang malilikha natin. Sa tingin  ko maganda kung makakagawa tayo ng kaunting online keyboard sa CSS, at paganahin ito sa jQuery.   Ang keyboard ay mayroong  action” key (caps lock, shift, and delete) na sadyang nagbabago ng keyboard kapag pinindot. Ipapakita nito kung paano ito gawin ngayon.


Hakbang 1: Simpleng HTML at Files

Final Product

Ang keyboard  na ito ay kailangan ng maraming HTML setup at laruin ito sa CSS. Bawat keys ay kinakatawan ng list item sa hindi nakaayos na listahan. Bawat list items ay magkakaroon ng class na nakalakip dito na ginamit sa parehong CSS at jQuery. Karamihan sa mga classes ay “letra”,  "lastitem", o anuman na kapareho nito. Makikita dito aling list item ang madali. 

Siguraduhin na nag-setup ka ng folder kapag gagamitin mo ang keyboard na ito. Sa loob ng bagong folder na ito, gumawa ng index.html kasama ng css at js folder. At ang panghuli, gumawa ng keyboard.js file sa js folder at style.css file sa css folder.

Organization of the files

Sa loob ng HTML file isasama natin ang dalawang JavaScript files at isang CSS file. Sa loob ng body tag ay mayroong MALAKING hindi nakaayos na listahan na naglalaman ng lahat ng mga letra, mga numero, at ilang “action” keys. Ang HTML ay mayroon ding textarea  na may id ng “keyboard”. Ilalagay ito kung saan nilalagay ang lahat ng characters. Ang code sa ibaba ay dapat ilagay sa loob ng index.html file.

Hindi mo kailangang masyadong mag-alala tungkol sa classes sa list items sa ngayon. Mas ipapaliwanag ko ito kapag ginamit natin ang jQuery. Subalit ang ibang classes (katulad ng right-shift at huling item) ay nariyan lang dahils sa CSS na gagamitin natin.

The HTML before CSS is applied.

Hakbang 2: Paggawa ng List Pretty

Ang JavaScript para sa keyboard ay malamang na  gagana nang maayos nang walang CSS, subalit hindi ito magmumukhang parang keyboard.   Hindi ko na ipapaliwanag bawat istilo dahil karamihan dito ay madaling intindihin, subalit may ilan akong papasadahan. I-save ang sumusunod na CSS sa style.css file na makikita sa css folder.

Tandaan ang mga sumusunod na istilo dahil napaka importante ng mga ito.

  • .on- Sa ilang list items, mayroong dalawang spans. Ito ay mga keys na may mahigit isang character bawat key; katulad ng  mga numero. Ang span na may on class ay itatago. Nagbabago ito kapag ang user ay pumindot sa shift key, subalit mas tatalakayin natin ito mamaya kasama ng JavaScript.
  • .lastitem – Ang huling jey sa kahit na anong hilera ay ang kanang margin magiging zeroed out para hindi masira ang layout.
Before and after the CSS is applied.

Hakbang 3: Pagbibigay-Buhay sa Keys

Kung pipindutin mo ang list item walang mangyayari. Aayusin natin ito nang may kaunting jQuery. Ang pangunahing ideya na gagamitin natin ay ilakip ang click handler sa bawat list items, kunin ang text kapag pinindot, at gawan ng kaunting mahika depende sa class ng list item. Mula dito, lahat ng JavaScript code ay mapupunta sa keyboard.js file.

Ang Setup

Kailangan nating buksan ang jQuery at tukuyin ang tatlong variables na gagamitin sa pamamagitan ng code. Ang mga variables na ito ay ang textarea, ang shift status, at ang caps lock status.

Ang susunod ay ang paglakip ng click handler sa lahat ng list item (keys). Dalawang variables ay naka-setup kapag  pinindot  ang key. Tinutukoy ang $this para lang maging mas kaunti ang typing sa atin, at ang character ay tinutukoy bilang HTML ng list item.Kapag ang list item ay letra, walang mangyayari sa variable na ito, at ibabalik ito. 

Ang Shift Key at Caps Lock

Kapag ang shift key (list items na may class ng "left-shift" o "right-shift") ay pinindot, gusto natin na i-toggle ang "uppercase" class ng bawat letra. Pagkatapos sa list items na  may class ng “symbol,” gusto nating i-toggle ang display sa pagitan  ng nested span tags.  Ang gusto nating sunod na gawin ay i-set ang shift sa kabaliktarang boolean value(kung ito ay true i-set ito sa false, at ang kabaliktaran), at ang caps lock variable sa false, at ang panghuli ibalik sa false para wala itong maapektuhan sa character variable.

Ngayon, kapag ang caps lock ay pinindot, ita-toggle natin ang “uppercase” class sa letter list items; isi-set ang caps lock variable sa true; at ibabalik sa false.

Ang Delete Key

Sa delete key, kailangan nating magtalaga ng iba pang variable: html-ang laman ng nasa kasalukuyang textarea. Kapag mayroon na tayo niyan, isi-set natin ang bagong HTML ng textarea sa kahit na ano maliban sa huling character. Ginagawa ito sa JavaScript's substr method. Muli ibabalik natin sa false para wala itong masagasaan na kahit ano.

The markup behind the delete key.

Special Characters

Sa lahat ng list items na hindi letra at hindi isa sa mga "actions" keys, papalitan natin ang character variable ng mas espesyal. Para sa list item na may “symbol” clas, ang character ay naka-set sa contents ng kahit na anong span na makikita. Ang puwang ay (walang duda) ay ginagamit sa space bar. Ang tab character ay ikinakatawan ng \t, at ang panghuli ang bagong linya (ang return key) ay \n.

The markup behind the symbol keys.

Uppercase Na Mga Letra

Kung iyong natatandaan kung kelan natin tinalakay ang shift at caps locks keys, ang “uppercase” class ay alinman sa dinagdag o tinanggal gamit ang toggleClass function. Kapag nahanap ang upperclass, ang character ay ginagawang uppercase sa tulong ng toUpperCase method.

Ang Resulta

Sa normal na keyboard, madalas ay kailangan mo lang ng shift key para sa isang letra.Kapag ang shift variable ay nakita na naka set sa true,gusto natin na i-toggle ang display ng simbolo ng spans. Ang nangyayari din ay kapag ang caps lock key ay naka “on” ang mga letra ay muli naka toggle sa pagitan ng uppercase at lowercase.

Para tapusin, ang character ay nilalagay sa textarea at ang user ay maaaring magpatuloy sa pag "typing".

Panghuling JavaScriptCode

Final Product

Konklusyon

Minsan maganda na maglaro lang, kahit na ang huling nagawa ay hindi naman talaga “real world.” Sa pamamagitan ng paggamit ng classes sa ating list items, nakagawa tayo ng pinapagana ng CSS at jQuery na keyboard.   Ang keyboard ay hindi naman lubos na walang silbi. May mga nakita akong websites na may pagpipilian para sa on-screen keyboard. Subalit kadalasan, dito ay mas maiintindihan natin ang kakayahan ng CSS at jQuery.

  • Sundan kami sa Twitter, o mag-subscribe sa NETTUTS RSS Feed para sa mas maraming araw-araw na web development tuts at mga artikulo.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.