آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 100آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 100آموزش طراحی سایت-افزونه ها در 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
آموزش طراحی سایت ادامه دارد
آموزش طراحی سایت-آموزش JSON
سلام عزیزان با آموزش JSON از دوره آموزش طراحی سایت همراه ما باشید.
آموزش JSON
جیسون JSON سرنام واژگان JavaScript Object Notation یک استاندارد سبک، باز ، متنی و خوانا برای انسان جهت انتقال داده و جایگزینی برای xml است. قراردادهای مورد استفاده ی JSON برای تمامی برنامه نویسان از جمله برنامه نویس C، C++، Java، Python، Perl شناخته شده است که به شرح زیر می باشد:
جیسون JSON مخفف JavaScript Object Notation است.
فرمت آن برای اولین بار توسط Douglas Crockford معرفی شد.
برای انسان خوانا بوده و ویژه ی انتقال داده طراحی شده است.
از زبان اسکریپت نویسی JavaScript مشتق شده است.
پسوند فایل های با فرمت جی سن .json می باشد.
مدیا Media type این فرمت انتقال داده application/json است.
شناسه ی متحدالشکل نوع (UTI) آن public.json است.
آموزش طراحی سایت :موارد استفاده ی JSON
به هنگام نوشتن برنامه های تحت وب مبتنی بر جاوا اسکریپت که افزونه هایی برای مرورگر و وب سایت ها را شامل می شوند بکار می رود.
برای serialize کردن و انتقال داده های ساخت یافته از طریق اتصال شبکه بکار می رود.
عمدتا برای انتقال داده بین سرور و برنامه های تحت وب بکار می رود.
وب Web service ها و API ها از فرمت JSON برای ارائه ی داده های public بهره می گیرند.
تمامی زبان های برنامه نویسی روز از آن پشتیبانی می کنند.
ویژگی های JSON
خواندن و نوشتن در آن آسان است.
یک فرمت متنی تبادل داده سبک و کم حجم است.
با اینکه از زبان JavaScript مشتق شده، از این زبان کاملا مستقل است و مفسر (parser) آن برای تمامی زبان ها موجود می باشد.
نمونه ی ساده از JSON
مثال زیر نحوه ی استفاده از JSON را برای ذخیره ی اطلاعات مربوط به مجموعه ای از کتاب ها بر اساس موضوع و ویرایش هر یک، نمایش می دهد:
{
"book": [
{
"id":"01",
"language": "Java",
"edition": "third",
"author": "Herbert Schildt"
},
{
"id":"07",
"language": "C++",
"edition": "second",
"author": "E.Balagurusamy"
}
]
}
نمونه ی دیگری را در زیر مشاهده می کنید. این کد را با پسوند json.htm ذخیره می کنیم:
language = "javascript" >
var object1 = { "language" : "Java", "author" : "herbert schildt" };
document.write("
JSON with JavaScript example
");
document.write("
");
document.write("
Language = " + object1.language+"
");
document.write("
Author = " + object1.author+"
");
var object2 = { "language" : "C++", "author" : "E-Balagurusamy" };
document.write("
");
document.write("
Language = " + object2.language+"
");
document.write("
Author = " + object2.author+"
");
document.write("
");
document.write(object2.language + " programming language can be studied " + "from book written by " + object2.author);
document.write("");
حال با مرورگر IE یا هر مرورگر دیگری که JavaScript در آن فعال سازی شده، فایل json.htm را باز می کنیم. نتیجه ی زیر را بدست می دهد:
ساختار نگارشی JSON
جیسون JSON –انواع داده ای (Data types)
فرمت JSON از انواع داده ای زیر پشتیبانی می کند:
نوع داده ای number
ممیز شناور با دو رقم اعشار در JavaScript.
فرمت Octal (هشت هشتی) و hexadecimal (شانزده شانزدهی) در آن استفاده نمی شود.
حرف NaN یا Infinity در Number بکار نمی رود.
جدول زیر انواع عددی را به نمایش می گذارد:
ساختار نگارشی (Syntax):
var json-object-name = { string : number_value, .......}
مثال:
در مثال زیر نوع داده ای Number را مشاهده می کنید. دقت داشته باشید که مقدار نباید داخل "" قرار داده شود:
var obj = {marks: 97}
نوع داده ی String
دنباله ای از کاراکترهای Unicode محصور شده در "" با کاراکتر گریز backslash.
کارکتر Character رشته ای با طول یک و در واقع متشکل از تنها یک کاراکتر است.
جدول زیر کاراکترهایی که در رشته بکار می روند را نمایش می دهد:
ساختار نگارشی:
var json-object-name = { string : "string value", .......}
مثال:
نمونه ای از نوع داده ای رشته را در زیر مشاهده می کنید:
var obj = {name: 'Amit'}
(نوع داده ای بولی)Boolen
مقدار true یا false را شامل می شود.
var json-object-name = { string : true/false, .......}
مثال:
var obj = {name: 'Amit', marks: 97, distinction: true}
نوع داده ای آرایه
دنباله یا مجموعه ای از مقادیر مرتب شده است.
المان ها یا مقادیر آن داخل براکت باز و بسته محصور می شوند.
مقادیر داخل آن توسط ویرگول از هم جدا می شوند.
اندیس آرایه می تواند از 0 یا 1 شروع شود.
اندیس آرایه دنباله ای از اعداد صحیح است.
ساختار نگارشی
[ value, .......]
نمونه ی زیر آرایه ای را نشان می دهد که چندین شی در آن جای گرفته است:
{
"books": [
{ "language":"Java" , "edition":"second" },
{ "language":"C++" , "lastName":"fifth" },
{ "language":"C" , "lastName":"third" }
]
}
نوع داده ای Object
مجموعه ای نامرتب از جفت های اسم و مقدار.
اشیا داخل {} محصور می شوند.
پس از هر اسم یک دو نقطه قرار گرفته و جفت های اسم و مقدار توسط ویرگول از هم جدا می شوند.
کلیدها باید از نوع رشته بوده و با یکدیگر فرق داشته باشند.
ساختار نگارشی (syntax)
نحوه ی نگارش آن به شکل زیر می باشد:
{ string : value, .......}
مثال:
مثال زیر نمونه ای از نوع داده ای object را نمایش می دهد:
{
"id": "011A",
"language": "JAVA",
"price": 500,
}
Whitespace
می تواند بین هر جفت توکنی قرار بگیرد. اغلب از آن به منظور بهبود خوانایی کد استفاده می شود.
ساختار نگارشی
{string:" ",....}
مثال:
var i = null;
if(i == 1){
document.write("
value is 1
");
else{
document.write("
value is null
");
}
نوع داده ای Value در JSON
می تواند هر نوعی را در خود ذخیره کند، از قبیل:
ساختار نگارشی
String | Number | Object | Array | TRUE | FALSE | NULL
مثال:
var i = 1;
var j = "sachin";
var k = null;
آموزش طراحی سایت ادامه دارد