آموزش جی کوئری – اسکریپت دات کام https://www.xn--mgbguh09aqiwi.com اسکریپت دات کام Tue, 19 Jul 2016 20:24:47 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.14 آموزش اضافه نمودن قابلیت دکمه نسخه شبانه به سایت با جی کوئری https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%82%d8%a7%d8%a8%d9%84%db%8c%d8%aa-%d8%af%da%a9%d9%85%d9%87-%d9%86%d8%b3%d8%ae%d9%87-%d8%b4%d8%a8%d8%a7%d9%86%d9%87-%d8%af%d8%b1-%d8%b3%d8%a7%db%8c%d8%aa.html https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%82%d8%a7%d8%a8%d9%84%db%8c%d8%aa-%d8%af%da%a9%d9%85%d9%87-%d9%86%d8%b3%d8%ae%d9%87-%d8%b4%d8%a8%d8%a7%d9%86%d9%87-%d8%af%d8%b1-%d8%b3%d8%a7%db%8c%d8%aa.html#comments Sun, 28 Dec 2014 22:46:09 +0000 http://xn--mgbguh09aqiwi.com/?p=3220 در این پست از سایت اسکریپت دات کام قصد دارم یک کار بسیار خلاقانه و جدید رو براتون آموزش بدم .

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

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

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

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

 

و اما آموزش :

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

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

پخش اختصاصی

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

]]> https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%82%d8%a7%d8%a8%d9%84%db%8c%d8%aa-%d8%af%da%a9%d9%85%d9%87-%d9%86%d8%b3%d8%ae%d9%87-%d8%b4%d8%a8%d8%a7%d9%86%d9%87-%d8%af%d8%b1-%d8%b3%d8%a7%db%8c%d8%aa.html/feed 13 دانلود پلاگین جی کوئری زوم بر روی تصاویر با 3 افکت زیبا + آموزش کامل و ساده https://www.xn--mgbguh09aqiwi.com/%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%b2%d9%88%d9%85-%d8%a8%d8%b1-%d8%b1%d9%88%db%8c-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1.html https://www.xn--mgbguh09aqiwi.com/%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%b2%d9%88%d9%85-%d8%a8%d8%b1-%d8%b1%d9%88%db%8c-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1.html#comments Sat, 22 Mar 2014 19:01:50 +0000 http://xn--mgbguh09aqiwi.com/?p=1214 در ادامه آموزش های زبان Jquery , تصمیم گرفتم یک پلاگین بسیار حرفه ای و زیبا که این روز ها در سایت های زیادی از آن استفاده میود را در اختیار شما عزیزان قرار دهم .

این پلاگین که elevateZoom نام دارد , پلاگینی بسیار حرفه ای برای زوم کردن اتوماتیک در حالت Hover بر روی تصاویر یک وب سایت میباشد .

با استفاده از این پلاگین , دیگر نیازی به کلیک بر روی تصویر مورد نظر برای بزرگنمایی ندارید و فقط کافیست موس بر روی تصویر تغییر مکان دهد تا به صورت یک ذره بین , عمل بزرگ نمایی انجام شود .

این پلاگین دارای 3 افکت زیبا برای پیمایش روی تصاویر می باشد .

آموزش :

در ابتدا فایل های مورد نیاز رو از اینجا دانلود نمایید و سپس در روت سایت خود آپلود نمایید .

توجه فرمایید که تمامی آدرس ها به صورت پیش فرض برای قسمت روت ( root ) اصلی سایت میباشد و طبیعتا برای استفاده در پوشه ای خاص , باید آدرس دهی ها توسط شما عوض شوند .

حال در بالای صفحه ی خود و در بین دو تگ <head> و <head/> سایت خود , کد های زیر را قرار دهید .

<script src='js/jquery.js'></script>
<script src='js/jquery.elevatezoom.js'></script>

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

<img class="zoom" src="آدرس عکس کوچک" data-zoom-image="آدرس عکس بزرگ"/>

 توجه فرمایید که حتما باید عکس ها شبیه هم و فقط در دو اندازه کوچک و بزرگ باشند . اینکه چه اندازه ای باشند , دست خود شما میباشد و هر اندازه ای که بخواهید میتونید استفاده کنید .

برای مثال در دمویی که قرار داده شده , عکس کوچک در اندازه ( 250*400 ) و عکس بزرگ در اندازه ( 800*1280 ) می باشد . ( صرفا جهت اطلاع )

حال کافیست برای انجام هر افکت از 3 افکت قرار داده شده , تکه کد مربوط به اون رو در آخر کد html , یعنی قبل از دو تگ <html/> و <body/> قرار دهید .

برای افکت زوم در صفحه ای جدید ( با قابلیت زوم اسکرول ) :

<script>
$(".zoom").elevateZoom({
	zoomWindowFadeIn: 500,
	zoomWindowFadeOut: 500,
	lensFadeIn: 500,
	lensFadeOut: 500,
        scrollZoom : true
});
</script>

 برای افکت زوم داخلی :

<script>
$(".zoom").elevateZoom({
        zoomType: "inner",
        cursor: "crosshair",
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500,
        scrollZoom : true
});
</script>

 و برای افکت زوم با استایل لنز :

$(".zoom").elevateZoom({
        zoomType: "lens",
        lensShape : "round",
        lensSize    : 200,
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500,
        scrollZoom : true
});

دموی پلاگین

گرداوری : وحید مجیدی 

پخش اختصاصی

دانلود نمونه ی دموی آماده

[sdm_download id=”1234″ fancy=”0″]

]]> https://www.xn--mgbguh09aqiwi.com/%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%b2%d9%88%d9%85-%d8%a8%d8%b1-%d8%b1%d9%88%db%8c-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1.html/feed 25 دانلود پلاگین اسکرول بار حرفه ای جی کوئری + آموزش کامل و ساده https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84-%d8%a8%d8%a7%d8%b1-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c.html https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84-%d8%a8%d8%a7%d8%b1-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c.html#comments Thu, 23 Jan 2014 10:48:11 +0000 http://xn--mgbguh09aqiwi.com/?p=991 حتما براتون پیش اومده که قسمتی از سایتتون دارای اسکرول باشد و میدونید که اسکرول بار های پیش فرض مرور گرها , بسیار ساده و قطعا کل دیزای سایت شمارو بهم زده و از بین میبرند .

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

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

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

برای این کار ابتدا شما نیاز به 1 فایل Css و 4 فایل Jquery دارید . من برای راحتی و زیبایی کار این 5 فایل رو در پوشه های مخصوص با موضوع خودشون قرار دادم . یعنی فایل Css در پوشه Css و 4 فایل Jquery رو در پوشه ی Jquery قرار دادم.

ابتدا این دو پوشه رو از اینجا دانلود کنید و سپس در روت سایت خود قرار دهید . (طبیعتا تمامی آدرس دهی ها به نسبت Root سایت انجام شده و اگر شما بخواهید در پوشه های دیگر استفاده کنید , باید آدرس های فایل رو تغییر دهید . البته پیشنهاد میشود این کار رو انجام ندهید )

حال نوبت آموزش می باشد …

در ابتدا شما باید در صفحه ویا صفحاتی که میخواهید این اسکرول بار رو استفاده کنید , این 5 فایل رو بهش بشناسونید .

برای این کار ابتدا در بین دو تگ <head> و <head/> , باید با کد زیر, Css رو بشناسونید .

<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

حال نوبت شناسایی فایل های Jquery به صفحه میباشد .

در 2 تا مانده به آخرین خط صفحه ( یعنی قبل از دو تگ <html/> و <body/> ) , کد های زیر رو کپی کنید .

	<script src="jquery/jquery-1.7.2.min.js"></script>
	<script src="jquery/jquery-ui-1.8.21.custom.min.js"></script>
	<script src="jquery/jquery.mousewheel.min.js"></script>
	<script src="jquery/jquery.mCustomScrollbar.js"></script>
	<script>
		(function($){
			$(window).load(function(){
				$(".content").mCustomScrollbar({
					scrollButtons:{
						enable:false
					}
				});
			});
		})(jQuery);
	</script>

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

برای این کار یک Div به عنوان نمونه با کلاس content بسازید . برای این کلاس حتما یک Height مشخص بدهید . این کار برای اینست که با زیاد کردن اطلاعات و نوشیته های داخل Div , از یک ارتفاعی به بعد , اسکرول  بار لحاظ و نمایش داده شود . چون اگر یک ارتفاع مشخص ندهید , به میزان اطلاعات داخل , Div هم کشیده میشود و اصلا اسکرول نمی اندازد .

نکته مهم : برای Div خود هر کلاس و یا آی دی که انتخاب میکنید , حتما باید نام آن را جایگزین نام فعلی $(“content.”) که در بالا نوشته شده است بکنید . بدیهی است اگر آی دی انتخاب کردید , باید

$("#content").mCustomScrollbar({

و اگر به مانند مثال بالا از کلاس استفاده کردید , باید

$(".content").mCustomScrollbar({

را جایگذین کنید .

آموزش های مربوط به دیزاین :

شما به راحتی میتوانید موقعیت مکانی و رنگ های مربوط به اسکرول را به دلخواه خود تغییر دهید.

برای این کار , پس از نصب پلاگین , وارد فایل Css با آدرس زیر شوید :

css/jquery.mCustomScrollbar.css

این فایل رو با NotePad و یا DreamWeaver باز کنید . حال با توجه به اطلاعات زیر , دیزاین را تغییر دهید :

1 – فاصله از سمت راست Div = خط 3

2 – پهنا و ارتفاع خط کمرنگ و زمینه اسکرول بار = خط 29 و 30

2 – پهنا و ارتفاع خط ضخیم و اصلی اسکرول بار = خط 43 و 44

4 – شفافیت حالت معمولی و حالت Hover = خط 137 و 140

5 – تغییر رنگ ها = خطهای 143 و 147 و 151 و 156

توجه : 5 نکته ی بالا فقط مهمترین خصوصیات قسمت های Css این پلاگین میباشد . طبیعتا اگر با کدهای Css آشنایی کامل دارید , میتوانید تغییرات بسیار بیشتری در دیزاین بدهید .

پخش اختصاصی

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

دانلود نمونه آماده این پلاگین , جهت آشنایی بیشتر

[sdm-download id=”997″ fancy=”0″]

]]> https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84-%d8%a8%d8%a7%d8%b1-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c.html/feed 12