آموزش jquery – اسکریپت دات کام https://www.xn--mgbguh09aqiwi.com اسکریپت دات کام Sat, 14 Feb 2015 21:41:19 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.14 کتاب مرجع آموزشی jQuery https://www.xn--mgbguh09aqiwi.com/%da%a9%d8%aa%d8%a7%d8%a8-%d9%85%d8%b1%d8%ac%d8%b9-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-jquery.html https://www.xn--mgbguh09aqiwi.com/%da%a9%d8%aa%d8%a7%d8%a8-%d9%85%d8%b1%d8%ac%d8%b9-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-jquery.html#respond Mon, 26 Jan 2015 20:41:42 +0000 http://xn--mgbguh09aqiwi.com/?p=4353 معرفی کتاب مرجع آموزشی jQery

مرجع آموزشی jQery

عنوان کتاب: مرجع آموزشی jQery

 نویسنده:احمد بادپی

ناشر: موسسه فرهنگی هنری دیباگران تهران

توضیح کلی درباره کتاب:

دراین کتاب با مواردی ازجمله انواع کتابخانه های جاوا اسکریپت و ویژگی های برجسته jQery ،انواع گزینشگرها برای انتخاب و دسترسی به عناصر ،روش های پیدایش و دستکاری در DOM، ایجاد جلوه های بصری و انیمیشن ها در jQery، نحوه کار با Ajax وJSON، ایجاد پلاگین های دلخواه ونحوه کار با پلاگین های مشهور، روش های ساخت انواع رابط های کاربری همچون منوهای افقی وعمودی ، منوی Accordion، کادر راهنما ،سربرگ ها و معرفی منابع و مراجع آموزش jQery آشنا خواهید شد .به همراه یک حلقه CD آموزشی ارائه می گردد

سرفصل ها :

فصل 1: تشریح پیکره اصلی اسکریپت های jQery

فصل 2:گزینشگرها

فصل 3:متدهای پیمایش DOM

فصل 4: متدهای تغییر و دستکاری در DOM

فصل 5:متدهای کاربا رویدادها

فصل 6:کار با افکت (انیمیشن ) ها

فصل 7:متذهای کار با AJAX

فصل 8: متدهای گوناگون در jQery

فصل 9: خاصیت های jQery

فصل 10: پلاگین ها

فصل 11:آشنایی با پلاگین های مشهور jQery

ضمیمه 1:منابع آنلاین

ضمیمه 2:ابزارهای طراحی و توسعه

 

پخش اختصاصی: اسکریپت دات کام

گردآوری: نیلوفر معماریان محمدی 

 

]]> https://www.xn--mgbguh09aqiwi.com/%da%a9%d8%aa%d8%a7%d8%a8-%d9%85%d8%b1%d8%ac%d8%b9-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-jquery.html/feed 0 پلاگین جی کوئری تغییر استایل ToolTip + آموزش ساده 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%aa%d8%ba%db%8c%db%8c%d8%b1-%d8%a7%d8%b3%d8%aa%d8%a7%db%8c%d9%84-tooltip-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3.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%aa%d8%ba%db%8c%db%8c%d8%b1-%d8%a7%d8%b3%d8%aa%d8%a7%db%8c%d9%84-tooltip-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3.html#comments Sun, 29 Jun 2014 12:57:04 +0000 http://xn--mgbguh09aqiwi.com/?p=1721 منظور از تولتیب ها, همان کادر های ساده و رنگ روشنی هستند که با قرار دادن موس بر روی آنها , پس از 1 ثانیه ظاهر میشوند و شرح مختصری از اون Object رو به ما میده .

این تولتیب ها با دادن اتربیوت title به یک تگ در html ساخته می شوند .

همانطور که میدانیم به صورت پیش فرض تولتیب ها دارای استایلی ساده می باشند .

با استفاده از این آموزش میتوانید این استایل را تغییر و از یکنواختی در بیاورید .

پلاگین جی کوئری تغییر استایل ToolTip + آموزش ساده

آموزش :

ابتدا باید فایل های مورد نیاز را از اینجا دانلود کنید و سپس در روت ( root ) سایت خود قرار دهید . ( منظور از روت , پوشه ی اصلی سایت شماست . مثلا در هاست های لینوکسی , در پوشه ی public_html و یا www )

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

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

<link rel="stylesheet" type="text/css" href="css/tooltipster.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tooltipster.js"></script>

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

<script type="text/javascript">
	$(document).ready(function() {
		$('*').tooltipster();
	});
</script>

 نکته :  برای دادن این خاصت به هر تگی که دوست دارید , کافیست اتربیوت title را به آن تگ اضافه کنید . البته به دلیل از بین بردن شلوغی در وب سایت , بهتر است فقط به تگ های لینک و عکس این خاصیت را بدهید .

<a href="http://اسکریپت.com" title="اسکریپت دات کام<"ترفند و آموزش</a>
<img src="test.jpg" title="اسکریپت دات کام">

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

پحش اختصاصی

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

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

[sdm_download id=”1728″ 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%aa%d8%ba%db%8c%db%8c%d8%b1-%d8%a7%d8%b3%d8%aa%d8%a7%db%8c%d9%84-tooltip-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3.html/feed 7 دانلود پلاگین گالری عکس حرفه ای و ریسپانسیو جی کوئری + آموزش کامل و ساده 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-%da%af%d8%a7%d9%84%d8%b1%db%8c-%d8%b9%da%a9%d8%b3-%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-%da%af%d8%a7%d9%84%d8%b1%db%8c-%d8%b9%da%a9%d8%b3-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c.html#comments Mon, 27 Jan 2014 09:12:56 +0000 http://xn--mgbguh09aqiwi.com/?p=1014 امروز با یک پلاگین فوق حرفه ای و بسیار پرکاربرد در صفحات وب در خدمت شما عزیزان هستم.

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

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

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

ویژگی های این پلاگین :

دارای بیش از 5 افکت مختلف 

قابلیت نمایش در تمامی مرورگرهای جدید و قدیمی

کاملا ریسپانسیو ( نمایش در تمامی دستگاه ها به صورت کامل )

کنترل کامل زمان بندی ها , افکت ها و …

دارای استایل مجزا Theme برای تغییر دیزاین به دلخواه خودتان

آموزش نصب پلاگین :

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

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

حال فایل یا صفحه ای رو که میخواهید در آن از این اسلایدر استفاده کنید با استفاده از NotePad و البته ترجیحا با DreamWeaver باز کنید .

حال باید در بین دو تگ <head> و <head/> , به این پوشه ها با آدرسهای متناسب ( گفته شده در نکته بالا ) آدرس دهی نمایید .

برای حالت پیش فرض و در روت سایت به صورت زیر :

    <link rel="stylesheet" href="theme/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />

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

برای حالت پیش فرض و در روت سایت به صورت زیر :

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

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

کافیست کد زیر را در محل مناسب و البته بین دو تگ <body> و <body/> کپی نمایید :

<div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">
        <a href="http:/اسکریپت.com"><img src="images/VM1.jpg" title="عکس شماره یک"></a>
        <a href="http://اسکریپت.com"><img src="images/VM2.jpg" title="عکس شماره دو"></a>
        <a href="http://اسکریپت.com"><img src="images/VM3.jpg" title="عکس شماره سه"></a>
        <a href="http://اسکریپت.com"><img src="images/VM4.jpg" title="عکس شماره چهار"></a>
    </div>
</div>

  نکات و آموزش کد های بالا :

1 – به جای لینک های قرار گرفته در بالا , باید لینک های مربوط به هر عکس را جایگزین کنید که کاربر پس از کلیک بر روی عکس , وارد لینک دلخواه شود . ( در صورتی که نمیخواهید عکس شما لینک دار باشد , میتوانید کل تگ a را پاک نمایید )

2 – در تگ img و در اتربیوت src آن , لینک نمایش عکسها را وارد نماید که برای مثال , اینجا عکس ها در پوشه ای به نام images و عکس هایی با نام های VM1 , VM2 VM 3 و VM4 می باشد .

3 – در تگ img و اتربیوت title میتوانید شرحی در مورد عکس بیان کنید تا در نمایش اسلاید شو , پایین هر عکس به نمایش درآید . ( میتوانید در صورت دلخواه و عدم نمایش شرح عکس , این اتربیوت را پاک نمایید )

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

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

یعنی به جای این قطعه کد :

    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

از این قطعه کد استفاده کنند :

    <script type="text/javascript">
        $('#slider').nivoSlider({
            effect: 'random',               // Specify sets like: 'fold,fade,sliceDown'
            slices: 15,                     // For slice animations
            boxCols: 8,                     // For box animations
            boxRows: 4,                     // For box animations
            animSpeed: 500,                 // Slide transition speed
            pauseTime: 3000,                // How long each slide will show
            startSlide: 0,                  // Set starting Slide (0 index)
            directionNav: true,             // Next & Prev navigation
            controlNav: true,               // 1,2,3... navigation
            controlNavThumbs: false,        // Use thumbnails for Control Nav
            pauseOnHover: true,             // Stop animation while hovering
            manualAdvance: false,           // Force manual transitions
            prevText: 'Prev',               // Prev directionNav text
            nextText: 'Next',               // Next directionNav text
            randomStart: false,             // Start on a random slide
            beforeChange: function(){},     // Triggers before a slide transition
            afterChange: function(){},      // Triggers after a slide transition
            slideshowEnd: function(){},     // Triggers after all slides have been shown
            lastSlide: function(){},        // Triggers when last slide is shown
            afterLoad: function(){}         // Triggers when slider has loaded
        });
    </script>

 

 با کمی تغییر در کدهای بالا , شاهد یک اسلاید شو کاملا کاستومایز و حرفه ای تر خواهید بود .

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

پخش اختصاصی

دموی اسلاید شو

دانلود اسلاید شو نمونه پلاگین به صورت آماده

[sdm-download id=”1015″ 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-%da%af%d8%a7%d9%84%d8%b1%db%8c-%d8%b9%da%a9%d8%b3-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c.html/feed 3 دانلود پلاگین اسکرول بار حرفه ای جی کوئری + آموزش کامل و ساده 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