میزبانی وب هاست
میزبانی هاست لینوکس و ویندوز در سرور های قدرتمند سه کشور ایران کانادا و آمریکا با پشتیبانی 24 ساعته
میزبانی وبثبت دامنه
ثبت دامنه های ملی کشور ایران و دامنه های بین المللی جهانی با پیشوند های ir , com , net , org , info , ws و ....
ثبت دامنهطراحی وب سایت
طراحی و برنامه نویسی حرفه ای وب سایت و سیستم های اتوماسیون اداری با قابلیت واکنش گرا (Responsive)
طراحی وبآموزش طراحی وب
برگزاری کلاس های آموزش برنامه نویسی و طراحی سایت در مازندران بصورت کاملا خصوصی
آموزش طراحی وبجداول واکنش گرا Responsive در وب با پلاگین jQuery ReStable
همیشه در طراحی وب سایت باید تمامی مخاطبان از جمله اون هایی که از Tablet و یا Mobile استفاده می کنند را در نظر گرفت اگر شما در طراحی Html صفحات خود از تگ Table برای جداول استفاده می کنید حتما بایستی یه آن ویژگی Viewport و یا Responsive بودن را بدهید که در سایر دستگاه ها مانند تبلت به خوبی به نمایش درباید.امروز برای شما یک پلاگین جی کوئری معرفی می کنیم که بدون هیچ زحمتی تنها با نوشتن یه خط کد می توایند جدول های موجود در وب سایت خود را واکنش گرا یا همان Responsive کنید :
۱) دانلود پلاگین جی کوئری Jquery ReStable و بارگذاری آن در بخش head
ابتدا این پلاگین را از صفحه Github آن دریافت کنید این پلاگین تنها شامل یک فایل javascript با نام jquery.restable.min.js که کم تر از چند کیلوبایت هست و یک فایل Css که با نام jquery.restable.min.css که دستورات Media Query برای واکنش گرا شدن در آن وجود دارد ابتدا این دو فایل را در بخش Head سایت خودمان بارگذاری می کینم :
۱ ۲ ۳ |
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="jquery.restable.min.js"></script> <link href="jquery.restable.min.css" rel="stylesheet" /> |
توجه داشته باشید که در خط اول ما آخرین ورژن کتابخانه تحت جاوا جی کوئری را از وب سایتش لینک کردیم در صورتی که در بخش های دیگر وب سایتتان از هم اننون از جی کوئری استفاده می کنید پس دیگر لازم نیست که خط اول را قرار دهید.
۲) ایجاد جدول در صفحه وب با تگ Table
حال یک جدول ساده در صفحه وب خود ایجاد می کنیم به کمک تگ های Table و Tr و Tdطبق معمول همیشه :
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ |
<table class="mytable"> <thead> <tr> <td>Period</td> <td>Full Board</td> <td>Half Board</td> <td>Bed and Breakfast</td> </tr> </thead> <tbody> <tr> <td>۰۱/۱۰/۱۲ - ۰۲/۱۰/۱۲</td> <td>۲۰ €</td> <td>۳۰ €</td> <td>۴۰ €</td> </tr> <tr> <td>۰۳/۱۰/۱۲ - ۰۴/۱۰/۱۲</td> <td>۴۰ €</td> <td>۵۰ €</td> <td>۶۰ €</td> </tr> <tr> <td>۰۵/۱۰/۱۲ - ۰۶/۱۰/۱۲</td> <td>۷۰ €</td> <td>۸۰ €</td> <td>۹۰ €</td> </tr> </tbody> </table> |
فقط توجه کنید که ما یک Class به خصوص به جدول خودمان دادیم به نام mytable.که برای Select کردن در جی کوئری از آن استفاده کینیم.
۳) Select کردن Class جدول برای واکنش گرا کردن
در این مرحله باید به وسیله ی جی کوئری به جدول مان دستور دهیم که قابلیت Responsive بودن را پیدا کنید که بدین صورت عمل می کنیم :
۱ ۲ ۳ ۴ |
$('.mytable').ReStable({ rowHeaders: true, // Table has row headers? maxWidth: ۴۸۰ // Size to which the table become responsive }); |
ویژگی MaxWidth که برای مقادیر مختلف دستگاه ها استفاده می شود یعنی برای دستگاه های که عرض آنها کم تر ۴۸۰ باشد قابلیت Responsive را اجرا کن.

بانک ملی ایران
شماره 16 رقمی کارت : 3479 - 0689 - 9918 - 6037
به نام مهرشاد درزی سوته
دوره ی های آموزشی طراحی وب سایت در مازندران
جهت اطلاعات بیشتر اینجا کلیک کنید ...