در این مقاله با یک مثال نحوه طراحی Responsive با jQuery Grid را به شما آموزش می دهیم.

مقدمه

 نحوه  طراحی Responsive با پلاگین jQuery Grid به وسیله ی gijgo.com را به دو روش متفاوت زیر به شما آموزش می دهیم.

1. CSS3 media queries

2. قابلیت های پلاگین

در ادامه توضیح مختصری درباره ی پلاگین jQuery Grid توسط gijgo.com می دهیم.

از آنجا که کتابخانه های دیگری که استفاده می شوند در مقایسه با پلاگین grid نسبتا محبوب هستند، بدین منظور در ادامه برخی از ویژگی های این پلاگین را شرح می دهیم.

- کنترل ارایه داده های جدولی خاص و ویژه

- کنترل جاوااسکریپت برای نمایش و دست کاری داده های جدولی روی وب

- Ajax را فعال می کند.

- با هر تکنولوژی سمت سرور به عنوان مثال ASP.Net،Node.js, JSP, PHP ، Rails,می تواند ادغام شود.

- از صفحه بندی، مرتب کردن، و منابع داده های سمت سرور و جاوا اسکریپت پشتیبانی می کند.

- ازjQuery UI  و Bootstrap پشتیبانی می کند.

- ابزار open source رایگان تحت لیسانس MIT

روش اول

پیاده سازی طراحی ریسپانسیو با CSS3 media queries

مزایای استفاده از این روش استفاده از native برای شبیه سازی مرورگرهای وب می باشد که این سریعتر از هر کد جاوا اسکریپت که این کار را انجام می دهد می باشد. نقاط ضعف این روش به شرح زیر می باشد.

- گزینه های محدود برای سفارشی سازی دارد.

- می توانید هنگام پنهان کردن و نمایش دادن دادن ستون براساس فضای موجود آن ها را کنترل کنید اما نمی توانید کد سفارشی جاوا اسکریپت به رویداد hiding و showing ستون ها اضافه کنید.

 ورژن 0.5, jQuery Grid  با gijgo.com ، شش تا CSS3 media queries  از پیش تعریف شده دارد که برای دست یابی به طراحی ریسپانسیو به شما کمک می کند.

-صفحه نمایش 320-وضوح صفحه 320px یا بیشتر باشد قابل رویت می باشد برای گوشی های هوشمند کوچک قدیمی قابل رویت نمی باشد.

-صفحه نمایش480-وضوح صفحه 480px یا بیشتر باشد قابل رویت می باشدبرای گوشی های هوشمند در حالت عمودی قابل رویت نمی باشد.

-صفحه نمایش640-وضوح صفحه 640px یا بیشتر باشد قابل رویت می باشد برای تبلت در حالت عمودی قابل رویت نمی باشد.

-صفحه نمایش800-وضوح صفحه 800px یا بیشتر باشد قابل رویت می باشد.

-صفحه نمایش960-وضوح صفحه 960px یا بیشتر باشد قابل رویت می باشد

-صفحه نمایش1120-وضوح صفحه 1120pxیا بیشتر باشد قابل رویت می باشدبرای بیشتر جدول ها قابل رویت نمی باشد.

می توانید اطلاعات بیشتری درباره وضوح صفحه نمایش دستگاه های مختلف از وب سایتmydevice.io بدست آورید.

اگر media queries از پیش تعریف شده کار نکرد می توانید  CSS3 media queries سفارشی تعریف کنید.

در مثال زیر تعریف CSS3 media query را می بینید که فقط ستون ها را در صفحه با وضوح بزرگتر از 1008px نمایش می دهد.

/* Hide the column by default */
@media only all {
    TABLE.gj-grid-table th.display-1008,
    TABLE.gj-grid-table td.display-1008 {
        display: none;
    }
}
/* Show at 1008px (63em x 16px) */
@media screen and (min-width: 63em) {
    TABLE.gj-grid-table th.display-1008,
    TABLE.gj-grid-table td.display-1008 {
        display: table-cell;
    }
}

در فایل "example-1-css3-media-queries.html" ضمیمه شده، پیاده سازی responsive grid با استفاده از ترکیب CSS3 media queries سفارشی و از پیش تعیین شده را خواهید دید.

روش دوم 

پیاده سازی طراحی ریسپانسیو با قابلیت های پلاگین

مزایای استفاده از این روش، قابلیت سفارشی سازی رفتارهای ریسپانسیو با کد جاوااسکریپت با استفاده از خصوصیات متفاوت پلاگین می باشد. نقاط ضعف این روش به شرح زیر می باشد.

- کندتر اجرا می شود

- المنت های HTML  رویداد resize را پشتیبانی نمی کند و پلاگین باید با استفاده از کدهای جاوااسکریپت تغییر عرض ستون ها را چک کند، به همین دلیل ممکن است تاخیر داشته باشیم.

ورژن 0.5, jQuery Grid  با gijgo.com تنظیمات پیکربندی زیر را دارد. متد و رویدادهایی که کمک می کند به یک طراحی ریسپانسیو دست پیدا کنید.

تنظیمات پیکربندی

-responsive: این تنظیم رفتار ریسپانسیو grid را فراهم می کند، زمانی که فضای کافی روی صفحه برای نمایش وجود ندارد برخی از ستون ها پنهان شود.

-column.minWidth: زمانی که فضای کافی در grid برای حداقل عرض ستون وجود ندارد، ستون پنهان می شود .

-colomn.priorit: اولویت ستون با ستون های دیگر در grid مقایسه می شود. ستون ها بر حسب اولویت مخفی می شوند.

-ShowHiddenColumnsAsDetails: ستون های پنهان شده به جزییات بخش ردیف اضافه می شوند.

resizeChecklnterval: در فاصله چند میلی ثانیه ای چک می کند که grid تغییر سایز داده یا خیر.

متدها

makeResponsive:براساس فضای موجود  grid را responsive می سازد. ستون ها را اگر فضا برای grid در حال گسترش است نشان می دهد و زمانی که فضا برای grid در حال کاهش است ستون ها را مخفی می کند.

رویدادها

-resize: زمانی که عرض grid تغییر کند این رویداد اجرا می شود.

ساده ترین راه برای رسیدن به رفتار ریسپانسیو با خصوصیات grid این است که تنظیمات ریسپانسیو را true قرار دهیم . ستون هایی که می خواهید مخفی شوند وقتی که فضای کافی در grid برای آن ها وجود ندارد را در اولویت قرار دهید. 

<table id="grid" data-ui-library="bootstrap">
    <thead>
        <tr>
            <th width="36">ID</th>
            <th>Name</th>
            <th data-field="PlaceOfBirth" 
            data-priority="1">Place Of Birth</th>
            <th data-field="DateOfBirth" 
            data-type="date" data-priority="2">Date Of Birth</th>
        </tr>
    </thead>
</table>
<script>
    data = [
        { "ID": 1, "Name": "Hristo Stoichkov", 
        "PlaceOfBirth": "Plovdiv, Bulgaria", 
        "DateOfBirth": "/Date(-122954400000)/" },
        { "ID": 2, "Name": 
        "Ronaldo Lu&iacute;s Naz&aacute;rio de Lima", 
        "PlaceOfBirth": "Rio de Janeiro, Brazil", 
        "DateOfBirth": "/Date(211842000000)/" },
        { "ID": 3, "Name": "David Platt", 
        "PlaceOfBirth": "Chadderton, Lancashire, England", 
        "DateOfBirth": "/Date(-112417200000)/" },
        { "ID": 4, "Name": "Manuel Neuer", 
        "PlaceOfBirth": "Gelsenkirchen, West Germany", 
        "DateOfBirth": "/Date(512258400000)/" },
        { "ID": 5, "Name": "James Rodr&iacute;guez", 
        "PlaceOfBirth": "C&uacute;cuta, Colombia", 
        "DateOfBirth": "/Date(679266000000)/" },
        { "ID": 6, "Name": "Dimitar Berbatov", 
        "PlaceOfBirth": "Blagoevgrad, Bulgaria", 
        "DateOfBirth": "/Date(349653600000)/" }
    ];
    $(document).ready(function () {
        $('#grid').grid({
            responsive: true,
            dataSource: data
        });
    });
</script>

برای این مثال فایل example-2-grid-responsive-plugin.html در ضمیمه برای نمونه قرار داده شده است. با jQuery grid با استفاده از gijgo.com می توانید مقادیر ستون های مخفی را در صفحه نمایش باریک تر در بخش جزییات ردیف با استفاده ازتنظیمات ShowHiddenColumnsAsDetails مشاهده کنید. تنها نیاز دارید detailTemplate تعریف کنید و  ShowHiddenColumnsAsDetails را True قرار دهید.همانطور که در کد زیر نشان داده شده  است.

<table id="grid" data-ui-library="bootstrap">
    <thead>
        <tr>
            <th width="36">ID</th>
            <th>Name</th>
            <th data-field="PlaceOfBirth" 
            data-min-width="200" data-priority="1">Place Of Birth</th>
            <th data-field="DateOfBirth" 
            data-type="date" data-min-width="200" data-priority="2">
		Date Of Birth</th>
        </tr>
    </thead>
</table>
<script>
    data = [
        { "ID": 1, "Name": "Hristo Stoichkov", 
        "PlaceOfBirth": "Plovdiv, Bulgaria", 
	"DateOfBirth": "/Date(-122954400000)/" },
        { "ID": 2, "Name": 
        "Ronaldo Lu&iacute;s Naz&aacute;rio de Lima", 
        "PlaceOfBirth": "Rio de Janeiro, Brazil", 
	"DateOfBirth": "/Date(211842000000)/" },
        { "ID": 3, "Name": "David Platt", 
        "PlaceOfBirth": "Chadderton, Lancashire, England", 
	"DateOfBirth": "/Date(-112417200000)/" },
        { "ID": 4, "Name": "Manuel Neuer", 
        "PlaceOfBirth": "Gelsenkirchen, West Germany", 
	"DateOfBirth": "/Date(512258400000)/" },
        { "ID": 5, "Name": "James Rodr&iacute;guez", 
        "PlaceOfBirth": "C&uacute;cuta, Colombia", 
	"DateOfBirth": "/Date(679266000000)/" },
        { "ID": 6, "Name": "Dimitar Berbatov", 
        "PlaceOfBirth": "Blagoevgrad, Bulgaria", 
	"DateOfBirth": "/Date(349653600000)/" }
    ];
    $(document).ready(function () {
        $('#grid').grid({
            responsive: true,
            showHiddenColumnsAsDetails: true,
            detailTemplate: '<div class="row"/>',
            dataSource: data
        });
    });
</script>

 برای این مثال فایل example-3-grid-responsive-plugin.html در ضمیمه برای نمونه قرار داده شده است.