آموزش اضافه نمودن قابلیت دکمه نسخه شبانه به سایت با جی کوئری
در این پست از سایت اسکریپت دات کام قصد دارم یک کار بسیار خلاقانه و جدید رو براتون آموزش بدم .
ایده ی این کار از خودم هست و تقریبا هر چی در نت گشتم که ببینم کسی همچین کاری رو کرده , چیزی پیدا نکردم .
یکی از قابلیت هایی که یک وب سایت میتواند داشته باشد این است که در شب , به رنگ های تیره تبدیل شود تا در هنگام خواندن مطالب سایت, چشم اذیت نشود .
به همین خاطر کدی رو با استفاده از جی کوئری نوشتم که دکمه ای به سایت اضافه میکند که کاربر با کلیک بر روی آن , سایت را به صورت رنگ های تیره یا تقریبا میشه گفت سیاه و سفید می بیند .
و اما آموزش :
برای انجام این کار کافیست ابتدا فایل جی کوئری را از سایت Jquery.com دانلود کرده و سپس به سایت خود لینک کرده و آن را فراخوانی کنید ( داخل تگ head ) .
به عنوان مثال :
<script src="فایل دانلود شده از سایت جی کوئری" type="text/javascript"></script>
حال کافیست کد زیر را در سایت خود قرار دهید . ( ترجیها در داخل همان تگ head )
توجه : اگر از وردپرس استفاده میکنید , در داخل فایل header.php قرار دهید .
<script> $(document).ready(function() { $("body").append('<button id="vms-night">نسخه شب</button>'); $("button#vms-night").attr("style","position:fixed;top:10px;left:10px;width:80px;height:30px;background-color:#666;border:1px solid #fff;color:#fff;font-family:tahoma;font-size:13px"); $("button#vms-night").click(function() { $("*").css({"background-color":"#666","color":"#fff","border-color":"#fff","outline-color":"#fff"}); $("body,html").css("background","none fixed #333 "); $("table").css({"border":"1px solid #fff","border-collapse":"collapse"}); $("tr,td").css("border","1px solid #fff"); alert("جهت بازگشت به حالت قبل , صفحه را رفرش نمایید"); $(this).fadeOut(); }); }); </script>
نکته بسیار مهم : کد بالا قطعا نواقصی دارد که خوشحال میشم پس از نصب بر روی سایت خود , مشکلات احتمالی را در قسمت کامنت ها گزارش دهید تا بررسی شود .
پخش اختصاصی
آموزش و ایده از : وحید مجیدی
با سلام
اگه میشه به صورت خودکار درش بیارید
که در هنگام شب خودش خودکار تغییر کنه و در روز هم همون حالت عادی باشه
دوست عزیزم با یک if در پی اچ پی میتوان این کارو کرد اما طبیعتا خیلی کار خوبی نخواهد بود و چون مخاطب زیادی نداره نمیتونم انجام بدم
سلام
قصد دارم قالبم رو به صورت رایگان انتشار بدم . خوشحال میشم قالبمو برای دانلود بذارید
قالب سامانه طراحی فقط گرافیک به صورت html
دمو : justgraphic.ir
لینک دانلود:
http://up.vbiran.ir/uploads/38943141996502845185_newtheme1.zip
برخی از ویژگی ها :
طرح فلت
سرعت بالا
استفاده شده از css3 – html5 – livicon
حجم بسیار کم
و….
با سلام . دوست گلم متاسفانه نمیتونم پست های غیر اختصاصی بزارم
عذر میخوام از شما
به عنوان یه پیشنهاد می شه با تغییر کلاس html کار رو انجام داد و از تابع toggleClass استفاده کرد که جابجایی هم مشکلی نداشته باشه
دوست عزیزم اینی که شما فرمودید جواب نمیده .
این متد یک کلاس را اضافه یا حذف میکند . ما میخواهیم که سلکتور ستاره را تغییر دهیم .
کد شما به هیچ عنوان جواب نمیده
http://jsfiddle.net/fakhar/L3f5wsou/
اینی که نوشتین جواب میده , فقط با بعضی از پلاگین های نوشتاری وردپرس مشکل داره . در ضمن مثلا خاصیت های border رو به همه ی تگ ها میده , در صورتی که یه کار بیهودس . اما در کل خیلی خوب بود
ممنونم دوست عزیزم
ممنون از راهنمایی تون
بدون رفرش باشه بهتر میشه همون دکمه رو مثلا بعد کلیک کنیم به حالت عادی دربیاد.
شرمنده پستام 3 تا شد :D
چون این کدنویسی برای تمام سایت ها کدنویسی شده , نمیتوان حالت عادی براش گذشت .
اگر برای یک سایت بود , میشد اما چون همگانی هست نمیشه
بعد اینکه من این عملیات رو انجام دادم به صورت کلی کامل بود.
ولی دکمه بازگشت به حالت عادی نداره :D
جناب وحید : لینک مستقیم از خود سایت Jquery.com موجود میباشد که دیگر ما چیزی دانلود نکنیم لینک کنیم