విషయము
- ఒకే HTML ఫైల్‌లో బహుళ పేజీలను ఎలా కోడ్ చేయాలి
- వివరణ
- డైలాగ్ బాక్స్‌లు మరియు పరివర్తనాలను ఎలా ఉపయోగించాలి
- ఉపయోగించగల పరివర్తనాలు
- వివరణ
- బటన్లను ఎలా సృష్టించాలి
- వివరణ
- నావిగేషన్ బార్‌ను ఎలా సృష్టించాలి
- నావిగేషన్ బార్ కోసం HTML ను ఎలా కోడ్ చేయాలి:
- J క్వెరీ మొబైల్‌తో కంటెంట్‌ను ఎలా ఫార్మాట్ చేయాలి
- J క్వెరీ మొబైల్ ఉపయోగించే డిఫాల్ట్ శైలులు
- వివరణ
- HTML మూలకాలకు థీమ్‌లను ఎలా ఉపయోగించాలి
- థీమ్‌ను వర్తింపజేయడానికి రెండు మార్గాలు:
- వివరణ
- దృష్టికోణం
ఇది 15 వ అధ్యాయం నుండి సవరించిన సారాంశం మురాచ్ యొక్క HTML5 మరియు CSS3 జాక్ రువాల్కాబా మరియు అన్నే బోహ్మ్ చేత.
j క్వెరీ మొబైల్ అనేది మొబైల్ వెబ్‌సైట్‌లను అభివృద్ధి చేయడానికి మీరు ఉపయోగించగల ఉచిత, ఓపెన్-సోర్స్, క్రాస్-ప్లాట్‌ఫాం, జావాస్క్రిప్ట్ లైబ్రరీ. ఈ లైబ్రరీ స్థానిక మొబైల్ అనువర్తనం యొక్క పేజీల వలె కనిపించే మరియు అనుభూతి చెందే పేజీలను సృష్టించడానికి మిమ్మల్ని అనుమతిస్తుంది.
J క్వెరీ మొబైల్ ప్రస్తుతం బీటా టెస్ట్ వెర్షన్‌గా అందుబాటులో ఉన్నప్పటికీ, ఈ వెర్షన్ ఇప్పటికే అద్భుతమైన మొబైల్ వెబ్‌సైట్‌ను అభివృద్ధి చేయడానికి మీకు అవసరమైన అన్ని లక్షణాలను అందిస్తుంది. ఫలితంగా, మీరు దీన్ని వెంటనే ఉపయోగించడం ప్రారంభించవచ్చు. ఈ సంస్కరణ నిరంతరం మెరుగుపరచబడుతుందని మీరు ఆశించవచ్చు, కాబట్టి j క్వెరీ మొబైల్ మాత్రమే మెరుగుపడుతుంది.
ఈ వ్యాసంలో మీరు మొబైల్ వెబ్‌సైట్ యొక్క పేజీలను సృష్టించే ప్రాథమిక పద్ధతులను నేర్చుకుంటారు. అందులో డైలాగ్ బాక్స్‌లు, బటన్లు మరియు నావిగేషన్ బార్‌లు ఉంటాయి.
ఒకే HTML ఫైల్‌లో బహుళ పేజీలను ఎలా కోడ్ చేయాలి
స్క్రీన్ వెబ్‌సైట్ కోసం మీరు వెబ్ పేజీలను అభివృద్ధి చేసే విధానానికి భిన్నంగా, ఒకే HTML ఫైల్‌లో బహుళ పేజీలను సృష్టించడానికి j క్వెరీ మొబైల్ మిమ్మల్ని అనుమతిస్తుంది. ఫిగర్ 15-7 ద్వారా ఇది వివరించబడింది. ఇక్కడ, మీరు ఈ పేజీల కోసం HTML తో పాటు సైట్ యొక్క రెండు పేజీలను చూడవచ్చు. ఆశ్చర్యకరమైన విషయం ఏమిటంటే, రెండు పేజీలు ఒకే HTML ఫైల్‌లో కోడ్ చేయబడ్డాయి.
ప్రతి పేజీ కోసం, మీరు డేటా-రోల్ లక్షణం యొక్క విలువగా “పేజీ” తో ఒక డివి ఎలిమెంట్‌ను కోడ్ చేస్తారు. అప్పుడు, ఆ ప్రతి డివి ఎలిమెంట్స్‌లో, మీరు ప్రతి పేజీ యొక్క హెడర్, కంటెంట్ మరియు ఫుటర్ కోసం డివి ఎలిమెంట్స్‌ని కోడ్ చేస్తారు. తరువాత, HTML ఫైల్ లోడ్ అయినప్పుడు, ఫైల్ యొక్క శరీరంలోని మొదటి పేజీ ప్రదర్శించబడుతుంది.
HTML ఫైల్‌లోని పేజీల మధ్య లింక్ చేయడానికి, మీరు 7 వ అధ్యాయంలోని ఫిగర్ 7-11లో చూపిన విధంగా ప్లేస్‌హోల్డర్‌లను ఉపయోగిస్తారు. ఉదాహరణకు, ఈ ఉదాహరణలోని మొదటి పేజీలోని ఒక> మూలకం వినియోగదారు ట్యాప్ చేసినప్పుడు “# టూబిన్” కి వెళుతుంది ఈ లింక్ కోసం కంటెంట్‌గా కోడ్ చేయబడిన h2 లేదా img మూలకం. ఇది "టూబిన్" తో ఉన్న డివి ఎలిమెంట్‌ను దాని ఐడి లక్షణంగా సూచిస్తుంది, అంటే లింక్‌ను నొక్కడం రీడర్‌ను ఫైల్‌లోని రెండవ పేజీకి తీసుకువెళుతుంది.
ఈ ఉదాహరణ రెండు పేజీలను మాత్రమే చూపించినప్పటికీ, మీరు ఒకే HTML ఫైల్‌లో చాలా పేజీలను కోడ్ చేయవచ్చు. అయితే, అన్ని పేజీలు వాటి చిత్రాలు, జావాస్క్రిప్ట్ మరియు CSS ఫైళ్ళతో పాటు ఒకే HTML ఫైల్‌తో లోడ్ అవుతాయని గుర్తుంచుకోండి. ఫలితంగా, మీరు ఒకే ఫైల్‌లో ఎక్కువ పేజీలను నిల్వ చేస్తే లోడ్ సమయం అధికమవుతుంది. అది జరిగినప్పుడు, మీరు మీ పేజీలను ఒకటి కంటే ఎక్కువ HTML ఫైల్‌గా విభజించవచ్చు.
ఒక HTML ఫైల్ యొక్క శరీరంలోని రెండు పేజీల కోసం HTML:
div data-role = "page"> హెడర్ డేటా-రోల్ = "హెడర్"> h1> SJV టౌన్ హాల్ </ h1> / హెడర్> విభాగం డేటా-రోల్ = "కంటెంట్"> h3> 2011-2012 స్పీకర్లు / h3> a href = "# టూబిన్"> h4> జెఫ్రీ టూబిన్బ్ర> అక్టోబర్ 19, 2011 / h4> img src = "images / toobin75.webp" alt = "జెఫ్రీ టూబిన్"> / a>! - స్పీకర్ల పునరుద్ధరణకు సంబంధించిన అంశాలు - -> / విభాగం> ఫుటర్ డేటా-రోల్ = "ఫుటర్"> h4> © 2011 / h4> / ఫుటర్> / div> div data-role = "page" id = "toobin"> హెడర్ డేటా-రోల్ = "హెడర్"> h1> SJV టౌన్ హాల్ </ h1> / హెడర్> విభాగం డేటా-రోల్ = "కంటెంట్"> h3> సుప్రీం తొమ్మిది: br> బ్లాక్ రోబ్డ్ సీక్రెట్స్ / h3> img src = "images / toobin_court.cnn.webp" alt = "జెఫ్రీ టూబిన్ "> p> విమర్శకుల ప్రశంసలు పొందిన బెస్ట్ సెల్లర్ రచయిత, i> ది తొమ్మిది :! - కాపీ కాపీలు -> / విభాగం> ఫుటర్ డేటా-రోల్ =" ఫుటరు "> h4> © 2011 / h4> / ఫుటర్> / div>
వివరణ
- మీరు j క్వెరీ మొబైల్‌ను ఉపయోగించినప్పుడు, మీరు ప్రతి పేజీకి ప్రత్యేక HTML ఫైల్‌ను అభివృద్ధి చేయవలసిన అవసరం లేదు. బదులుగా, ఒకే HTML ఫైల్ యొక్క బాడీ ఎలిమెంట్‌లో, మీరు ప్రతి పేజీకి ఒక డేటా ఎలిమెంట్‌ను దాని డేటా-రోల్ లక్షణంతో “పేజీ” కు సెట్ చేస్తారు.
- ప్రతి డివి ఎలిమెంట్ కోసం, మీరు ఐడి లక్షణాన్ని ప్లేస్‌హోల్డర్ విలువకు సెట్ చేస్తారు, ఇది ఇతర పేజీల యొక్క a> మూలకాలలోని href లక్షణాల ద్వారా ప్రాప్తిస్తుంది.
డైలాగ్ బాక్స్‌లు మరియు పరివర్తనాలను ఎలా ఉపయోగించాలి
లింక్ ట్యాప్ చేసినప్పుడు తెరుచుకునే డైలాగ్ బాక్స్‌ను ఎలా సృష్టించాలో మూర్తి 15-8 చూపిస్తుంది. అలా చేయడానికి, మీరు ఏదైనా పేజీ లాగానే డైలాగ్ బాక్స్‌ను కోడ్ చేస్తారు. కానీ ఆ పేజీకి వెళ్ళే ఒక> మూలకంలో, మీరు డేటా-రిల్ లక్షణాన్ని “డయా లాగ్” తో దాని విలువగా కోడ్ చేస్తారు.
ఈ చిత్రంలోని ఉదాహరణలు చూపినట్లుగా, j క్వెరీ మొబైల్ CSS ఫైల్ సాధారణ వెబ్ పేజీ కంటే భిన్నంగా డైలాగ్ బాక్స్‌ను ఫార్మాట్ చేస్తుంది. అప్రమేయంగా, డైలాగ్ బాక్స్‌లో తెలుపు ముందుభాగ వచనంతో చీకటి నేపథ్యం ఉంటుంది మరియు శీర్షిక మరియు ఫుటరు పేజీ యొక్క వెడల్పును విస్తరించవు. మునుపటి పేజీకి తిరిగి రావడానికి వినియోగదారు తప్పక నొక్కే హెడర్‌లో డైలాగ్ బాక్స్‌లో “X” ఉంటుంది.
మీరు మరొక పేజీకి లేదా డైలాగ్ బాక్స్‌కు వెళ్ళే ఒక> మూలకాన్ని కోడ్ చేసినప్పుడు, ఈ చిత్రంలో పట్టికలో సంగ్రహించబడిన ఆరు పరివర్తనాల్లో ఒకదాన్ని పేర్కొనడానికి మీరు డేటా-ట్రాన్సిషన్ లక్షణాన్ని కూడా ఉపయోగించవచ్చు. ఈ పరివర్తనాల్లో ప్రతి ఒక్కటి ఐఫోన్ వంటి మొబైల్ పరికరం ఉపయోగించే ప్రభావాన్ని అనుకరించటానికి ఉద్దేశించబడింది.
ఉపయోగించగల పరివర్తనాలు
| స్లయిడ్ | తదుపరి పేజీ కుడి నుండి ఎడమకు జారిపోతుంది. |
| పైకి ఎత్తు | తదుపరి పేజీ దిగువ నుండి పైకి జారిపోతుంది. |
| కిందకి లాగండి | తదుపరి పేజీ పై నుండి క్రిందికి జారిపోతుంది. |
| పాప్ | తదుపరి పేజీ స్క్రీన్ మధ్య నుండి మసకబారుతుంది. |
| వాడిపోవు | తదుపరి పేజీ వీక్షణలోకి మసకబారుతుంది. |
| ఫ్లిప్ | ప్లేయింగ్ కార్డ్‌ను తిప్పికొట్టడం మాదిరిగానే తదుపరి పేజీ వెనుక నుండి ముందు వైపుకు తిరుగుతుంది. ఈ పరివర్తన కొన్ని పరికరంలో మద్దతు లేదు. |
“పాప్” పరివర్తనతో పేజీని డైలాగ్ బాక్స్‌గా తెరిచే HTML:
a href = "# టూబిన్" డేటా- rel = "డైలాగ్" డేటా-ట్రాన్సిషన్ = "పాప్">
“ఫేడ్” పరివర్తనతో పేజీని తెరిచే HTML:
a href = "# టూబిన్" డేటా-ట్రాన్సిషన్ = "ఫేడ్">
వివరణ
- ఒక HTML డైలాగ్ బాక్స్ ఏదైనా పేజీ కోడ్ చేయబడిన విధంగా కోడ్ చేయబడుతుంది. ఏదేమైనా, పేజీకి లింక్ చేసే ఒక> మూలకం దాని విలువగా “డైలాగ్” తో డేటా-రిల్ లక్షణాన్ని కలిగి ఉంటుంది. డైలాగ్ బాక్స్ మూసివేయడానికి, వినియోగదారు బాక్స్ యొక్క శీర్షికలోని X ని నొక్కండి.
- పేజీ లేదా డైలాగ్ బాక్స్ తెరిచిన విధానాన్ని పేర్కొనడానికి, మీరు పై పట్టికలోని విలువలలో ఒకదానితో డేటా-ట్రాన్సిషన్ లక్షణాన్ని ఉపయోగించవచ్చు. మీరు పేర్కొన్న పరివర్తనకు పరికరం మద్దతు ఇవ్వకపోతే, లక్షణం విస్మరించబడుతుంది.
- డైలాగ్ బాక్స్ కోసం స్టైలింగ్ j క్వెరీ మొబైల్ CSS ఫైల్ చేత చేయబడుతుంది.
బటన్లను ఎలా సృష్టించాలి
మూర్తి 15-9 ఒక పేజీ నుండి మరొక పేజీకి నావిగేట్ చెయ్యడానికి బటన్లను ఎలా ఉపయోగించాలో చూపిస్తుంది. అలా చేయడానికి, మీరు ఒక> మూలకం కోసం డేటా-రోల్ లక్షణాన్ని “బటన్” కు సెట్ చేయండి మరియు మిగిలినవి j క్వెరీ మొబైల్ చేస్తుంది.
అయితే, మీరు బటన్ల కోసం కొన్ని ఇతర లక్షణాలను కూడా సెట్ చేయవచ్చు. ఉదాహరణకు, ఈ చిత్రంలోని మొదటి రెండు బటన్ల మాదిరిగా రెండు లేదా అంతకంటే ఎక్కువ బటన్లు పక్కపక్కనే కనిపించాలని మీరు కోరుకుంటే, మీరు డేటా-ఇన్లైన్ లక్షణాన్ని “true” కు సెట్ చేయవచ్చు.
మీరు j క్వెరీ మొబైల్ అందించిన 18 చిహ్నాలలో ఒకదాన్ని ఒక బటన్‌కు జోడించాలనుకుంటే, మీరు డేటా-ఐకాన్ లక్షణాన్ని కూడా కోడ్ చేస్తారు. ఉదాహరణకు, ఈ ఉదాహరణలోని మూడవ బటన్ “తొలగించు” చిహ్నాన్ని ఉపయోగిస్తుంది మరియు నాల్గవ బటన్ “హోమ్” చిహ్నాన్ని ఉపయోగిస్తుంది. ఈ చిహ్నాలన్నీ స్థానిక మొబైల్ అనువర్తనంలో మీరు చూడగలిగే చిహ్నాల వలె కనిపిస్తాయి. యాదృచ్ఛికంగా, ఈ చిహ్నాలు పేజీ తప్పక యాక్సెస్ చేయవలసిన ప్రత్యేక ఫైళ్లు కాదు. బదులుగా, వాటిని j క్వెరీ మొబైల్ లైబ్రరీ అందిస్తోంది.
ఈ చిత్రంలో అవును, కాదు, మరియు బహుశా బటన్ల వలె మీరు రెండు లేదా అంతకంటే ఎక్కువ బటన్లను అడ్డంగా సమూహపరచాలనుకుంటే, మీరు “కంట్రోల్‌గ్రూప్” ను దాని డేటా-రోల్ లక్షణంగా కలిగి ఉన్న ఒక డివి ఎలిమెంట్‌లోని బటన్ల కోసం ఎలిమెంట్లను కోడ్ చేయవచ్చు. దాని డేటా-రకం లక్షణంగా “క్షితిజ సమాంతర”. లేదా, బటన్లను నిలువుగా సమూహపరచడానికి, మీరు డేటా-రకం లక్షణాన్ని “నిలువు” గా మార్చవచ్చు.
మీరు ఒక బటన్ కోసం డేటా-రిల్ లక్షణాన్ని “వెనుకకు” మరియు పౌండ్ గుర్తు (#) కు హ్రెఫ్ లక్షణాన్ని సెట్ చేస్తే, బటన్ దానిని పిలిచిన పేజీకి తిరిగి వస్తుంది. మరో మాటలో చెప్పాలంటే, బటన్ బ్యాక్ బటన్ లాగా పనిచేస్తుంది. పేజీ కోసం కంటెంట్‌లోని చివరి బటన్ ద్వారా ఇది వివరించబడింది.
చివరి రెండు బటన్లు పేజీ కోసం ఫుటరులో బటన్లు ఎలా కనిపిస్తాయో చూపుతాయి. ఇక్కడ, చిహ్నాలు మరియు వచనం నల్లని నేపథ్యానికి వ్యతిరేకంగా తెల్లగా ఉంటాయి. ఈ సందర్భంలో, ఫుటరు కోసం క్లాస్ గుణం “ui-bar” కు సెట్ చేయబడింది, ఇది j క్వెరీ మొబైల్‌కు ఫుటరు విషయాల చుట్టూ కొంచెం ఎక్కువ స్థలాన్ని ఉంచాలని చెబుతుంది. ఫిగర్ 15-12లో మీరు దాని గురించి మరింత నేర్చుకుంటారు.
విభాగంలోని బటన్ల కోసం HTML:
! - ఇన్లైన్ బటన్ల కోసం, డేటా-లైన్ లక్షణాన్ని ఒప్పుకు సెట్ చేయండి -> a href = "#" data-role = "button" data-inline = "true"> రద్దు చేయండి </ a> a href = "#" డేటా -role = "button" data-inline = "true"> OK / a>! - ఒక బటన్‌కు చిహ్నాన్ని జోడించడానికి, డేటా-ఐకాన్ లక్షణాన్ని ఉపయోగించండి -> a href = "#" data-role = "button "data-icon =" delete "> తొలగించు / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - సమూహ బటన్లకు, ఒక div మూలకాన్ని ఉపయోగించండి అనుసరించే లక్షణాలు -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> అవును / a> a href = "#" data-role = "button" data-icon = "arrow-d"> లేదు </ a> a href = "#" data-role = "button"> బహుశా </ a> / div>! - కు బ్యాక్ బటన్‌ను కోడ్ చేయండి, డేటా-రిల్ లక్షణాన్ని వెనుకకు సెట్ చేయండి -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> మునుపటి పేజీకి తిరిగి / a >
ఫుటరులోని బటన్ల కోసం HTML:
footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Facebook కు జోడించు </ a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> ఈ పేజీని ట్వీట్ చేయండి </ a> / footer>
వివరణ
- వెబ్ పేజీకి ఒక బటన్‌ను జోడించడానికి, మీరు ఒక> మూలకాన్ని దాని డేటా-పాత్ర లక్షణంతో “బటన్” కు సెట్ చేస్తారు.
నావిగేషన్ బార్‌ను ఎలా సృష్టించాలి
మూర్తి 15-10 మీరు వెబ్ పేజీకి నావిగేషన్ బార్‌ను ఎలా జోడించవచ్చో చూపిస్తుంది. అలా చేయడానికి, మీరు ఒక డివి ఎలిమెంట్‌ను దాని డేటా-రోల్‌తో “నవ్‌బార్” కు సెట్ చేస్తారు. ఈ మూలకంలో, మీరు నావిగేషన్ బార్‌లోని అంశాల కోసం a> మూలకాలను కలిగి ఉన్న li మూలకాలను కలిగి ఉన్న ఉల్ మూలకాన్ని కోడ్ చేస్తారు. అయితే, మీరు a> మూలకాల కోసం డేటా-పాత్ర లక్షణాన్ని కోడ్ చేయవని గమనించండి.
నావిగేషన్ బార్‌లోని అంశాల కోసం రంగును మార్చడానికి, ఈ ఉదాహరణలోని కోడ్‌లో ప్రతి అంశానికి డేటా-థీమ్-బి లక్షణం ఉంటుంది. ఫలితంగా, j క్వెరీ మొబైల్ ప్రతి వస్తువు యొక్క నేపథ్య రంగును నలుపు నుండి డిఫాల్ట్గా ఆకర్షణీయమైన నీలం రంగులోకి మారుస్తుంది. అదనంగా, ఈ కోడ్ యాక్టివ్ బటన్ కోసం క్లాస్ లక్షణాన్ని “ui-btn-active” గా సెట్ చేస్తుంది కాబట్టి j క్వెరీ మొబైల్ యాక్టివ్ బటన్ కోసం రంగును తేలికపాటి నీలం రంగులోకి మారుస్తుంది. J క్వెరీ మొబైల్ ఉపయోగించే ఫార్మాటింగ్‌ను మీరు ఎలా మార్చవచ్చో ఇది చూపిస్తుంది మరియు మీరు దాని గురించి మరింత తెలుసుకుంటారు.
నావిగేషన్ బార్ కోసం HTML:
header data-role = "header"> h1> SJV టౌన్ హాల్ </ h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> హోమ్ </ li> li> a href =" # స్పీకర్లు "డేటా-ఐకాన్ =" స్టార్ "డేటా-థీమ్ =" బి "> స్పీకర్లు </ a> </ li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> మమ్మల్ని సంప్రదించండి </ a> / li> / ul> / div> / header>
నావిగేషన్ బార్ కోసం HTML ను ఎలా కోడ్ చేయాలి:
- హెడర్ మూలకం లోపల ఒక div మూలకాన్ని కోడ్ చేయండి. అప్పుడు, div మూలకం కోసం డేటా-పాత్ర లక్షణాన్ని “navbar” కు సెట్ చేయండి.
- Div మూలకం లోపల, ప్రతి లింక్‌కు ఒక li మూలకాన్ని కలిగి ఉన్న ul మూలకాన్ని కోడ్ చేయండి.
- ప్రతి li మూలకంలో, లింక్ వెళ్ళవలసిన పేజీ కోసం ప్లేస్‌హోల్డర్‌ను ఉపయోగించే href లక్షణంతో a> మూలకాన్ని కోడ్ చేయండి. అప్పుడు, మీరు ఎంచుకున్న చిహ్నానికి డేటా-ఐకాన్ లక్షణాన్ని సెట్ చేయండి.
- నావిగేషన్ బార్‌లోని క్రియాశీల అంశం కోసం, తరగతి లక్షణాన్ని “ui-btn-active” కు సెట్ చేయండి.అప్పుడు, ఈ అంశం యొక్క రంగు నావిగేషన్ బార్‌లోని ఇతర వస్తువుల కంటే తేలికగా ఉంటుంది.
- నావిగేషన్ బార్‌లోని ప్రతి అంశానికి j క్వెరీ మొబైల్ థీమ్‌ను వర్తింపచేయడానికి మీరు డేటా-థీమ్ లక్షణాన్ని కూడా ఉపయోగించాలి. లేకపోతే, బార్‌లోని బటన్లు మిగిలిన హెడర్ మాదిరిగానే ఉంటాయి. థీమ్స్ వర్తింపజేయడం గురించి మరింత తెలుసుకోవడానికి, ఫిగర్ 15-12 చూడండి.
J క్వెరీ మొబైల్‌తో కంటెంట్‌ను ఎలా ఫార్మాట్ చేయాలి
మీరు ఇప్పటికే చూసినట్లుగా, j క్వెరీ మొబైల్ దాని స్వంత స్టైల్ షీట్ ఆధారంగా వెబ్ పేజీ యొక్క భాగాలను స్వయంచాలకంగా ఫార్మాట్ చేస్తుంది. ఇప్పుడు, మీరు దాని గురించి మరింత నేర్చుకుంటారు, అలాగే j క్వెరీ మొబైల్ ఉపయోగించే డిఫాల్ట్ స్టైలింగ్‌ను ఎలా సర్దుబాటు చేయాలి.
J క్వెరీ మొబైల్ ఉపయోగించే డిఫాల్ట్ శైలులు
సాధారణ HTML మూలకాల కోసం j క్వెరీ మొబైల్ ఉపయోగించే డిఫాల్ట్ శైలులను మూర్తి 15-13 చూపిస్తుంది. దాని అన్ని శైలుల కోసం, j క్వెరీ మొబైల్ బ్రౌజర్ యొక్క రెండరింగ్ ఇంజిన్‌పై ఆధారపడుతుంది కాబట్టి దాని స్వంత స్టైలింగ్ తక్కువగా ఉంటుంది. ఇది లోడ్ సమయాన్ని వేగంగా ఉంచుతుంది మరియు అధిక CSS ఒక పేజీలో విధించే ఓవర్‌హెడ్‌ను తగ్గిస్తుంది.
మీరు చూడగలిగినట్లుగా, j క్వెరీ మొబైల్ యొక్క స్టైలింగ్ చాలా ప్రభావవంతంగా ఉంటుంది, మీరు మీ స్వంత CSS స్టైల్ షీట్‌ను అందించడం ద్వారా దాని స్టైలింగ్‌ను సవరించాల్సిన అవసరం లేదు. ఉదాహరణకు, క్రమం లేని జాబితాలోని అంశాల మధ్య అంతరం మరియు పట్టిక ఆకృతీకరణ రెండూ అవి ఆమోదయోగ్యమైనవి. అలాగే, బూడిదరంగు నేపథ్యంలో ఉన్న నల్ల రకం స్థానిక మొబైల్ అనువర్తనాల ఆకృతీకరణకు అనుగుణంగా ఉంటుంది.
వివరణ
- అప్రమేయంగా, j క్వెరీ మొబైల్ స్వయంచాలకంగా ఒక పేజీ కోసం HTML మూలకాలకు శైలులను వర్తింపజేస్తుంది. ఈ శైలులు ఆకర్షణీయంగా ఉండటమే కాకుండా, బ్రౌజర్ యొక్క స్థానిక శైలులను అనుకరిస్తాయి.
- అప్రమేయంగా, j క్వెరీ మొబైల్ ప్రతి మొబైల్ పేజీ యొక్క ఎడమ, కుడి, ఎగువ మరియు దిగువ భాగంలో చిన్న మొత్తంలో పాడింగ్‌ను వర్తింపజేస్తుంది.
- అప్రమేయంగా, లింకులు సాధారణ టెక్స్ట్ కంటే కొంచెం పెద్దవి. ఇది వినియోగదారుకు లింక్‌లను నొక్కడం సులభం చేస్తుంది.
- అప్రమేయంగా, లింక్‌లు ఫాంట్ రంగు వలె నీలం రంగుతో అండర్లైన్ చేయబడతాయి.
HTML మూలకాలకు థీమ్‌లను ఎలా ఉపయోగించాలి
కొన్ని సందర్భాల్లో, మీరు j క్వెరీ మొబైల్ ఉపయోగించే డిఫాల్ట్ శైలులను మార్చాలనుకుంటున్నారు. ఫిగర్ 15-10 యొక్క నావిగేషన్ బార్‌లో మీరు ఇప్పటికే చూశారు. డిఫాల్ట్ శైలులను మార్చడానికి, మీరు j క్వెరీ మొబైల్ అందించే ఐదు థీమ్‌లను ఉపయోగించవచ్చు. ఇవి ఫిగర్ 15-12లో సంగ్రహించబడ్డాయి. ఇక్కడ మళ్ళీ, ఈ ఇతివృత్తాలు స్థానిక మొబైల్ అనువర్తనం యొక్క రూపాన్ని అనుకరించటానికి ఉద్దేశించినవి.
థీమ్‌లను వర్తింపజేయడానికి ఒక మార్గం థీమ్ అక్షరంతో డేటా-థీమ్ లక్షణాన్ని దాని విలువగా కోడ్ చేయడం. మీరు దీన్ని ఫిగర్ 15-10లోని నావిగేషన్ బార్‌లో చూశారు మరియు ఈ చిత్రంలో రెండవ నావిగేషన్ బార్ కోసం కోడ్‌లో మీరు దీన్ని చూడవచ్చు. ఇక్కడ, డేటా-థీమ్ లక్షణం శీర్షికకు థీమ్ “ఇ” మరియు నావిగేషన్ బార్‌లోని అంశాలకు థీమ్ “డి” వర్తిస్తుంది.
థీమ్‌లను వర్తింపజేయడానికి మరొక మార్గం ఏమిటంటే, ఒక మూలకం కోసం తరగతి లక్షణాన్ని ఒక థీమ్‌ను సూచించే తరగతి పేరుకు సెట్ చేయడం. పట్టిక తరువాత మొదటి ఉదాహరణ ద్వారా ఇది వివరించబడింది. ఇక్కడ, తరగతి లక్షణం “ui-bar” మరియు “ui-bar- b” తరగతులను div మూలకానికి వర్తింపచేయడానికి ఉపయోగించబడుతుంది. ఫలితంగా, j క్వెరీ మొబైల్ మొదట మూలకానికి బార్ కోసం దాని డిఫాల్ట్ స్టైలింగ్‌ను వర్తింపజేస్తుంది మరియు ఆ స్టైలింగ్‌కు బి థీమ్‌ను వర్తింపజేస్తుంది. తరువాతి పేజీలలో, మీరు ఈ రకమైన స్టైలింగ్ యొక్క ఇతర ఉదాహరణలను చూస్తారు.
దయచేసి ఈ చిత్రంలోని పట్టిక థీమ్‌ను తక్కువగా ఉపయోగించమని చెబుతుంది. ఎందుకంటే ఇది ఒక నారింజ రంగును ఉపయోగిస్తుంది, అది ఒక వస్తువును ఉచ్చరించడానికి బాగా పనిచేస్తుంది, కానీ పెద్ద మోతాదులో ఆకర్షణీయంగా ఉండదు. ఈ చిత్రంలోని రెండవ శీర్షిక మరియు నావిగేషన్ బార్ ద్వారా ఇది వివరించబడింది, ఇది మీరు రంగులో చూసినప్పుడు జార్జింగ్‌గా ఉంటుంది.
సాధారణంగా, డిఫాల్ట్ శైలులు మరియు మొదటి మూడు ఇతివృత్తాలతో ఉండడం మంచిది, ఇవి సాధారణంగా కలిసి పనిచేస్తాయి. అప్పుడు, మీకు ఇంకా ఎక్కువ అవసరమని మీరు అనుకున్నప్పుడు మీరు d మరియు e థీమ్స్‌తో ప్రయోగాలు చేయవచ్చు.
రెండవ శీర్షిక మరియు నావిగేషన్ బార్ కోసం HTML:
header data-role = "header" data-theme = "e"> h1> SJV టౌన్ హాల్ </ h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> హోమ్ </ a> / li> li> a href =" # స్పీకర్లు "డేటా-ఐకాన్ =" స్టార్ "డేటా-థీమ్ =" d "> స్పీకర్లు </ a> </ li> a> href = "# వార్తలు" id = "వార్తలు" డేటా- icon = "గ్రిడ్" డేటా-థీమ్ = "d"> వార్తలు </ a> / li> / ul> / div> / header>
ఐదు j క్వెరీ మొబైల్ థీమ్స్:
| a | తెలుపు ముందుభాగంతో నల్లని నేపథ్యం. ఇది డిఫాల్ట్. |
| బి | తెలుపు ముందుభాగంతో నీలిరంగు నేపథ్యం. |
| సి | నలుపు ముందుభాగంతో లేత బూడిదరంగు నేపథ్యం. టెక్స్ట్ బోల్డ్‌లో కనిపిస్తుంది. |
| d | నలుపు ముందుభాగంతో ముదురు బూడిదరంగు నేపథ్యం. వచనం బోల్డ్‌లో కనిపించదు. |
| ఇ | నలుపు ముందుభాగంతో ఆరెంజ్ నేపథ్యం. స్వరాలు కోసం ఉపయోగించండి మరియు తక్కువగా ఉపయోగించండి. |
థీమ్‌ను వర్తింపజేయడానికి రెండు మార్గాలు:
డేటా-థీమ్ లక్షణాన్ని ఉపయోగించడం ద్వారా:
li> a href = "# home" data-icon = "home" data-theme = "b"> హోమ్ </ a> / li>
థీమ్‌ను సూచించే తరగతి లక్షణాన్ని ఉపయోగించడం ద్వారా:
వివరణ
- J క్వెరీ మొబైల్‌తో చేర్చబడిన ఐదు థీమ్‌లను ఉపయోగించడం ద్వారా, మీరు HTML మూలకాల కోసం డిఫాల్ట్ శైలులకు తగిన సర్దుబాట్లు చేయవచ్చు.
- మీరు మీ స్వంత CSS స్టైల్ షీట్‌ను j క్వెరీ మొబైల్ అప్లికేషన్‌తో ఉపయోగించగలిగినప్పటికీ, సాధ్యమైనప్పుడల్లా మీరు అలా చేయకుండా ఉండాలి.
దృష్టికోణం
గత కొన్ని సంవత్సరాలుగా మొబైల్ పరికరాల వాడకం ఒక్కసారిగా పెరిగింది. ఆ కారణంగా, ఈ పరికరాల నుండి ఉపయోగించడానికి సులభమైన వెబ్‌సైట్‌లను రూపొందించడం చాలా ముఖ్యమైనది. ఇది సాధారణంగా ప్రత్యేక వెబ్‌సైట్‌ను అభివృద్ధి చేయడం అని అర్ధం అయినప్పటికీ, ఇది ఇంటర్నెట్‌లో మీ ఉనికిని కొనసాగించడంలో కీలకమైన అంశం.
అదృష్టవశాత్తూ, j క్వెరీ మొబైల్ రావడంతో మొబైల్ వెబ్‌సైట్‌ను నిర్మించే పని చాలా సులభం అయింది. మొబైల్ వెబ్ పేజీలు శీర్షికలు, పేరాలు, లింకులు మరియు సూక్ష్మచిత్ర చిత్రాలను కలిగి ఉన్న స్టాటిక్ పేజీలకు పరిమితం చేయబడవు. J క్వెరీ మొబైల్‌తో, వెబ్ డెవలపర్లు ఇప్పుడు స్థానిక మొబైల్ అనువర్తనాల వలె కనిపించే మరియు అనుభూతి చెందే ఫీచర్-రిచ్ వెబ్‌సైట్‌లను నిర్మించవచ్చు.
