میزبانی وب هاست

میزبانی هاست لینوکس و ویندوز در سرور های قدرتمند سه کشور ایران کانادا و آمریکا با پشتیبانی 24 ساعته

میزبانی وب

ثبت دامنه

ثبت دامنه های ملی کشور ایران و دامنه های بین المللی جهانی با پیشوند های ir , com , net , org , info , ws و ....

ثبت دامنه

طراحی وب سایت

طراحی و برنامه نویسی حرفه ای وب سایت و سیستم های اتوماسیون اداری با قابلیت واکنش گرا (Responsive)

طراحی وب

آموزش طراحی وب

برگزاری کلاس های آموزش برنامه نویسی و طراحی سایت در مازندران بصورت کاملا خصوصی

آموزش طراحی وب

جداول واکنش گرا Responsive در وب با پلاگین jQuery ReStable

همیشه در طراحی وب سایت باید تمامی مخاطبان از جمله اون هایی که از Tablet و یا Mobile استفاده می کنند را در نظر گرفت اگر شما در طراحی Html صفحات خود از تگ Table برای جداول استفاده می کنید حتما بایستی یه آن ویژگی Viewport و یا Responsive بودن را بدهید که در سایر دستگاه ها مانند تبلت به خوبی به نمایش درباید.امروز برای شما یک پلاگین جی کوئری معرفی می کنیم که بدون هیچ زحمتی تنها با نوشتن یه خط کد می توایند جدول های موجود در وب سایت خود را واکنش گرا یا همان Responsive کنید :

responsive table with jQuery ReStable

۱) دانلود پلاگین جی کوئری 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>01/10/12 - 02/10/12</td>
        <td>20 €</td>
        <td>30 €</td>
        <td>40 €</td>
    </tr>
    <tr>
        <td>03/10/12 - 04/10/12</td>
        <td>40 €</td>
        <td>50 €</td>
        <td>60 €</td>
    </tr>
    <tr>
        <td>05/10/12 - 06/10/12</td>
        <td>70 €</td>
        <td>80 €</td>
        <td>90 €</td>
    </tr>
</tbody>
</table>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

<thead>

<tr>

<td>Period</td>

<td>Full Board</td>

<td>Half Board</td>

<td>Bed and Breakfast</td>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

فقط توجه کنید که ما یک Class به خصوص به جدول خودمان دادیم به نام mytable.که برای Select کردن در جی کوئری از آن استفاده کینیم.

۳) Select کردن Class جدول برای واکنش گرا کردن

در این مرحله باید به وسیله ی جی کوئری به جدول مان دستور دهیم که قابلیت Responsive بودن را پیدا کنید که بدین صورت عمل می کنیم :

$('.mytable').ReStable({
    rowHeaders: true, // Table has row headers?
    maxWidth: 480 // Size to which the table become responsive
});

$('.mytable').ReStable({

rowHeaders: true, // Table has row headers?

maxWidth: ۴۸۰ // Size to which the table become responsive

});

ویژگی MaxWidth که برای مقادیر مختلف دستگاه ها استفاده می شود یعنی برای دستگاه های که عرض آنها کم تر ۴۸۰ باشد قابلیت Responsive را اجرا کن.

این هم نمونه کار پایانی

تاریخ و زمان انتشار : ۷ اسفند, ۱۳۹۲

مرتبط با موضوع :

آدرس : مازندران - فریدونکنار - میدان درنا - خیابان جمکران (خط سوته)

تلفن تماس : ۹۲۳۸ ۳۵۶۶ ۰۱۱[ ساعات اداری : شنبه تا چهارشنبه | 9 صبح تا 4 بعد از ظهر ]

پست الکترونیک :info [at] Mazandaranweb.ir

بانک ملی ایران

شماره حساب : 0216867544008
شماره 16 رقمی کارت : 3479 - 0689 - 9918 - 6037
به نام مهرشاد درزی سوته

دوره ی های آموزشی طراحی وب سایت در مازندران

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

طراحی وب سایت ریسپانسیو واکنش گرا responsive با فریم ورک بوت استرپ