سانچو:Sticky header/دستاويز
 | هي سانچي جي دستاويزڪاري جو ذيلي صفحو آهي، جيڪو سانچي جي دستاويزڪاري جي ذيلي صفحي سان ڳنڍيل آهي۔ (سانچو بابت وڌيڪ تفصيل لاءِ ان جو اصل صفحو ڏسو) جنهن ۾ استعمال جو طريقو، زمرا ، بين الوڪي تعلق ۽ ٻيو مواد شامل آهي جيڪو خود سانچو ۾ شامل ناهي۔ |
 | This template uses TemplateStyles: |
هي سانچو جدول جي ڪالمن جي سرخين کي اسڪرين جي مٿئين حصي سان چنبڙي (sticky) رکڻ لاءِ استعمال ٿيندو آهي جڏهن جدول جي ڊيٽا کي مٿي يا هيٺ اسڪرول ڪيو وڃي. اهو عام طور تي ڊگهن جدولن ۾ استعمال ٿيندو آهي، جتي ڪالمن جون سرخيون اسڪرول ڪرڻ دوران وسري وڃڻ جو امڪان هوندو آهي.
استعمال
[سنواريو]جدول کان مٿي {{sticky header}} شامل ڪيو ۽ جدول جي شروعاتي وڪي ٽيڪسٽ ۾ هيٺ ڏنل ڪلاسن مان هڪ شامل ڪريو.
| ڪلاس | خلاصو |
|---|---|
| sticky-header | پهرين سرخي واري قطار کي مٿي چنبڙيل (sticky) بڻائي ٿو. |
| sticky-header-multi | sortable ضروري آهي. گهڻيون سرخي واريون قطارون مٿي چنبڙيل بڻائي ٿو. سرخي ڪالمن کي انفرادي طور unsortable طور پڻ مقرر ڪري سگهجي ٿو. sorttop ڪلاس سان گڏ استعمال کان پاسو ڪيو، ڇاڪاڻتہ ترتيب ڏيڻ کان پوءِ اهو پڻ sticky ٿي ويندو. اهڙيون سرخيون sticky نه بڻايو جيڪي سڄي جدول لاءِ نه هجن (مثال: سيڪشن سرخي واري قطار). اهڙيون تمام ڊگهيون سرخيون پڻ sticky نه بڻايو جيڪي ننڍين اسڪرينن تي تمام گهڻي ڊيٽا کي ڍڪي سگهن (مثال: موبائل لينڊ اسڪيپ). |
هڪ sticky سرخي واري قطار
[سنواريو]sticky-header ڪلاس استعمال ڪري پهرين سرخي واري قطار کي مٿي sticky بڻايو وڃي ٿو. sortable ضروري نه آهي.
| رنگ | A | B | C |
|---|---|---|---|
| وڌ ۾ وڌ | 10 | 11 | 12 |
| ڳاڙهو | 1 | 2 | 3 |
| سائي | 4 | 5 | 6 |
| سونهن | 7 | 8 | 9 |
| نيرو | 10 | 11 | 12 |
| ڪل | 22 | 26 | 30 |
{{sticky header}}
{| class="wikitable sortable sticky-header"
|+ ڪيپشن
|-
! رنگ !! A !! B !! C
|- class=sorttop
| '''وڌ ۾ وڌ''' || 10 || 11 || 12
|-
| ڳاڙهو || 1 || 2 || 3
|-
| سائي || 4 || 5 || 6
|-
| سونهن || 7 || 8 || 9
|-
| نيرو || 10 || 11 || 12
|- class=sortbottom
| '''ڪل''' || 22 || 26 || 30
|}
گهڻيون sticky سرخي واريون قطارون
[سنواريو]sticky-header-multi ڪلاس استعمال ڪري گهڻيون سرخي واريون قطارون مٿي sticky بڻايون وڃن ٿيون. sortable لازمي آهي، ڇاڪاڻتہ اهو ئي طريقو آهي جيڪو لڳاتار سرخي واري قطارن کي <thead> عنصر ڏانهن منتقل ڪري ٿو. سرخي ڪالمن کي انفرادي طور unsortable طور پڻ مقرر ڪري سگهجي ٿو. جيڪڏهن JavaScript بند هجي ته sortable ۽ هي طريقو ڪم نه ڪندو.
sorttop ڪلاس استعمال ڪرڻ کان پاسو ڪريو، ڇاڪاڻتہ sortable ترتيب ڏيڻ کان پوءِ انهن قطارن کي پڻ <thead> عنصر ۾ منتقل ڪري ڇڏيندو، جنهن ڪري اهي پڻ sticky ٿي وينديون. هڪ حل اهو ٿي سگهي ٿو ته انهن کي هيٺ منتقل ڪيو وڃي ۽ sortbottom ڪلاس استعمال ڪيو وڃي.
| رنگ | ڊيٽا | ||
|---|---|---|---|
| A | B | C | |
| ڳاڙهو | 1 | 2 | 3 |
| سائي | 4 | 5 | 6 |
| سونهن | 7 | 8 | 9 |
| نيرو | 10 | 11 | 12 |
| وڌ ۾ وڌ | 10 | 11 | 12 |
| ڪل | 22 | 26 | 30 |
{{sticky header}}
{| class="wikitable sortable sticky-header-multi"
|+ ڪيپشن
|-
! rowspan=2 | رنگ
! colspan=3 | ڊيٽا
|-
! A !! B !! C
|-
| ڳاڙهو || 1 || 2 || 3
|-
| سائي || 4 || 5 || 6
|-
| سونهن || 7 || 8 || 9
|-
| نيرو || 10 || 11 || 12
|- class=sortbottom
| '''وڌ ۾ وڌ''' || 10 || 11 || 12
|- class=sortbottom
| '''ڪل''' || 22 || 26 || 30
|}
اهڙيون سرخي واريون قطارون جيڪي پوري جدول لاءِ نه هجن
[سنواريو]لڳاتار ڪالمن جي سرخي واريون قطارون sticky ٿي وينديون آهن، تنهنڪري ڪالمن جي سرخين کان پوءِ اهڙي سرخي واري قطار شامل ڪرڻ کان پاسو ڪيو جيڪا سڄي جدول لاءِ لاڳو نه هجي، جهڙوڪ ڪو سيڪشن سرخي جيڪو رڳو بصري ورهاست لاءِ هجي.
هڪ حل اهو ٿي سگهي ٿو ته هر سيڪشن کي الڳ ڪالم يا الڳ جدول ۾ منتقل ڪيو وڃي، جنهن سان رسائي جا مسئلا پڻ گهٽ ٿيندا جيئن ۾ بيان ڪيو ويو آهي.
ٻيو حل اهو ٿي سگهي ٿو ته آخري ڪالمن جي سرخي واري قطار ۽ پهرين سيڪشن سرخي واري قطار جي وچ ۾ خالي ڊيٽا واري قطار شامل ڪئي وڃي (| colspan=4 |) ته جيئن سيڪشن سرخي sticky نه ٿئي.
| رنگ | ڊيٽا | ||
|---|---|---|---|
| A | B | C | |
| سيڪشن 1 | |||
| ڳاڙهو | 1 | 2 | 3 |
| سائي | 4 | 5 | 6 |
| سيڪشن 2 | |||
| سونهن | 7 | 8 | 9 |
| نيرو | 10 | 11 | 12 |
{{sticky header}}
{| class="wikitable sortable sticky-header-multi"
|+ ڪيپشن
|-
! rowspan=2 | رنگ
! colspan=3 | ڊيٽا
|-
! A !! B !! C
|-
| colspan=4 |
|-
! colspan=4 | سيڪشن 1
|-
| ڳاڙهو || 1 || 2 || 3
|-
| سائي || 4 || 5 || 6
|-
! colspan=4 | سيڪشن 2
|-
| سونهن || 7 || 8 || 9
|-
| نيرو || 10 || 11 || 12
|}
تمام ڊگهيون سرخي واريون قطارون
[سنواريو]اهڙيون تمام ڊگهيون سرخي واريون قطارون استعمال ڪرڻ کان پاسو ڪيو جيڪي sticky ٿيڻ کان پوءِ ننڍين موبائل اسڪرينن تي گهڻي ڊيٽا کي ڍڪي ڇڏين، خاص طور تي لينڊ اسڪيپ رخ ۾. ڪجهه حل هي ٿي سگهن ٿا: سرخي جو ڪجهه متن جدول جي ڪيپشن ڏانهن منتقل ڪرڻ، سرخي جو متن مختصر ڪرڻ، سرخين ۾ لائين بريڪ (<br>
ڄاتل مسئلا
[سنواريو]هي خصوصيت هيٺين برائوزرن ۾ آزمائي وئي آهي: Windows 10، Windows 11، iOS 17 (iPhone SE (2nd generation))، ۽ Android 14 (Samsung Galaxy S21).
- اينڊرائيڊ فونن تي جيڪڏهن گهٽ ۾ گهٽ هڪ جدول اسڪرين کان ويڪرو هجي ته جدول جون سرخيون sticky نه ٿينديون. اهڙي حالت ۾ جدول کي افقي اسڪرول ڪرڻ بدران سڄي صفحي کي افقي اسڪرول ڪرڻو پوندو. زوم آئوٽ ڪرڻ سان سرخيون sticky ٿي سگهن ٿيون، پر متن ننڍو ٿي ويندو. عارضي حل طور لينڊ اسڪيپ رخ ۾ ڏسڻ وڌيڪ مناسب هوندو.