జెక్కీ మొబైల్ గ్రిడ్
- ముందస్తు పేజీ జెక్కీ మొబైల్ కొల్పించబడిన పేజీ
- తదుపరి పేజీ జెక్కీ మొబైల్ లిస్ట్ వీక్షణ
jQuery Mobile అడ్జస్టబుల్ గ్రిడ్
jQuery Mobile క్లాస్స్ ఆధారిత గరిష్ట అంతర్భాగం గ్రిడ్ ప్లాన్ స్పూర్ట్ అందిస్తుంది. అయితే, సాధారణంగా మొబైల్ పరికరాల్లో గరిష్ట అంతర్భాగం గ్రిడ్ ఉపయోగించడానికి నిర్ణయించబడదని ప్రతిపాదించబడింది, కారణం మొబైల్ పరికరాల స్క్రీన్ వెడల్పు పరిమితి ఉంది.
కానీ కొన్నిసార్లు మీరు చిన్న అంతర్భాగాలను స్థానం చేయడానికి అవసరం, ఉదాహరణకు బటన్లు లేదా నేవిగేషన్ బార్, లాక్షన్ వంటివి వంటివి మరియు పట్టికలో అనుకూలంగా సరిహద్దులను సరిహద్దులను సరిహద్దులను ఉంచడానికి కలిగి ఉంటాయి. ఈ సమయంలో గరిష్ట అంతర్భాగం గ్రిడ్ ఉపయోగపడుతుంది.
గ్రిడ్ లో గరిష్ట అంతర్భాగాలు సమాన వెడల్పు కలిగి ఉంటాయి (మొత్తం వెడల్పు 100%), కోతలు, బ్యాక్గ్రౌండ్, మెరుగుదల లేదా పైన మెరుగుదల లేవు.
ఉపయోగించదగిన గ్రిడ్ క్లాస్ నాలుగు రకాలు ఉన్నాయి:
| గ్రిడ్ క్లాస్ | గరిష్ట అంతర్భాగం | గరిష్ట అంతర్భాగం వెడల్పు | కొరకు | ప్రామాణిక |
|---|---|---|---|---|
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | పరీక్ష |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | పరీక్ష |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | పరీక్ష |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | పరీక్ష |
సూచన:గరిష్ట అంతర్భాగాల నిర్వహణలో ఉన్న గరిష్ట అంతర్భాగాలను నిర్వహించడానికి గరిష్ట అంతర్భాగాల క్లాస్ ui-block-a|b|c|d|e ను సెట్ చేయవచ్చు. ఈ గరిష్ట అంతర్భాగాలు క్రమంగా సరిహద్దులను ఫ్లోట్ చేస్తాయి.
ప్రామాణిక 1: ui-grid-a క్లాస్ (రెండు గరిష్ట అంతర్భాగాలు ఉన్న గ్రిడ్) కొరకు మూడు ఉపకరణాలను నిర్ధారించండి ui-block-a మరియు ui-block-b.
ప్రామాణిక 2: ui-grid-b క్లాస్ (మూడు గరిష్ట అంతర్భాగాలు ఉన్న గ్రిడ్) కొరకు మూడు ఉపకరణాలను జోడించండి ui-block-a, ui-block-b మరియు ui-block-c.
గ్రిడ్ రూపాంతరం
CSS ఉపయోగించి కులాలను రూపాంతరం చేయవచ్చు:
ప్రామాణిక
<style>
.ui-block-a,,
.ui-block-b,,
.ui-block-c
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
మీరు రూపాంతరాలు చేయడానికి రూపాంతర శైలిని ఉపయోగించవచ్చు:
<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>
బహుళ పంక్తులు
పంక్తులు లో అనేక పంక్తులను చేర్చడం కూడా సాధ్యం.
అన్నాటికీ పేర్కొనడం:ui-block-a-class ఎప్పటికీ కొత్త పంక్తిని సృష్టిస్తుంది:
ప్రామాణిక
<div class="ui-grid-b"> <div class="ui-block-a"><span>కొన్ని వచనాలు</span></div> <div class="ui-block-b"><span>కొన్ని వచనాలు</span></div>Some Text<div class="ui-block-a"><span>కొన్ని వచనాలు</span></div> <div class="ui-block-b"><span>కొన్ని వచనాలు</span></div> <div class="ui-block-a"><span>కొన్ని వచనాలు</span></div> </div>
- ముందస్తు పేజీ జెక్కీ మొబైల్ కొల్పించబడిన పేజీ
- తదుపరి పేజీ జెక్కీ మొబైల్ లిస్ట్ వీక్షణ
