جهت ورود به تالار گفتمان سایت کلیک کنید


آموزش اضافه نمودن قابلیت دکمه نسخه شبانه به سایت با جی کوئری

در این پست از سایت اسکریپت دات کام قصد دارم یک کار بسیار خلاقانه و جدید رو براتون آموزش بدم .

ایده ی این کار از خودم هست و تقریبا هر چی در نت گشتم که ببینم کسی همچین کاری رو کرده , چیزی پیدا نکردم .

یکی از قابلیت هایی که یک وب سایت میتواند داشته باشد این است که در شب , به رنگ های تیره تبدیل شود تا در هنگام خواندن مطالب سایت, چشم اذیت نشود .

به همین خاطر کدی رو با استفاده از جی کوئری نوشتم که دکمه ای به سایت اضافه میکند که کاربر با کلیک بر روی آن , سایت را به صورت رنگ های تیره یا تقریبا میشه گفت سیاه و سفید می بیند .

آموزش اضافه نمودن قابلیت دکمه نسخه شبانه

 

و اما آموزش :

برای انجام این کار کافیست ابتدا فایل جی کوئری را از سایت 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>

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

پخش اختصاصی

آموزش و ایده از : وحید مجیدی

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

13 پاسخ به “آموزش اضافه نمودن قابلیت دکمه نسخه شبانه به سایت با جی کوئری”

  1. ehsan گفت:

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

    • وحید مجیدی گفت:

      دوست عزیزم با یک if در پی اچ پی میتوان این کارو کرد اما طبیعتا خیلی کار خوبی نخواهد بود و چون مخاطب زیادی نداره نمیتونم انجام بدم

  2. محسن مرادی گفت:

    سلام
    قصد دارم قالبم رو به صورت رایگان انتشار بدم . خوشحال میشم قالبمو برای دانلود بذارید

    قالب سامانه طراحی فقط گرافیک به صورت html
    دمو : justgraphic.ir
    لینک دانلود:
    http://up.vbiran.ir/uploads/38943141996502845185_newtheme1.zip
    برخی از ویژگی ها :
    طرح فلت
    سرعت بالا
    استفاده شده از css3 – html5 – livicon
    حجم بسیار کم
    و….

    • وحید مجیدی گفت:

      با سلام . دوست گلم متاسفانه نمیتونم پست های غیر اختصاصی بزارم

      عذر میخوام از شما

  3. ایمان فخار گفت:

    به عنوان یه پیشنهاد می شه با تغییر کلاس html کار رو انجام داد و از تابع toggleClass استفاده کرد که جابجایی هم مشکلی نداشته باشه

    <style>
    .nigthmode,.nigthmode * {
    background-color:#666;
    color:#fff;
    border-color:#fff;
    outline-color:#fff;
    }
    .nigthmode body,html.nigthmode{
    background:none fixed #333;
    }
    .nigthmode table 
    {
    border:1px solid #fff;
    border-collapse:collapse}
    .nigthmode tr,..nigthmode td {
    border:1px solid #fff
    }
    #vms-night {
    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
    }
    </style>
    <script>
    $(document).ready(function() {
    $("body").append('<button id="vms-night">نسخه شب</button>');
    $("button#vms-night").click(function() {
    $("html").toggleClass("nightmode");
    });
    });
    </script>
    
    • وحید مجیدی گفت:

      دوست عزیزم اینی که شما فرمودید جواب نمیده .
      این متد یک کلاس را اضافه یا حذف میکند . ما میخواهیم که سلکتور ستاره را تغییر دهیم .
      کد شما به هیچ عنوان جواب نمیده

        • وحید مجیدی گفت:

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

          ممنونم دوست عزیزم

  4. dashesi گفت:

    ممنون از راهنمایی تون

  5. dashesi گفت:

    بدون رفرش باشه بهتر میشه همون دکمه رو مثلا بعد کلیک کنیم به حالت عادی دربیاد.

    شرمنده پستام 3 تا شد :D

    • وحید مجیدی گفت:

      چون این کدنویسی برای تمام سایت ها کدنویسی شده , نمیتوان حالت عادی براش گذشت .

      اگر برای یک سایت بود , میشد اما چون همگانی هست نمیشه

  6. dashesi گفت:

    بعد اینکه من این عملیات رو انجام دادم به صورت کلی کامل بود.
    ولی دکمه بازگشت به حالت عادی نداره :D

  7. dashesi گفت:

    جناب وحید : لینک مستقیم از خود سایت Jquery.com موجود میباشد که دیگر ما چیزی دانلود نکنیم لینک کنیم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *