آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 100
آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 100آموزش طراحی سایت-افزونه MultiScrolling در جی کوئری
در این مقاله از مجموعه مقالات آموزش طراحی سایت می آموزیم که چطور از افزونه MultiScrolling برای ساخت اسکرول چندتایی در وبسایت استفاده کنیم..
افزونه Multi Scrolling، یک پلاگین ساده برای اسکرول چندتایی در سایت هایی است که از نظر عمودی به دو پنل مجزا تقسیم می شوند. این پلاگین هم با مرورگرهایی که css3 را پشتیبانی می کنند و هم آنهایی که قدیمی تر هستند و همچنین ابزارهای لمسی مانند موبایل و تبلت سازگار است.
روش استفاده :
جهت استفاده از این پلاگین لازم است فایلهای css و js پلاگین را در پروژه خود قرار دهیم . همچنین لازم است فایل jquery.js نیز در کنار آنها موجود باشد. اگر میخواهید از افکتهایی easing (swing,linear) استفاده می کنید می توانید jquery UI را نیز استفاده کنید. برای نصب پلاگین multiScroll توسط ترمینال می توانید دستور زیر را در مکانی که می خواهیدنصب شود، فراخوانی کنید.
// With bower
bower install multiscroll.js
// With npm
npm install multiscroll.js
لینک هایی که لازم است در پروژه قرار دهید به شرح زیر هستند :
< link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" / >
< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >< /script >
< !-- This following line is needed in case of using the default easing option or when using another
one rather than "linear" or "swing". You can also add the full jQuery UI instead of this file if you prefer -- >
< script src="vendors/jquery.easings.min.js" >< /script >
< script type="text/javascript" src="jquery.multiscroll.js" >< /script >
اگر می خواهید پلاگین را دانلود کنید،روی لینک زیر را کلیک کنید :
CDNJS: https://cdnjs.com/libraries/multiscroll.js
کدهای HTML مربوط به پلاگین JQuery MultiScrolling در دوره آموزش طراحی سایت
هر بخش توسط یک عنصر div با کلاس section مشخص می شود. بخش اول که صفحه نخست سایت محسوب می شود، به صورت پیش فرض فعال است.
< div id="multiscroll" >
< div class="ms-left" >
< div class="ms-section" >Some section< /div >
< div class="ms-section" >Some section< /div >
< div class="ms-section" >Some section< /div >
< /div >
< div class="ms-right" >
< div class="ms-section" >Some section< /div >
< div class="ms-section" >Some section< /div >
< div class="ms-section" >Some section< /div >
< /div >
< /div >
جهت فعال کردن یک بخش در زمان بار گزاری صفحه، می توانید از کد زیر استفاده کنید.
< div class="ms-section active" >Some section< /div >
برای فراخوانی پلاگین در JQuery، دستور زیر را درون script می نویسیم.
$ (document).ready(function() {
$ ('#multiscroll').multiscroll();
});
تمام گزینه های این پلاگین در قطعه کد زیر موجود است :
$ (document).ready(function() {
$ ('#multiscroll').multiscroll({
verticalCentered : true,
scrollingSpeed: 700,
easing: 'easeInQuart',
menu: false,
sectionsColor: [],
navigation: false,
navigationPosition: 'right',
navigationColor: '#000',
navigationTooltips: [],
loopBottom: false,
loopTop: false,
css3: false,
paddingTop: 0,
paddingBottom: 0,
normalScrollElements: null,
scrollOverflow: false,
scrollOverflowOptions: null,
keyboardScrolling: true,
touchSensitivity: 5,
//responsive
responsiveWidth: 0,
responsiveHeight: 0,
responsiveExpand: false,
// Custom selectors
sectionSelector: '.ms-section',
leftSelector: '.ms-left',
rightSelector: '.ms-right',
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
});
});
آموزش طراحی سایت : آپشن های مربوط به افزونه JQeury MultiScrolling
- آپشن VerticalCentered : وسط چین کردن عمودی محتوای بخش ها (پیش فرض true).
- آپشن ScrollingSpeed : سرعت پیمایش برحسب میلی ثانیه (پیش فرص 700).
- آپشن SectionsColor : تعیین رنگ پیشفرض برای بخشهای مختلف (پیش فرض none).
$ ('#pagepiling').pagepiling({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
- آپشن Anchors : این آپشن Id لینک هایی که به هر بخش متصل هستند را نمایش می دهد. از این لینک ها برای پیمایش به جلو و عقب استفاده می شود. (مقدار پیش فرض [ ]).
- آپشن (default swing) Easing : افکت حرکتی پیمایش عمودی را مشخص می کند. جهت استفاده از این ویژگی لازم است jquery UI را نیز در پروژه خود قرار دهید. (مقدار پیش فرض swing).
- آپشن LoopTop : مشخص کننده این مورد است که در بخش اول، پیمایش به سمت بالا ما را به سمت آخرین مورد هدایت کند یا خیر (مقدار پیش فرض false).
- آپشن LoopBottom : مشخص کننده این مورد است که در بخش آخر پیمایش به سمت پایین ، ما را به سمت اولین بخش هدایت کند یا خیر (مقدار پیشفرض false).
- آپشن Css3 : استفاده از css3 یا javascript برای پیمایش بین بخش ها ( مقدار پیش فرض tru).
- آپشن NormalScrollElements : اگر می خواهید از اسکرول اتوماتیک روی بعضی عناصر جلوگیری کنید می توانید از این گزینه استفاده کنید، مقدار این گزینه به صورت رشته خواهد بود.
(normalScrollElements: '#element1, .element2')
- آپشن TouchSensitivity : درصد طول و عرض پنجره های مرورگرها و میزانی که یک swipe باید اندازه گیری شود تا به بخش بعدی هدایت شویم (مقدار پیش فرض5 است).
- آپشن AnimateAnchor : مشخص کننده این مورد است که اگر در url بخش خاصی با # مشخص شده بود، در هنگام بارگزاری با انیمیشن خاصی به آن بخش برود یا اینکه همان بخش زمان لود نمایش داده شود (مقدار پیش فرض true).
- آپشن Direction : اسکرول افقی باشد یا عمودی (مقدار پیش فرض vertical).
- آپشن Menu : یک انتخابگر که منو شامل لینکهایی که به بخش های مختلف متصل است را نمایش می دهد.
- آپشن PaddingTop : فاصله از بالای بخش ها.
- آپشن PaddingBottom : فاصله از پایین بخش ها.
آموزش متدهای مربوط به JQeury MultiScrolling در دوره آموزش طراحی سایت
متد moveSectionUp() : اسکرول به سمت بالا یک بخش.
$ .fn.pagepiling.moveSectionUp();
متد moveSectionDown() : اسکرول یک بخش به سمت پایین.
$ .fn.pagepiling.moveSectionDown();
متد moveTo(section) : اسکرول صفحه به بخش مشخص شده.
/*Scrolling to the section with the anchor link `firstSection` */
$ .fn.pagepiling.moveTo('firstSection');
//Scrolling to the 3rd section in the site
$ .fn.pagepiling.moveTo(3);
//Which is the same as
$ .fn.pagepiling.moveTo(3);
متد setAllowScrolling(boolean) : حذف امکان اسکرول بین بخش توسط موس یا حالت لمسی.
$ .fn.pagepiling.setAllowScrolling(false);
متد setKeyboardScrolling(boolean) : افزودن یا حذف امکان اسکرول بین بخش توسط دکمه های کیبورد.
$ .fn.pagepiling.setKeyboardScrolling(false);
متد setScrollingSpeed(milliseconds) : سرعت اسکرول برحسب میلی ثانیه.
$ .fn.pagepiling.setScrollingSpeed(700);
با دیگر مقالات در زمینه آموزش طراحی وبسایت همراه ما باشید..
آموزش Jquery-مثال عملی
سلام عزیزان ... با آموزش JQuery از دوره آموزش طراحی سایت همراه باشید
آموزش مثال Hello, world در Jquery
در مبحث قبلی با نحوه ی اضافه کردن jQuery به صفحه ی وب برای بهره وری از امکانات فوق العاده زیاد آن آشنا شدید. پیش از شروع به استفاده از کتابخانه ی jQuery بایستی با مفاهیم پایه ای آن آشنایی پیدا کنید و نظر خود را به مثال ساده ی زیر جلب نمایید:
نمونه یک
<div id="divTest1">Hello, world!</div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!");
همان
طور که مشاهده می کنید، یک تگ با شناسه ی "divTest1" داریم. از علامت $ که
به مثابه ی یک میانبر برای دسترسی به المان های HTML ایفای نقش می کند،
استفاده می کنیم. بنابراین با استفاده از این علامت تمامی المان های HTML
با شناسه ی "divTest1" را انتخاب کرده و مقدار "Hello, world!" را در آن
قرار می دهیم (text آن را با رشته ی "Hello, world!" تنظیم می کنیم).
حتی چاپ کردن همین متن ساده در جاوا اسکریپت به کدنویسی بسیار بیشتر نیاز داشت:
نمونه دو
<div id="divTest2">Hello, world!</div>
<script type="text/javascript">
document.getElementById("divTest2") = "Hello, world!";
اگر المان HTML فقط یک class داشت و از ID نیز برخوردار نبود، این کد به مراتب طولانی تر می شد.
به
طور معمول، باید صبر کنید تا صفحه ی وب وارد مرحله یا وضعیت READY شود و
سپس اقدام به دستکاری محتویات آن نمایید. مثال های ساده ی بالا (و همچنین
تعدادی از عملیات پیچیده ی دیگر) در بیشتر مرورگرها، پیش از آماده شدن صفحه
نیز قابل اجرا هستند. اما این امر در مورد تمامی عملیات با jQuery (پیش از
بارگذاری کامل صفحه و آماده شدن آن) امکان پذیر نیست. خوشبختانه، jQuery
اجرای این عملیات را نیز بسیار آسان ساخته است.
آموزش طراحی سایت-JQuery
سلام عزیزان ... با آموزش JQuery از دوره آموزش طراحی سایت همراه باشید
جی کوئری Jquery چیست؟
برای اینکه بدانیم به راحتی باید گفت که یک کتابخانه یا چارچوب کاری برای زبان برنامه نویسی سمت سرویس گیرنده جاوا اسکریپت (JavaScript framework) است که هدف اصلی آن فراهم آوردن زمینه ی استفاده ی آسان از زبان نام برده در برنامه نویسی تحت وب (صفحات وب) می باشد. jQuery یک کتابخانه از جاوا اسکریپت است . از آن جایی که کتابخانه ی JQuery بسیاری از امکانات و عملیات قابل اجرا توسط زبان جاوا اسکریپت را گرفته و در قالب یک سری تابع می گنجاند که می توانید به راحتی هر چه تمام تر فراخوانی و اجرا کنید (با کم ترین میزان کدنویسی بیشترین عملیات ممکن را اجرا کنید)، می توان آن را یک لایه ی سطح بالا (abstraction layer) نیز نامید. با این حال، لازم است به خاطر داشته باشید که کتابخانه ی ذکر شده به هیچ وجه نمی تواند کاملا جایگزین JavaScript گردد. اگرچه jQuery در بسیاری از موارد میزان کدنویسی را کاهش داده و در عین حال همان عملیات قابل اجرا توسط جاوا اسکپریت را اجرا می کند، اما نباید فراموش کنید که توابع و دستورات jQuery هم در حقیقت همان کد زبان جاوا اسکریپت است.
آموزش طراحی سایت : با توجه به آنچه گفته شد،در لزومی ندارد برای استفاده از کتابخانه ی مزبور حتما یک متخصص در زمینه ی برنامه نویسی با جاوا اسکریپت باشید.در واقع، jQuery سعی دارد بسیاری از کارهایی که می توان با استفاده از کدهای جاوا اسکریپت پیاده سازی کرد، همچون دستکاری DOM و فراخوانی توابع AJAX، را تسهیل نماید. از این رو لازم نیست درباره ی جاوا اسکریپت اطلاعات بسیار بالایی داشته باشید. تعدادی زیادی کتابخانه ی جاوا اسکریپت وجود دارد که در حال حاضر jQuery پرکاربردترین و کارآمدترین آن ها محسوب می شود. از جمله دلایل محبوبیت این کتابخانه می توان به قابلیت توسعه پذیری بالا اشاره کرد. بنابراین شما می توانید برای هر کاری که تصورش را می کنید، افزونه (plugin) پیدا کنید. قدرت و کارایی بالا، دامنه ی وسیع افزونه های پرکاربرد، ساختار نگارشی روان و کارآمد این چارچوب کاری را از دیگر کتابخانه های jQuery تمایز بخشیده است.
آموزش طراحی سایت : آموزش انتخاب یک ویرایشگر مناسب برای jQuery
می توان دستورات و توابع jQuery را در هر ویرایشگر متن نظیر Windows Notepad نوشت. اما نوشتن کدهای آن داخل یک ویرایشگر HTML که دستورات جاوا اسکریپت خود را در آن می نویسید، به مراتب کارامد تر خواهد بود. تعدادی ویرایشگر وجود دارد که با jQuery مانند شهروند درجه یک برخورد می کنند. بهترین ویرایشگر برای درج بهینه و سریع دستورات آن، TSW WebCoder می باشد که با داشتن قابلیت های بی نظیر IntelliSense و ارائه دادن تمامی تکنولوژی های مورد نیاز همچون HTML، CSS، JavaScript، PHP و البته jQuery در کدنویسی به یاری شما می آید.
داشتن لیستی از property ها، متدها و پارامترهای احتمالی آن ها کمک بزرگی به شما می کند، به خصوص اگر در کدنویسی با jQuery یک تازه وارد هستید. در زیر تعدادی تصویر از ویرایشگر TSW WebCoder مشاهده می کنید که اشاره به علت برتری این ویرایشگر و قابلیت آسان سازی کدنویسی با آن دارد: تصویر زیر توابع قابل فراخوانی بر روی یک شی jQuery را نشان می دهد.
این تصویر نیز پارامترهای متد fadeIn را نشان می دهد.
آموزش استفاده از jQuery در صفحات وب
جهت استفاده از jQuery، بایستی آن را به صفحاتی که می خواهید از کدهای آن استفاده کنند، اضافه نمایید. برای این منظور می بایست ابتدا این کتابخانه را از سایت www.jquery.com دانلود نمایید. با مراجعه به سایت مزبور با دو گزینه برای دانلود مواجه می شوید: 1. نسخه ی "Production" 2. نسخه ی "Development" . نسخه ی "Production" برای وب سایت ها live و آماده می باشد. این نسخه ی فشرده و کم حجم (minify) شده تا کم ترین میزان فضا را اشغال کند و برای کاربرانی که مرورگرها آن ها باید فایل jQuery را همراه با باقی اطلاعات سایت بارگیری کند، بهترین گزینه می باشد. اما برای آزمایش و توسعه، نسخه ی "Development" گزینه ی ارجح تلقی می شود. نسخه ی یاد شده فشرده سازی (minify)نشده و به همین خاطر در صورت برخورد با خطا می توانید مشاهده کنید خطا در کجا رخ داده است.
پس از دانلود فایل jQuery JavaScript، لازم است آن را به وسیله ی تگ< script>اچ تی ام ال به صفحه ی وب خود متصل کنید (خصیصه ی type تگ نام برده را با مقدار ="text/javascript" src="jquery-1.5.1.js" تنظیم نمایید یا به عبارتی دیگر در تگ script به آن ارجاع دهید). بهترین کار جایگذاری فایل دانلود شده ی jquery.js در پوشه ی متعلق به صفحه ای است که می خواهید از jQuery استفاده کند. سپس آن را در بخش < head> بگنجانید (در بخش head صفحه به آن ارجاع دهید):
اکنون بخشی از صفحه ی شما به شکل زیر خواهد:
jQuery test
یک روش جدیدتر (بجای دانلود jQuery و میزبانی آن) این است که jQuery را از یک CDN (تحویل محتوا روی شبکه) دریافت کنید. Google و Microsoft هر دو نسخه های مختلفی از کتابخانه ی مذکور و دیگر کتابخانه های جاوا اسکریپت را میزبانی می کنند. با این کار دیگر نیازی به دانلود و ذخیره ی فایل jQuery نیست. بعلاوه از آنجایی این فایل از یک URL مشترک با سایت دیگر دریافت می شود، به احتمال زیاد زمانی که کاربران به سایت شما مراجعه می کنند و مرورگر کتابخانه را درخواست می کنند، فایل نام برده از قبل در حافظه ی نهان (cache) آماده می باشد (به این دلیل که سایت دیگری دقیقا همین نسخه و فایل را از قبل استفاده می کند). همچنین بیشتر CDN ها اطمینان حاصل می کنند، وقتی کاربری فایلی را از آن درخواست می کند، آن فایل از طریق نزدیکترین سرویس دهنده به کاربر (از نظر موقعیت جغرافیایی و مکانی) تحویل داده شود. می توانید jQuery را از یک CDN، درست مانند زمانی که آن را دانلود می کنید، مورد استفاده قرار دهید. تنها چیزی که تغییر می کند، آدرس URL می باشد. برای نمونه، جهت اضافه کردن ویرایش jQuery 3.5.1 از سرورهای Google به صفحه ی وب مورد نظر، دستور زیر را وارد می کنید:
آموزش طراحی سایت ادامه دارد
آموزش طراحی سایت-افزونه ها در JQuery
با آموزش جدید Jquery از دوره آموزش طراحی سایت همراه ما باشید.
آموزش افزونه sliderbars.js در JQuery
اسلاید Slidebars یک افزونه jQuery برای اجرای سریع و سبک منوها و نوارهای باریک افقی و عمودی در وب سایت شما است. Slidebars 2 پر از ویژگی های جذاب میباشد. تعداد نامحدودی از اسلایدها - دیگر فقط یک سمت چپ ، یک راست وجود ندارد.
اسلایدهای بالا و پایین.
آموزش طراحی سایت : رویدادها - نمایش اسلایدها رویدادهایی را نشان می دهد که نشان دهنده رفتار آن است.
سبک انیمیشن شیفت جدید.
مدت زمان بهبود انیمیشن.
سبک های چاپ
سبک وزن تنها 1.69kb gzipped
جهت استفاده از این افزونه لازم است ، ابتدا فایلهای cssو js لازم را در پروژه اضافه میکنیم.
< link href="css/slidebars.css" rel="stylesheet" >
< script src="js/jquery.js" >< /script >
< script src="js/slidebars.js" >< /script >
در بخش body صفحه Html ، صفحه به دو بخش محتوای اصلی و منو تقسیم میکنیم و محتوا دلخواه در آنها قرار میدهیم
< div canvas="container" >
< h1 >welcome to my website< /h1 >
< p > introduction of slidebars.js< /p >
< p >
< button class="js-open-left-slidebar" >open left< /button >
< button class="js-close-left-slidebar" >CLOSE left< /button >
< button class="js-toggle-left-slidebar" >toggle left< /button >
< /p >
< /div >
< div off-canvas="slidebar-1 left shift" >
< p >menu left< /p >
< /div >
جهت و مدل باز و بسته شدن منو ، با استفاده از پارامتر off-canvas مشخص میشود برای فراخوانی افزونه روی این بخش ، قطعه کد جیکوئری زیر را مینویسیم
$ (document).ready(function(){
var controller = new slidebars();
controller.init();
بعد از ایجاد یک نمونه جدید از شی ، برای رویداد کلیک روی دکمه ی منو ، متد باز کردن منو را اجرا میکنیم.
$ ('.js-open-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.open('slidebar-1');
})
با کلیک روی دکمه با کلاس مشخص ، متد بستن منو را فراخوانی میکنیم.
$('.js-close-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.close('slidebar-1');
})
متد toggle ، دو متد close و open را با یکدیگر اجرا میکند
$('.js-toggle-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.toggle('slidebar-1');
})
//event
رویدادها:
رویدادهای ایجاد نمونه جدید، اعمال css روی منو که شامل shift و overlay ،push و reveal میباشد. مدل رفتاری منو در زمان باز و بسته شدن را نشان میدهد. رویداد باز و بسته شدن منو نیز از رویدادهای این افزونه میباشد.
$ ( controller.events ).on( 'init', function () {
console.log( 'Init event' );
} );
$ (controller.events).on('css',function () {
console.log('css')
})
$ (controller.events).on('exit',function () {
console.log('exit')
})
$ (controller.events).on('opening',function (event,id) {
console.log('opening'+id);
})
$ (controller.events).on('opened',function (event,id) {
console.log('opened'+id);
})
$ (controller.events).on('closing',function (event,id) {
console.log('closing'+id);
})
$ (controller.events).on('closed',function (event,id) {
console.log('closed'+id);
})
آموزش طراحی سایت : آموزش کار با افزونه Alertify
پلاگین alertify ، پلاگینی سبک برای توسعه دیالوگ باکس و هشدارهای زیبا در مرورگر ها میباشد. از ویژگی های این پلاگین میتوان به قابلیت گسترش و سفارشی سازی آن ، واکنشگرا بودن ، قابلیت اعمال قالب روی آنها و راست چین بودن آنها اشاره کرد.
آدرس صفحه وبی که میخواهید نمایش دهید را Paste کنید
این پلاگین درواقع جایگزینی برای دیالوگ باکسهای پیش فرض مرورگرها است و استفاده ی بسیار آسانی دارد.
در ادامه قطعه کدهای استفاده از این پلاگین را به ازای هشدارهای متفاوت مرورگرها مشاهده میکنیم
نمایش پیام و یا هشدار:
if(!alertify.myAlert){
//define a new dialog
alertify.dialog('myAlert',function(){
return{
main:function(message){
this.message = message;
},
setup:function(){
return {
buttons:[{text: "cool!", key:27/*Esc*/}],
focus: { element:0 }
};
},
prepare:function(){
this.setContent(this.message);
}
}});
}
//launch it.
alertify.myAlert("Browser dialogs made easy!");
آموزش راه اندازی پلاگین alertify
.alert("This is an alert dialog.", function(){
alertify.message('OK');
});
دریافت تاییدیه از کاربر
alertify.confirm("This is a confirm dialog.",
function(){
alertify.success('Ok');
},
function(){
alertify.error('Cancel');
});
Run Example Documentation
دریافت ورودی از کاربر
alertify.prompt("This is a prompt dialog.", "Default value",
function(evt, value ){
alertify.success('Ok: ' + value);
},
function(){
alertify.error('Cancel');
})
نمایش پیام موفقیت آمیز
// success notification
// Shorthand for:
// alertify.notify( message, 'success', [wait, callback]);
alertify.success('Success message');
نمایش پیام خطا
// error notification
// Shorthand for:
// alertify.notify( message, 'error', [wait, callback]);
alertify.error('Error message');
نمایش هشدار
// alertify.notify( message, 'warning', [wait, callback]);
alertify.warning('Warning message');
Run Example Documentation
نمایش هشدار به کاربر
// default notification
// Shorthand for:
// alertify.notify( message, [type, wait, callback]);
alertify.message('Normal message');
Run Example Documentation
آموزش طراحی سایت ادامه دارد