دانلود پلاگین jquery – اسکریپت دات کام https://www.xn--mgbguh09aqiwi.com اسکریپت دات کام Tue, 19 Jul 2016 20:24:52 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.14 پلاگین جی کوئری شمارش معکوس در 8 استایل 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%b4%d9%85%d8%a7%d8%b1%d8%b4-%d9%85%d8%b9%da%a9%d9%88%d8%b3-%d8%af%d8%b1-8-%d8%a7%d8%b3%d8%aa%d8%a7%db%8c%d9%84.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%b4%d9%85%d8%a7%d8%b1%d8%b4-%d9%85%d8%b9%da%a9%d9%88%d8%b3-%d8%af%d8%b1-8-%d8%a7%d8%b3%d8%aa%d8%a7%db%8c%d9%84.html#respond Sat, 23 Jan 2016 17:58:54 +0000 http://www.xn--mgbguh09aqiwi.com/?p=15465 پلاگین جی کوئری شمارش معکوس در 8 استایل از وب سایت اسکریپت دات کام

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

فایل راهنما در بسته ی دانلوی موجود میباشد و شما عزیزان به راحتی میتوانید از آن استفاده نمایید .

پلاگین جی کوئری شمارش معکوس در 8 استایل

دموی پلاگین

دانلود پلاگین جی کوئری شمارش معکوس در 8 استایل

پخش اختصاصی

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

]]> 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%b4%d9%85%d8%a7%d8%b1%d8%b4-%d9%85%d8%b9%da%a9%d9%88%d8%b3-%d8%af%d8%b1-8-%d8%a7%d8%b3%d8%aa%d8%a7%db%8c%d9%84.html/feed 0 نمایش وضعیت آب و هوا با پلاگین جی کوئری Ideabox https://www.xn--mgbguh09aqiwi.com/%d9%86%d9%85%d8%a7%db%8c%d8%b4-%d9%88%d8%b6%d8%b9%db%8c%d8%aa-%d8%a2%d8%a8-%d9%88-%d9%87%d9%88%d8%a7-%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-ideabox.html https://www.xn--mgbguh09aqiwi.com/%d9%86%d9%85%d8%a7%db%8c%d8%b4-%d9%88%d8%b6%d8%b9%db%8c%d8%aa-%d8%a2%d8%a8-%d9%88-%d9%87%d9%88%d8%a7-%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-ideabox.html#respond Sun, 23 Aug 2015 18:20:56 +0000 http://www.xn--mgbguh09aqiwi.com/?p=11632 Ideabox یک پلاگین جی کوئری می باشد که با نصب آن قادر هستید وضعیت آب و هوای شهر دلخواه خود را با استفاده از خروجی وب سایت openweathermap.com در سایت خود نمایش دهید.

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

نمایش وضعیت آب و هوا با پلاگین جی کوئری Ideabox

دموی پلاگین

دانلود پلاگین وضعیت آب و هوا ideabox

]]> https://www.xn--mgbguh09aqiwi.com/%d9%86%d9%85%d8%a7%db%8c%d8%b4-%d9%88%d8%b6%d8%b9%db%8c%d8%aa-%d8%a2%d8%a8-%d9%88-%d9%87%d9%88%d8%a7-%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-ideabox.html/feed 0 قالب و پلاگین جی کوئری به صورت LazyLoad با 3 Effect https://www.xn--mgbguh09aqiwi.com/%d9%82%d8%a7%d9%84%d8%a8-%d9%88-%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%a8%d9%87-%d8%b5%d9%88%d8%b1%d8%aa-lazyload-%d8%a8%d8%a7-3-effect.html https://www.xn--mgbguh09aqiwi.com/%d9%82%d8%a7%d9%84%d8%a8-%d9%88-%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%a8%d9%87-%d8%b5%d9%88%d8%b1%d8%aa-lazyload-%d8%a8%d8%a7-3-effect.html#comments Fri, 21 Aug 2015 17:06:05 +0000 http://www.xn--mgbguh09aqiwi.com/?p=11442 یکی از مهمترین کارها برای داشتن یک صفحه ی سبک در وب سایت , استفاده از پلاگین های Lazy Load در جی کوئری می باشد .

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

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

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

پایه طراحی این قالب بر اساس Bootstrap و طبیعتا ریسپانسیو می باشد . ضمنا این قالب دارای 3 نوع Effect برای Lazy Load میباشد .

قالب و پلاگین جی کوئری به صورت LazyLoad با 3 Effect

دموی قالب و پلاگین

دانلود قالب و پلاگین جی کوئری به صورت LazyLoad با 3 Effect

]]> https://www.xn--mgbguh09aqiwi.com/%d9%82%d8%a7%d9%84%d8%a8-%d9%88-%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%a8%d9%87-%d8%b5%d9%88%d8%b1%d8%aa-lazyload-%d8%a8%d8%a7-3-effect.html/feed 1 پلاگین جی کوئری 9 افکت انیمیشنی در حالت hover 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-9-%d8%a7%d9%81%da%a9%d8%aa-%d8%a7%d9%86%db%8c%d9%85%db%8c%d8%b4%d9%86%db%8c-%d8%af%d8%b1-%d8%ad%d8%a7%d9%84%d8%aa-hover.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-9-%d8%a7%d9%81%da%a9%d8%aa-%d8%a7%d9%86%db%8c%d9%85%db%8c%d8%b4%d9%86%db%8c-%d8%af%d8%b1-%d8%ad%d8%a7%d9%84%d8%aa-hover.html#comments Sun, 03 May 2015 19:52:26 +0000 http://xn--mgbguh09aqiwi.com/?p=6875 به دلیل استقبال فراوان از پلاگین های جی کوئری که در وب سایت اسکریپت دات کام تا بحال قرار گرفته است …

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

به همین دلیل برای این پست یک پلاگین حرفه ای و زیبای جی کوئری که دارای 9 افکت جذاب در حالت hover می باشد را ارسال خواهم کرد .

پلاگین جی کوئری 9 افکت جالب در حالت hover

 

آموزش : برای انتخاب هر افکت کافیست به صفحه ی خود فایل های Jquery موجود در پوشه ی jQuery و js و همچنین فایل ها css موجود در پوشه ی css را لینک نمایید ( فایل های jquery با تگ script و فایل های css با تگ link , به وب سایت متصل میشوند )

سپس هر افکت یک فانکشن ( function ) و تکه کد html دارد که در فایل قابل دانلود در این پست موجود می باشد که باید در صفحه مورد نظر وب سایت خود قرار دهید . در صورت بروز هر گونه سوال و مشکل , لطفا در تالار گفتمان تاپیک بزنید .

دموی افکت ها

دانلود پلاگین جی کوئری 9 افکت انیمیشنی در حالت hover

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

پخش اختصاصی

]]> 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-9-%d8%a7%d9%81%da%a9%d8%aa-%d8%a7%d9%86%db%8c%d9%85%db%8c%d8%b4%d9%86%db%8c-%d8%af%d8%b1-%d8%ad%d8%a7%d9%84%d8%aa-hover.html/feed 3 دانلود پلاگین جی کوئری زوم بر روی تصاویر با 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-%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