آموزش طراحی سایت

آموزش طراحی سایت از صفر تا 100

آموزش طراحی سایت

آموزش طراحی سایت از صفر تا 100

آموزش طراحی سایت-پلاگین Page Piling در جی کوئری

سلام بر دوستان عزیز و همراه..

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

پلاگین Page Piling یک پلاگین کاربردی است که همچنان که روی مروگرهای جدید به خوبی اجرا می‌شود، روی مرورگرهای قدیمی نیز مانند Internet Explorer 8 و 9 و Opera 12 و غیره کار میکند.در واقع این پلاگین هم با مرورگرهایی که css3 را پشتبانی می کنند و هم آنهایی که قدیمی تر هستند، سازگاری دارد. همچنین با ابزارهای لمسی مانند موبایل و تبلت نیز سازگار است.

 

روش استفاده از افزونه Page Piling در جی کوئری

جهت استفاده از این پلاگین لازم است فایلهای css و js پلاگین را در پروژه خود قرار دهیم . همچنین لازم است فایل jquery.js نیز در کنار آنها موجود باشد. اگر میخواهید از افکتهایی easing (swing,linear) استفاده میکنید می توانید jquery UI را نیز استفاده کنید.

 

نصب توسط مرورگر

برای نصب پلاگین PagePiling توسط ترمینال می توانید دستور زیر را در مکانی که می خواهید نصب شود، فراخوانی کنید.

bower install pagepiling.js

 

لینک هایی که لازم است در پروژه قرار دهید.

< link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" / >
< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" >< /script >
< script type="text/javascript" src="jquery.pagepiling.js" >< /script > 

 

اگر میخواهید پلاگین را دانلود کنید، روی لینک زیر را کلیک کنید :

CDNJS: https://cdnjs.com/libraries/pagePiling.js

 

کدهای HTML مربوط پلاگین JQuery PagePiling

هر بخش توسط یک عنصر div با کلاس section مشخص میشود. بخشی اول که صفحه نخست سایت محسوب میشود، به صورت پیش فرض فعال است.

< div id="pagepiling" >
< div class="section" >Some section< /div >
< div class="section" >Some section< /div >
< div class="section" >Some section< /div >
< div class="section" >Some section< /div >
< /div >

 

معرفی پلاگین PagePiling

برای فراخوانی پلاگین در جی کوئری، دستور زیر را درون script می نویسیم :

$ (document).ready(function() {
$ ('#pagepiling').pagepiling();
});

 

تمام گزینه های این پلاگین در قطعه کد زیر موجود است :

$ (document).ready(function() {
$ ('#pagepiling').pagepiling({
menu: null,
direction: 'vertical',
verticalCentered: true,
sectionsColor: [],
anchors: [],
 scrollingSpeed: 700,
easing: 'swing',
loopBottom: false,
loopTop: false,
css3: true,
navigation: {
'textColor': '#000',
'bulletsColor': '#000',
 'position': 'right',
'tooltips': ['section1', 'section2', 'section3', 'section4']
 },
normalScrollElements: null,
normalScrollElementTouchThreshold: 5,
touchSensitivity: 5,
keyboardScrolling: true,
sectionSelector: '.section',
animateAnchor: false,
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
});
});

 

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

 

آموزش گزینه های پلاگین Page Piling در جی کوئری


  • verticalCentered :

وسط چین کردن عمودی محتوای بخش ها (پیش فرض true)

  • scrollingSpeed :

سرعت پیمایش برحسب میلی ثانیه (پیش فرص 700)

  • sectionsColor :

تعیین رنگ پیش فرض برای بخشهای مختلف (پیش فرض none)

  • $ ('#pagepiling').pagepiling({
  •  sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
  • });
  • Anchors :

لینک هایی که به هر بخش متصل هستند را نمایش میدهد. از این لینکها برای پیمایش به جلو و عقب استفاده می شود (مقدار پیش فرض []).

  • Easing (Default Swing) :

افکت حرکتی پیمایش عمودی را مشخص میکند. جهت استفاده از این ویژگی لازم است jquery UI را نیز در پروژه خود قرار دهید (مقدار پیشفرض swing).

  • LoopTop :

مشخص کننده این مورد است که در بخش اول، پیمایش به سمت بالا ما را به سمت آخرین مورد هدایت کند یا خیر (مقدار پیش فرض false).

  • LoopBottom :

​​​​​​​مشخص کننده این مورد است که در بخش آخر پیمایش به سمت پایین ، ما را به سمت اولین بخش هدایت کند یا خیر (مقدار پیشفرض false).

  • Css3 :

​​​​​​​استفاده از css3 یا javascript برای پیمایش بین بخش ها ( مقدار پیش فرض tru).

  • NormalScrollElements :

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

  • (normalScrollElements: '#element1, .element2')
  • keyboardScrolling: (default true) Defines if the content can be navigated using the keyboard

اسکرول مطالب توسط دکمه های کیبورد (مقدار پیش فرض true).

  • TouchSensitivity :

درصد طول و عرض پنجره های مرورگرها و میزانی که یک swipe باید اندازه گیری شود تا به بخش بعدی هدایت شویم (مقدار پیش فرض5).​​​​​​​

  • AnimateAnchor :

​​​​​​​مشخص کننده این مورد است که اگر در url بخش خاصی با # مشخص شده بود، در هنگام بارگزاری با انیمیشن خاصی به آن بخش برود یا اینکه همان بخش زمان لود نمایش داده شود (مقدار پیش فرض true).

  • Direction :

​​​​​​​اسکرول افقی باشد یا عمودی (مقدار پیش فرض vertical).

  • Menu :

​​​​​​​یک انتخابگر که منو شامل لینک هایی که به بخش های مختلف متصل است را نمایش می دهد.

 

مثال :

  • < ul id="myMenu" >
  •  < li data-menuanchor="firstPage" class="active" >< a href="#firstPage" >First section< /a >< 
  •  /li >
  • < li data-menuanchor="secondPage" >< a href="#secondPage" >Second section< /a >< /li >
  • < li data-menuanchor="thirdPage" >< a href="#thirdPage" >Third section< /a >< /li >
  • < li data-menuanchor="fourthPage" >< a href="#fourthPage" >Fourth section< /a >< /li >
  • < /ul >
  • $ ('#pagepiling').pagepiling({
  • anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
  • menu: '#myMenu'
  • });

 

متدهای مربوط به پلاگین PagePiling


  • 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);

 

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

آموزش طراحی سایت طراحی سایت دوره آموزش طراحی سایت آموزش جی کوئری آموزش افزونه های جی کوئری پلاگین Page Piling در جی کوئری
افشین پنج‌شنبه 24 مهر 1399 ساعت 17:01
0 نظر

آموزش طراحی سایت-کار با تاریخ در جاوا اسکریپت

سلام بر دوستان عزیزم ...

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


شی date در جاوا اسکریپت

شی date در جاوا اسکریپت به برنامه نویس این امکان را می دهد که تاریخ و زمان را در صفحات وب مدیریت کند.


قالب یا فرمت زمان و تاریخ در جااوا اسکریپت

تاریخ را در جاوا اسکریپت می توان یا به صورت رشته (string) نوشت، مطابق دستور زیر :

  • Mon Jun 08 2015 16:06:13 GMT+0430 (Iran Daylight Time)

و یا آن را به صورت عدد قالب دهی کرده و نمایش داد.

  • 1433763373015

 

نمایش تاریخ

در این بخش با استفاده از یک اسکریپت، تاریخ را درون المان با شناسه یا id "demo" نمایش می دهیم.


مثال 1 :

  • document.getElementById("demo") = Date();

در این اسکریپت مقدار Date() به محتوای (innerHTML) المان با شناسه ی "demo" تخصیص داده می شود.


ایجاد شی date در آموزش طراحی سایت

شی date همان طور که پیشتر نیز ذکر شد امکان مدیریت و کار با تاریخ را فراهم می کند. تاریخ متشکل از سال، ماه، روز، ساعت، دقیقه، ثانیه و یک هزارم ثانیه می باشد. شی date با استفاده از سازنده new Date() ایجاد می گردد(منظور از سازنده همان constructor است). چهار روش مختلف برای راه اندازی و شروع تاریخ وجود دارد که به شرح زیر است :

  • new Date() 
  •         new Date(milliseconds) 
  •         new Date(dateString)
  •         new Date(year،‎ month،‎ day،‎ hours،‎ minutes،‎ seconds،‎ milliseconds)‎

سازنده یا constructor new Date() یک شی جدید date با زمان و تاریخ جاری ایجاد می کند.

 

مثال 2 :

  •     var d = new Date();
  •     document.getElementById("demo") = d;

سازنده ی new Date(date string)، یک شی جدید date از تاریخ و زمان تعیین شده می سازد.

 

مثال 3 :

  •     var d = new Date("October 13, 2014 11:13:00");
  •     document.getElementById("demo") = d;

سازنده یnew Date(number) یک شی جدید date از زمان صفر (zero time) محاسبه کرده و عدد مورد نظر را به آن اضافه می کند. منظور از زمان صفر / zero time در واقع یک ژانویه ی سال 1970 و ساعت هماهنگ جهانی UTC 00:00:00 می باشد. عدد مورد نظر بر حسب یک هزارم ثانیه مشخص می شود.

 

مثال 4 :

  •     var d = new Date(86400000);
  • document.getElementById("demo") = d;

که نتیجه بصورت زیر خواهد بود :

  • Fri Jan 02 1970 03:30:00 GMT+0330 (Iran Standard Time)‎

توجه :

تمام محاسبات براساس میلی ثانیه با زمان شروع 00:00:00 01/01/1970 و طبق زمان جهانی (UTC) می باشد. یک روز 
شامل 86، 400، 000 میلی ثانیه است.

سازنده ی numbers)7new date (، یک شی جدید date با تاریخ و زمان مشخص شده ایجاد می کند. هفت رقم داخل پرانتز سال، ماه، ساعت، دقیقه، ثانیه و هزارم ثانیه را به همین ترتیب ذکر شده مشخص می کند.

 

مثال 5 :

  •     var d = new Date(99, 5, 24, 11, 33, 30, 0);
  •     document.getElementById("demo") = d;

می توان چهار پارامتر پایانی را از حذف کرد.

 

مثال 6 :

  •     var d = new Date(99, 5, 24);
  •     document.getElementById("demo") = d;

نکته :
جاوا اسکریپت ماه ها را از 0 تا 11 می شمارد، بدین معنا که ژانویه 0 و دسامبر ماه 11 در نظر گرفته می شود.

 


متدهای شی data

هنگامی که یک شی date ایجاد می شود، متدهای جاوا اسکریپت به شما اجازه می دهند تعدادی عملیات معین روی آن انجام دهید. متدهای شی date قابلیت بدست آوردن و تنظیم (get & set) تاریخ و زمان را یا با زمان محلی و یا زمان جهانی فراهم می آورد.

 

نمایش تاریخ

هنگامی که یک شی date را در HTML نمایش می دهید، این شی به صورت خودکار و به وسلیه ی متد toString() به یک رشته تبدیل می شود.

 

مثال 7 :

  • < p id="demo">< /p>
  • ‎< script>
  •     d = new Date();
  •     document.getElementById("demo") = d;
  • ‎< /script>‎

که یکسان است با :

  • < script>
  •     var d = new Date();
  •     document.getElementById("demo") = d.toString();
  • < /script>

متد toUTCString() یک تاریخ را به رشته ی UTC (یک استاندارد برای نمایش تاریخ) تبدیل می کند.

 

مثال 8 :

  • < script>
  •     var d = new Date();
  •     document.getElementById("demo") = d.toUTCString();
  • < /script>

متد toDateString() یک تاریخ را به فرمت های خواناتری تبدیل می کند.

 

مثال 9 :

  • < script>
  •     var d = new Date();
  •     document.getElementById("demo") = d.toDateString();
  • < /script>

که نتیجه بصورت زیر خواهد بود :

  • Tue Jun 09 2015

توجه :
شی date (از نوع) ایستا (static) است و نه پویا (dynamic)، بدین معنا که زمان و ساعت کامپیوتر همچنان تغییر 
می کند، اما اشیا date به همان صورتی که اول ایجاد شدند باقی مانده و تغییر نمی کنند.

 


قالب های مختلف تنظیم تاریخ در جاوا اسکریپت

در کل سه فرمت مختلف تنظیم تاریخ در جاوا اسکریپت وجود دارد که به ترتیب زیر می باشد. ISO Dates (ایزو 8601 عناصر داده - قالب‌های تبادل - تبادل اطلاعات - نمایش تاریخ‌ها و زمان‌ها یک استاندارد بین المللی درباره تبادل داده‌های مرتبط با تاریخ و زمان است).

  • Long Dates
  • Short Dates

ترکیب نحوی (syntax) ایزو 8601 (روز روز- ماه ماه – سال سال سال سال) نوین ترین و همچنین ارجح ترین روش برای نوشتن و فرمت دهی تاریخ محسوب می گردد.

 

مثال 10 :

  • < script>
  •     document.getElementById("demo") = new Date("2015-03-25");
  • < /script>

و یا با ترکیب نحوی " ماه ماه – سال سال سال سال " بدین تریتب نوشت : 2014-12

 

مثال 11 :

  • < script>
  •     document.getElementById("demo") = new Date("2015-03");
  • < /script>

و یا با ترکیب نحوی " سال سال سال سال " بدین ترتیب : 2014

 

مثال 12 :

  • document.getElementById("demo") = new Date("2015");

و یا بدین ترتیب : 2014-12-24T12:00:00

 

مثال 13 :

  • document.getElementById("demo") = new Date("2015-03-25T12:00:00");

توجه داشته باشید که T در رشته ی date در مثال بالا نشانگر ساعت هماهنگ جهانی یا همان UTC می باشد.


نکته :
ساعت هماهنگ جهانی (UTC) و ساعت گرینویچ یا ساعت جهانی (GMT) هر دو یکسان هستند.فرمت long date 
اغلب بدین ترتیب نگارش می شود : " سال سال سال سال روز روز ماه ماه ماه ". ترکیب نحوی این فرمت به شرح 
زیر می باشد :

 

مثال 14 :

  • document.getElementById("demo") = new Date("Mar 25 2015");

اما می توان ترتیب ماه، سال و روز را مطابق میل تغییر داد.

 

مثال 15 :

  • document.getElementById("demo") = new Date("25 Mar 2015");

 

مثال 16 :

  • document.getElementById("demo") = new Date("2015 Mar 25");

اسم ماه ها را می توان به طور کامل نوشت و یا در صورت تمایل تنها حروف اول آن را لحاظ کرد، برای مثال بجای January نوشت jan.

 

مثال 17 :

  • document.getElementById("demo") = new Date("January 25 2015");

 

مثال 18 :

  • document.getElementById("demo") = new Date("Jan 25 2015");

ویرگول و کوچک بزرگی حروف (اسم ماه مورد نظر) کاملا نادیده گرفته می شود.

 

مثال 19 :

  • document.getElementById("demo") = new Date("2015, JANUARY, 25");

قالب (فرمت) short date اغلب بدین صورت نگارش می شود : " سال سال سال سال / روز روز / ماه ماه ".

 

مثال 20 :

  • document.getElementById("demo") = new Date("03/25/2015");

می توان از کاراکترهای "/" یا "-" به عنوان تفکیک کننده ی سال، ماه و روز استفاده کرد.

 

مثال 21 :

  • document.getElementById("demo") = new Date("03-25-2015");

جاوا اسکریپت این ترکیب نحوی یا نحوه ی نگارش تاریخ را نیز می پذیرد : " روز روز / ماه ماه / سال سال سال سال ".

 

مثال 22 :

  • document.getElementById("demo") = new Date("2015/03/25");

نکته :
ماه در هر دو فرمت short date و ISO پیش از روز درج می شود.جاوا اسکریپت همچنین اجازه ی نگارش تاریخ به 
صورت کامل (با full format) را به برنامه نویس می دهد. به مثال زیر توجه کنید.

 

مثال 23 :

  • document.getElementById("demo") =
  • new Date("Wed Mar 25 2015 09:56:24 GMT+0100 (W. Europe Standard Time)");

جاوا اسکریپت خطاهای مربوط به اسم روز و پرانتز را نادیده می گیرد.

 

مثال 24 :

  •  document.getElementById("demo") =
  •         new Date("Fri Mar 25 2015 09:56:24 GMT+0100 (Tokyo Time)");

 

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

آموزش طراحی سایت طراحی سایت آموزش جاوااسکریپت دوره آموزش طراحی سایت کار با تاریخ در جاوا اسکریپت
افشین چهارشنبه 23 مهر 1399 ساعت 15:26
0 نظر

آموزش طراحی سایت-media object در بوت استرپ 4

سلام بر دوستان عزیزم..
امروز با پست دیگری از سری پست های آموزش طراحی سایت همراه شما هستیم، در این پست سعی داریم به آموزش آبجکت های چند رسانه ای در بوت استرپ 4 بپردازیم.

آموزش Media Object ها در بوت استرپ 4

بوت استرپ 4، راه حل ساده ای برای چینش Media Object یا فایل های رسانه ای مثل عکس یا ویدیو درون سایر محتواها را فراهم کرده است. از فایل های رسانه ای معمولا در بخش نظرات بلاگ ها، پست های شبکه های اجتماعی و ... استفاده می شود.

شکل زیر، یک مکالمه ساده بین دو کاربر در یک انجمن را با استفاده از کلاس های جدید بوت استرپ 4، در قالبی زیبا نمایش داده است :

 

آموزش ایجاد فایل رسانه ساده Basic Media Object

شکل زیر، نحوه قرار دادن یک عکس را درون سایر محتویات صفحه متوسط کلاس های جدید بوت استرپ 4 نشان داده است :

 

برای ایجاد یک شی رسانه ای (Media Object)، کلاس media را به عنصر دربرگیرنده یا Container اضافه کرده و فایل رسانه (عکس یا ویدیو) را درون عنصر فرزند آن که دارای کلاس media-body است، قرار دهید. به میزان مورد نظر حاشیه درونی (padding) و مارجین (margin) تعیین کرده و برای این کار از کلاس های کاربری ویژه بوت استرپ 4 (utility Classes) استفاده کنید، همانند کد مثال عملی زیر :


مثال 1 :


< div class="media border p-3">
< img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle"
style="width:60px;">
< div class="media-body">
< h4>John Doe < small>< i>Posted on February 19, 2016< /i>< /small>< /h4>
< p>Lorem ipsum...< /p>
< /div>
< /div>

 

آموزش ایجاد فایل رسانه ای تو در تو Nested Media Object در Bootstrap 4 در آموزش طراحی سایت

یک فایل رسانه ای را می توانید درون یک فایل رسانه ای دیگر قرار دهید، همانند تصویر زیر :

 

برای تو در تو کردن فایل رسانه ای و قرار دادن یک Media Object درون یک شی دیگر (Nested)، فایل لازم را درون عنصر دربرگیرنده فایل اول که دارای کلاس media-body است، قرار دهید. همانند کد مثال عملی زیر :


مثال 2 :


< div class="media border p-3">
< img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" 
style="width:60px;">
< div class="media-body">
< h4>John Doe < small>< i>Posted on February 19, 2016< /i>< /small>< /h4>
< p>Lorem ipsum...< /p>
< div class="media p-3">
< img src="img_avatar2.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" 
style="width:45px;">
< div class="media-body">
< h4>Jane Doe < small>< i>Posted on February 20 2016< /i>< /small>< /h4>
< p>Lorem ipsum...< /p>
< /div>
< /div>
< /div>
< /div>

 

آموزش راست چین کردن فایل رسانه ای در بوت استرپ 4

می توانید فایل رسانه ای (عکس یا ویدیو) را در سمت راست محتویات قرار دهید، همانند تصویر زیر :

 

مثال 3 :


< div class="media border p-3">
< div class="media-body">
< h4>John Doe < small>< i>Posted on February 19, 2016< /i>< /small>< /h4>
< p>Lorem ipsum...< /p>
< /div>
< img src="img_avatar3.png" alt="John Doe" class="ml-3 mt-3 rounded-circle"
style="width:60px;">
< /div>

 

آموزش ترازبندی بالا، پایین یا وسط فایل رسانه در Bootstrap 4

از کلاس های کاربردی Flex Utility مخصوص بوت استرپ 4، برای تنظیم قرارگیری عمودی فایل رسانه ای استفاده کنید. برای این منظور، کلاس align-self-* را به تگ یا تگ فایل رسانه ای داده که در آن * یکی از 3 مقدار (start) بالا، وسط (center) و پایین (end) را دریافت می کند.

همانند کد مثال عملی زیر :


مثال 4 :


< !-- Media top -->
< div class="media">
< img src="img_avatar1.png" class="align-self-start mr-3" style="width:60px">
< div class="media-body">
< h4>Media Top< /h4>
< p>Lorem ipsum...< /p>
< /div>
< /div>
< !-- Media middle -->
< div class="media">
< img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
< div class="media-body">
< h4>Media Middle< /h4>
 < p>Lorem ipsum...< /p>
< /div>
< /div>
< !-- Media bottom -->
< div class="media">
< img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
< div class="media-body">
< h4>Media Bottom< /h4>
< p>Lorem ipsum...< /p>
< /div>
< /div>

 

با دیگر پست های ما در زمینه آموزش طراحی سایت همراه باشید .....

آموزش طراحی سایت آموزش بوت استرپ media object در بوت استرپ دوره آموزش طراحی سایت طراحی سایت
افشین سه‌شنبه 22 مهر 1399 ساعت 14:22
0 نظر

آموزش طراحی سایت-آموزش Text در CSS

سلام بر دوستان عزیزم..

امروز با مقاله دیگری از سری مقالات آموزش طراحی سایت همراه شما هستیم. در این مقاله به بررسی محتوا متنی و چگونگی استایل دهی به آن در CSS3 می پردازیم.

پیش از هر چیزی باید به این نکته اشاره کرد که CSS3 دربردارنده ی چندین خاصیت جدید در زمینه ی text می باشد. در این فصل از سری مقاله های آموزشی CSS3 با خاصیت های جدید متن آشنا می شوید که از جمله آنها می توان به text-overflow, word-wrap, word-break اشاره کرد.

خاصیت / Property text-overflow در CSS3 (خارج شدن متن از کادر)

خاصیت text-overflow تعیین می کند چگونه محتوای سرریز شده (overflowed یا از کادر خارج گشته) برای کاربر قابل دسترسی باشد و نمایش داده شود. ممکن است نوشته برش داده شود (clip), مرورگر متن را به اندازه ای که می تواند نمایش داده و ادامه آن را بریده و نمایش ندهد :


و یا به جای متنی که قادر به نمایش آن نیست نقطه چین بگذارد (حالت ellipsis) - (مرورگر متن را به اندازه ای که می تواند نمایش داده و ادامه آن را به صورت نقطه چین... نشان می دهد) :


کد CSS آن به ترتیب زیر می باشد :

p.test1 { 

white-space: nowrap; 

width: 200px; 

border: 1px solid #000000;

overflow: hidden; 

text-overflow: clip;

}

p.test2 { 

white-space: nowrap; 

width: 200px; 

border: 1px solid #000000; 

overflow: hidden; 

text-overflow: ellipsis; 

}


مثال زیر به شما نشان می دهد چگونه می توانید محتوای سرریز شده (overflowed content) را هنگامی که مکان نمای موس روی آن قرار می گیرد, نمایش دهید :

 div.test:hover { 

text-overflow: inherit; 

overflow: visible; 

}


خاصیت word-wrap در CSS3

خاصیت word-wrap در CSS3 به شما امکان می دهد کلمات و نوشته های طولانی را شکسته و آن را داخل خط بعدی قرار دهید (باعث می شود در صورتی که یک کلمه طولانی بود و به انتهای یک خط رسید، به دو قسمت تبدیل شده و قسمت دوم آن به سطر بعدی نوشته انتقال داده شود). به صورت پیش فرض (بدون استفاده از این خاصیت), کلمه ی بسیار طولانی که داخل کادر محتوا جای نمی گیرد, صرفاً از کادر سرریز شده و از آن خارج می گردد :


خاصیت word-wrap باعث می شود کلمه ی بسیار طولانی داخل سطر بعدی جای داده شود, حتی در صورت لزوم کلمه از وسط شکسته شده و نصف آن در خط بعدی قرار داده شود :


کد CSS آن به شرح زیر می باشد :

p {

word-wrap: break-word;

}


خاصیت word-break

خاصیت word-break در CSS3 باعث می شود در صورتی که یک کلمه طولانی به انتهای سطر رسید، مرورگر آن را به دو قسمت تقسیم کرده (شکسته) و ادامه ی آن را به سطر بعدی متن انتقال دهد.


کد CSS آن به ترتیب زیر می باشد :

p.test1 { 

word-break: keep-all; 

} 

p.test2 { 

word-break: break-all; 

}


خصوصیت های / Properties مربوط به متن و نوشته در CSS3

  • text-align-last :

​​​​​​​نحوه ی ترازبندی آخرین خط یک نوشته را تنظیم می کند.


  • text-emphasis :

​​​​​​​یک خاصیت مختصر نویسی (Shorthand property) است که خصوصیت های text-emphasis-color و text-emphasis-style را در یک تعریف واحد (declaration) مقداردهی می کند.


  • text-justify :

​​​​​​​برای تعیین نحوه چیدمان نوشته هنگامی که مقدار خاصیت text-align آن بر روی مقدار justify تنظیم شده است، استفاده می شود. مقدار justifyمتن را از هر دو طرف چپ و راست تراز بندی می کند.


  • text-overflow :

​​​​​​​تعیین می کند چگونه متنی که از کادر محتوا و محدوده ی مشخص شده ی آن خارج گشته به کاربر نشان داده شود.


  • word-break :

​​​​​​​

قوانین مربوط به شکستن خط را برای اسکریپت هایی که غیر از کاراکترهای چینی, ژاپنی و کره ای (non-CJK scripts) هستند, تعیین می کند.


  • word-wrap :

​​​​​​​

کلماتی که طولانی هستند را نصف کرده یا شکانده و بقیه ی آن را در سطر بعدی به نمایش می دهد.


با دیگر مقاله های از آموزش طراحی سایت همراه ما باشید...



آموزش طراحی سایت آموزش CSS3 دوره آموزش طراحی سایت آموزش متن در CSS3 استایل متن در CSS3 طراحی سایت
افشین دوشنبه 21 مهر 1399 ساعت 15:20
0 نظر

آموزش طراحی سایت-آموزش افزونه اسلایدر در جی کوئری

سلام بر دوستان عزیزم..

امروز با یک مقاله دیگه از سری مقاله های آموزش طراحی سایت همراه شما هستیم. مقاله امروز برای دوستانی کاربردیست که با جی کوئری آشنایی داشته باشند؛ چون قرار همراه با هم یکی از افزونه های (پلاگین های) جی کوئری تحت عنوان SlideBars رو یاد گرفته و بکار بگیریم..

افزونه Slidebars در jQuery برای اجرای سریع و سبک منوها و نوارهای باریک افقی و عمودی در وب سایت مورد استفاده قرار می گیرد. Slidebars 2 دارای ویژگی های هیجان انگیز و پرکاربردی است.

برای استفاده از این افزونه لازم است پیش از هر کاری فایل های 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');

})

//events


رویدادها

رویدادها برای ایجاد نمونه جدید، اعمال 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);

})   


با آموزش های دیگر در زمینه آموزش طراحی سایت همراه ما باشید..

آموزش طراحی سایت دوره آموزش طراحی سایت طراحی سایت آموزش جی کوئری آموزش افزونه های جی کوئری
افشین یکشنبه 20 مهر 1399 ساعت 13:00
0 نظر