در این آموزش jQuery , قصد داریم به شما یک مثال از تغییر فایل CSS بر اساس اندازه پنجره (windows size) صفحه نمایش کاربر بصورت داینامیک را نشان بدیم.
در این کد از مثال, ما دو فایل CSS داریم. یکی از آنها برای وب و دسکتاپ و دیگری برای نمایش در موبایل است.
ما یک تابع jQuery برای تغییر فایل CSS بر اساس اندازه پنجره نیز داریم. این تابع با لود صفحه اجرا می شود تا CSS مورد نظر را طبق اندازه پنجره لود کند.
همچنین این تابع براساس رویداد resize نیز اجرا می شود.
کد HTML شامل دو ستون
در آموزش قبل نحوه ساخت ستون های هم اندازه بصورت داینامیک را دیدم. ما از همان قالب برای تغییر فایل CSS استفاده می کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="outer-div"> <div id="inner-div"> <H2>Switch CSS On Window Resize</H2> </div> <div id="menu-div"> <H2>Tags</H2> <a class="demo-tag">Fluid</a> <a class="demo-tag">Stylesheet</a> <a class="demo-tag">Resize</a> <a class="demo-tag">Demo</a> <a class="demo-tag">Examples</a> </div> </div> |
تابع جی کوئری برای تغییر فایل CSS
این کد jQuery شامل یک تابع برای تغییر فایل های CSS بر اساس صفحه نمایش است. این تابع با لود صفحه و همچنین اجرا شدن رویداد resize , اجرا می شود.
هنگام فراخوانی تابع, ما سایر پنجره را بهش پاس میدیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> function switchCSS(windowsize) { if (windowsize > 800) { $("#switchable").attr("href", "web.css"); } else { $("#switchable").attr("href", "mobile.css"); } } $(document).ready(function() { switchCSS($(this).width()); $(window).resize(function() { switchCSS($(this).width()); }); }); </script> |
امیدوارم از آموزش تغییر فایل CSS بر اساس اندازه پنجره توسط jQuery نهایت استفاده را برده باشید .
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید
