آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 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);
با دیگر مقالات در زمینه آموزش طراحی وبسایت همراه ما باشید..
آموزش طراحی سایت-آموزش مدیریت خطا در جاوا اسکریپت
در این مقاله از مجموعه مقالات آموزش طراحی سایت می آموزیم که چطور خطاهای احتمالی در جاوا اسکریپت را مدیریت کنیم.
- دستور try به شما امکان می دهد قطعه کد (code block) را به منظور یافتن خطاهای احتمالی بررسی و آزمایش کنید.
- دستور catch به شما اجازه می دهد خطا را مدیریت کرده و اقدامات اصلاحی را در صورت رخداد خطا مشخص کنیم.
- دستور throw قابلیت ایجاد خطاهای سفارشی را به شما می دهد.
- دستور Finally به شما اجازه می دهد کد را پس از (اجرای دستورات) try و catch، صرف از نظر از نتیجه آن، اجرا کنید.
هنگامی که کدهای جاوا اسکریپت را اجرا می کنید، ممکن است با خطاهای مختلفی مواجه شویم. این خطاها ممکن است از وجود اشکال هایی در کدنویسی برنامه نشات بگیرد که توسط برنامه نویس نوشته شده، ممکن است از ورودی اشتباه و غیر مجازی باشد که توسط کاربر وارد شده و یا دیگر چیزهای غیر قابل پیش بینی.
نمونه یک :
< p id="demo">adddlert is not defined< /p>
try {
adddlert("Welcome guest!");
}
catch(err) {
document. getElementById("demo") = err.message;
}
دستورات try & catch و کاربرد آن در زبان جاوا اسکریپت
- دستور try به برنامه نویس اجازه می دهد قطعه کدی که احتمال می دهد در آن خطا وجود داشته باشد را مشخص کند. این قطعه کد در حین اجرا برای خطایابی تست می شود.
- دستور catch نیز یک قطعه کد تعریف می کند که در صورت برخورد با خطا در ساختار (try block)، اجرا می شود.
- عبارت try، به شما اجازه می دهد تا، خطاهای یک بلاک از دستورات را تست کنید.
- اگر خطایی در قسمت try رخ دهد، در آن صورت دستوراتی که در در ساختار catch تعریف کردید، اجرا می شوند.
توجه داشته باشید که دستورات try و catch با هم و به صورت جفت بکار می روند.
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
پرتاب خطا (throw error) در دوره آموزش طراحی سایت
هنگامی که خطایی رخ می دهد، جاوا اسکریپت به صورت خودکار متوقف شده و یک پیغام خطا صادر می کند.
در برنامه نویسی برای این منظور یک واژه ی تخصصی به نام throw تعریف شده است.
دستور throw
این دستور امکان ایجاد یک خطاهای سفارشی (custom error) را در اختیار برنامه نویس قرار می دهد. اصطلاح تخصصی که برای این منظور (ایجاد خطای سفارشی) در نظر گرفته شده throwing an exception می باشد. دستور throw باید همراه try و catch استفاده شود. Exception (استثنا) می تواند یک شی String، Number، یک Boolean و یا یک Object باشد.
throw "Too big" // throw a text
throw 500; // throw a number
اگر throw را به همراه try و catch بکار ببرید، می توانید جریان برنامه را تحت کنترل خود درآورده و پیغام های خطا سفارشی ایجاد کنید.
آموزش طراحی سایت : اعتبارسنجی ورودی (input validation)
مثال زیر ورودی را بررسی و اعتبار سنجی می کند. در صورت غلط بودن مقدار، یک پیغام خطا (استثنا( صادر (throw) می شود. پیغام خطای تولید شده، توسط ساختار (دستور) catch دریافت یا مهار (catch) شده و پیغام خطای سفارشی به دنبال آن نمایش داده می شود.
نمونه دو :
function myFunction() {
var message, x;
message = document.getElementById("message");
message = ""
x = document.getElementById("demo").value;
try {
if(x == "") throw "empty"
if(isNaN(x)) throw "not a number"
x = Number(x);
if(x < 5) throw "too low"
if(x > 10) throw "too high"
}
catch(err) {
message = "Input is " + err;
}
دستور Finally
این دستور به شما اجازه می دهد کد را پس از اجرای ساختارهای try & catch و صرف نظر از نتیجه ی بدست آمده اجرا کنید.
با دیگر مقالات در زمینه آموزش طراحی وبسایت همراه ما باشید..
ساخت منو افقی و عمودی بوسیله HTML
در این مقاله از آموزش طراحی سایت می آموزیم که چطور یک Icon Bar ( نوار آیکون ) با استفاده از کد CSS ایجاد کنید.
قدم اول : کد HTML را اضافه کنید. مثال :
< div class="icon-bar">
< a class="active" href="#">< i class="fa fa-home">< /i>< /a>
< a href="#">< i class="fa fa-search">< /i>< /a>
< a href="#">< i class="fa fa-envelope">< /i>< /a>
< a href="#">< i class="fa fa-globe">< /i>< /a>
< a href="#">< i class="fa fa-trash">< /i>< /a>
< /div>
قدم دوم : کد CSS را برای ساخت منو افقی اضافه کنید. مثال :
.icon-bar {
width: 100%; /* Full-width */
background-color: #555; /* Dark-grey background */
overflow: auto; /* Overflow due to float */
}
.icon-bar a {
float: left; /* Float links side by side */
text-align: center; /* Center-align text */
width: 20%; /* Equal width (5 icons with 20% width each = 100%) */
padding: 12px 0; /* Some top and bottom padding */
transition: all 0.3s ease; /* Add transition for hover effects */
color: white; /* White text color */
font-size: 36px; /* Increased font size */
}
.icon-bar a:hover {
background-color: #000; /* Add a hover color */
}
.active {
background-color: #4CAF50; /* Add an active/current color */
}
مثال (ایجاد منوی عمودی) : کد CSS را برای ساخت منو عمودی اضافه کنید.
.icon-bar {
width: 90px; /* Set a specific width */
background-color: #555; /* Dark-grey background */
}
.icon-bar a {
display: block; /* Make the links appear below each other instead of side-by-side */
text-align: center; /* Center-align text */
padding: 16px; /* Add some padding */
transition: all 0.3s ease; /* Add transition for hover effects */
color: white; /* White text color */
font-size: 36px; /* Increased font-size */
}
.icon-bar a:hover {
background-color: #000; /* Add a hover color */
}
.active {
background-color: #4CAF50; /* Add an active/current color */
}
