jQuery Mobile گرید
- پچھلے پیج jQuery Mobile فولڈر
- آئندہ پیج jQuery Mobile لسٹ ویو
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>Some Text</span></div> <div class="ui-block-b"><span>Some Text</span></div> <div class="ui-block-c"><span>Some Text</span></div> <div class="ui-block-a"><span>Some Text</span></div> <div class="ui-block-b"><span>Some Text</span></div> <div class="ui-block-a"><span>Some Text</span></div> </div>
- پچھلے پیج jQuery Mobile فولڈر
- آئندہ پیج jQuery Mobile لسٹ ویو