آموزش طراحی سایت-گرید سیستم در Bootsratp 4

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

آموزش سیستم خانه بندی گرید سیستم Grid System بوت استرپ 4

سیستم گرید بندی (Bootstrap 4 Grid System) بوت استرپ 4 به شما اجازه می دهد تا 12 خانه یا ستون (column) در یک سطر داشته باشید. اگر نمی خواهید از 12 خانه هر سطر به صورت تک تک استفاده کنید، می توانید از ترکیب آنها، خانه یا ستون های بزرگتری ایجاد نمایید. شکل زیر، مفهوم کلی گرید سیستم بوت استرپ 4 را نشان می دهد :

سیستم گرید بندی بوت استرپ 4، کاملا واکنش گرا یا ریسپانسیو (Responsive) است و ستون ها در یک سطر، بر حسب عرض و اندازه صفحه نمایش، خود را مرتب کرده و بهترین حالت نمایش را ارائه می دهند. برای مثال در یک صفحه نمایش بزرگ، می توانید محتویات را در 3 ستون پهن نمایش دهید، در حالی که همان 3 ستون در یک صفحه موبایل، باریکتر شده، هر کدام در یک سطر کامل قرار گرفته و بر روی هم نمایش داده می شوند.

 

کلاسهای سیستم grid در Bootstrap 4

بوت استرپ 4، دارای 5 کلاس مختلف برای گریدبندی خانه در صفحه نمایش های مختلف است :

• کلاس col- : صفحه نمایش های بسیار کوچک که عرض آن ها کمتر یا مساوی 576 پیکسل است مثل موبایل.
• کلاس col-sm- : دستگاه ها با صفحه نمایش کوچک که عرض آن ها مساوی یا بزرگتر از 576 پیکسل است.
• کلاس col-md- : دستگاه ها با صفحه نمایش متوسط که عرض آن ها مساوی یا بزرگتر از 768 پیکسل است مثل تبلت.
• کلاس col-lg- : دستگاه هایی با صفحه نمایش بزرگ که عرض آن ها مساوی یا بزرگتر از 992 پیکسل است.
• کلاس col-xl- : دستگاه هایی با صفحه نمایش بسیار بزرگ که عرض آن ها مساوی یا بزرگتر از 1200 پیکسل است مثل مانیتورهای عریض.

کلاس های فوق را می توایند جهت ایجاد قالب و چیدمان های دینامیک و فلکسیبل (flexible layouts)، با هم ترکیب کرده و استفاده نمایید.

 

نکته : تأثیرگذاری کلاس ها از اندازه کوچک به بزرگ است، یعنی اگر قانونی برای سایز کوچکتر تعیین کنید، به سایزهای بزرگ هم تعمیم پیدا می کند. برای مثال اگر می خواهید عرض یکسانی را برای یک عنصر در اندازه های sm و md، تعیین نمایید، کافی است مقدار آن را در حالت sm مشخص کنید و خود به خود در حالت md نیز اجرا می شود.

 

آموزش قوانین گرید سیستم در بوت استرپ 4

در لیست زیر، برخی از مهم ترین قوانین و شرایط ی که در هنگام کار با گرید سیستم در bootstrap 4 بایستی رعایت نمایید را معرفی کرده ایم :

• سطرها (Rows) بایستی درون یک عنصر دربرگیرنده یا Container با کلاس .container (عرض ثابت) یا کلاس .container-fluid (تمام عرض صفحه یا عنصر مادر آن)، قرار گرفته تا ترازبندی صحیح داشته و مارجین و padding آن ها درست تنظیم شود.
• از سطرها (Rows) برای ایجاد گروه های افقی از ستون ها (Columns)، استفاده می شود.
• محتویات بایستی درون ستون ها (Columns) قرار گرفته و فقط ستون ها می توانند اولین فرزندان یا زیرمجموعه سطرها باشند.
• کلاس های از قبل تعریف شده ای مثل row یا col-sm-4 برای قالب بندی سریع گریدها (Grid)، تعریف شده اند.
• ستون ها (Columns) بین محتویات شان فاصله یا گاتر (Gutter) ایجاد می کنند به وسیله Padding. این فاصله یا Padding در سطر اول و آخر عنصر مادر، به صورت offset تعیین می شود به وسیله مارجین منفی که در کلاس row وجود دارد.
• ستون های گرید (Grid Columns) با تعیین عددی بین 1 تا 12 از 12 ستون ممکن، ایجاد می شوند. برای مثال، اگر می خواهید 3 ستون هم عرض داشته باشید، بایستی 4 خانه گرید به هر کدام اختصاص داده و از کلاس ی مثل col-sm-4 استفاده نمایید.
• میزان عرض ستون ها در Bootstrap 4، برحسب درصد تنظیم می شود، لذا همواره در عنصر مادر (row)، شناور بوده و سایز آن ها بستگی مستقیم به عرض عنصر دربرگیرنده آن ها دارد.
• بزرگترین فرق بین Bootstrap4 و Bootstrap 3 این است که بوت استرپ 4، به جای خاصیت شناورسازی (floats) از فلکس باکس (Flex) استفاده می کند. یک مزیت بزرگ flexbox این که ستون های گرید بدون عرض مشخص، به صورت خودکار با عرض هایی یکسان (و حتی ارتفاع یکسان) ترازبندی و قالب دهی می شوند که در سیستم floats به این صورت نیست. 3 المنت که کلاس col-sm دارند، در تمامی صفحه نمایش ها (حتی بزرگتر از موبایل تا بالاترین حد)، همواره 33.33 درصد از عرض صفحه یا عنصر Container را اشغال می کنند.

 

راهنمایی : اگر در مورد FlexBox، آشنایی کافی ندارید، به بخش آموزش فلکس باکس در سایت تحلیل داده بروید.

 

نکته : گزینه FlexBox در مرورگرهای IE9 و قبلتر، پشتیبانی نمی شود. لذا اگر پشتیبانی مرورگرهای IE8 و IE9 ار سایت تان برای شما مهم است، از بوت استرپ 3 استفاده نمایید. بوت استرپ 3، پایدارترین نسخه بوت استرپ بوده و هنوز توسط تیم توسعه دهنده جهت رفع باگ ها احتمالی، ارائه مستندات آموزشی و ... پشتیبانی می شود. ولی قابلیت های جدید از جمله FlexBox به آن اضافه نشده است.

 

بررسی ساختار پایه یک گرید بوت استرپ 4

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

مثال گرید سیستم

< !-- Control the column width, and how they should appear on different devices -->
< div class="row">
< div class="col-*-*">< /div>
< div class="col-*-*">< /div>
< div class="col-*-*">< /div>
< /div>
< !-- Or let Bootstrap automatically handle the layout -->
< div class="row">
< div class="col">< /div>
< div class="col">< /div>
 < div class="col">< /div>
< div class="col">< /div>
< /div>

در مثال اول، به وسیله تگ div با کلاس row، یک سطر افقی ایجاد کرده ایم. سپس به تعداد مورد نظر، ستون های دلخواه را با تگ هایی با کلاس col-*-*، درون آن قرار داده ایم. * اول در کلاس فوق، تعیین کننده عرض صفحه نمایش هدف است که می تواند یکی از مقادیر sm، md، lg و یا xl را داشته باشد. * دوم هم تعیین کننده عرض ستون بر حسب عددی از 1 تا 12 است که مثلا 6، یعنی 6 واحد از 12 خانه را اشغال کند.

در مثال دوم، به جای تعیین عدد برای هر ستون در کلاس col، اجازه داده ایم تا خود بوت استرپ قالب (layout) آن را با ایجاد ستون های هم عرض مدیریت کند. مثلا کاربرد در عنصر با کلاس col، یعنی اینکه از 100 درصد عرض، به هر ستون 50 درصد اختصاص بده. به همین ترتیب با 3 عنصر کلاس Col، یعنی عرض هر کدام 33 درصد و با چهار ستون عرض هرکدام 25 درصد، عرض کل سطر باشد.

همچنین در کلاس فوق می توانید از حالت col-sm|md|lg|xl نیز استفاده نمایید تا در هر اندازه صفحه نمایش، نحوه قرارگیری ستون ها را به دقت تعیین نمایید.

 

جزئیات کامل گرید سیستم Grid System در بوت استرپ 4

• عرض کمتر از 576 پیکسل = بسیار کوچک
• عرض بزرگتر یا مساوی 576 پیکسل = کوچک
• عرض بزرگتر یا مساوی 768 پیکسل = متوسط
• عرض بزرگتر یا مساوی 992 پیکسل = بزرگ
• عرض بزرگتر یا مساوی 1200 پیکسل = بسیار بزرگ

 

پیشوند کلاسهای سیستم grid در Bootstrap 4 

• col-
• .col-sm
• .col-md
• .col-lg
• .col-xl.

رفتار گرید سیستم در Bootsratp 4

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

 

عرض عنصر دربرگیرنده Container در گرید سیستم در Bootsratp 4

• بدون عرض (auto اتوماتیک)
• 540 پیکسل.
• 720 پیکسل.
• 960 پیکسل.
• 1140 پیکسل.

مناسب برای :

• موبایل هایی با صفحات بسیار کوچک.
• موبایل های معمولی.
• تبلت ها.
• لپ تاپ ها.
• مانیتورهای بزرگ و کامپیوترهای رومیزی.

 

تعداد ستون در هر سطر

• 12.
• 12.
• 12.
• 12.
• 12.

 

عرض گاتر (Gutter)

• 30 پیکسل (15 پیکسل از هر دو طرف ستون).
• 30پیکسل (15 پیکسل از هر طرف ستون).
• 30پیکسل (15 پیکسل از هر طرف ستون).
• 30پیکسل (15 پیکسل از هر طرف ستون).
• 30پیکسل (15 پیکسل از هر طرف ستون).

 

قابل توجه تو در تو شدن Nested

• yes.
• yes.
• yes.
• yes.
• yes.

داشتن offset

• بله.
• بله.
• بله.
• بله.
• بله.

 

ترتیب قرار گرفتن ستون ها

• بله.
• بله.
• بله.
• بله.
• بله.

 

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

آموزش طراحی سایت-متدهای تبدیل دو بعدی در CSS3

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

خاصیت Transform در تبدیل دو بعدی

خواص transform در CSS3 به طراح وب امکان می دهند عناصر دلخواه را منتقل کرده, چرخانده, مقیاس بندی و همچنین در صورت لزوم اریب دار کند (با زوایای مختلف بچرخانید). خاصیت transformation (تبدیل) در واقع قابلیت تغییر شکل, اندازه و موقعیت المان مورد نظر را فراهم می آورد. CSS3 همچنین قابلیت تبدیل دو بعدی و سه بعدی عناصر را پشتیبانی می کند.

متدهای تبدیل دو بعدی در CSS3

در این بخش با توابع تبدیل دوبعدی عناصر (2D transformation methods) در CSS3 آشنا خواهید شد :

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

 

متد translate() در تبدیل دو بعدی در CSS

متد translate() یک عنصر را از موقعیت فعلی آن حرکت می دهد (البته بر اساس پارامترهایی که برای محورهای X و Y تعیین شده است). در واقع با بهره گیری از این متد می توان المان دلخواه را کپی کرده و آن را به مکانی دیگر انتقال داد. مثال زیر تگ یا عنصر div را به اندازه ی 50 پیکسل به سمت راست و 100 پیکسل پایین تر از موقعیت جاری آن حرکت می دهد :

div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}

 

متد rotate() در تبدیل دو بعدی در CSS

متد rotate() بسته به درجه ی تعیین شده یک عنصر را در جهت عقربه ی ساعت یا در جهت خلاف آن می چرخاند (دوران می کند). مثالی که زیر مشاهده می کنید المان div را به اندازه ی 20 درجه در جهت حرکت عقربه ی ساعت می چرخاند :

div {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}

استفاده از مقادیر منفی (negative values) باعث می شود عنصر خلاف عقربه ی ساعت چرخانده شود. مثال زیر المان div را 20 درجه در خلاف جهت عقربه ی ساعت حرکت می دهد (می چرخاند) :

div {
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}

 

متد Scale() در تبدیل دو بعدی در CSS​​​​​​​

تابع scale() اندازه ی المان را افزایش یا کاهش می دهد (کوچک و بزرگ می کند). این کار بر اساس پارامترهایی که برای طول و عرض (height ,width) تعریف می شود صورت می پذیرد. مثال زیر عرض یا پهنای المان div را دو برابر عرض و پهنای اصلی و طول یا ارتفاع آن را سه برابر طول اصلی آن المان تعریف می کند 

div {
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3);
}

نمونه ی زیر عنصر div را نصف عرض و ارتفاع اصلی خود عنصر تعیین می کند :

div {
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Safari */
transform: scale(0.5,0.5);
}

 

متد Skew() در تبدیل دو بعدی

می توانید عنصر مورد نظر خود را در 2 جهت عمودی و افقی به صورت 3 بعدی، بر حسب واحد deg و اندازه ی مشخص شده بچرخوانید. به عبارت دیگر به کمک این متد می توان عنصر مورد نظر را با زوایای مختلف حتی 360 بچرخانید. مثال زیر المان div را به اندازه ی 20 درجه در امتداد محور x (x-axis) و در امتداد محور Y به اندازه ی 10 درجه می چرخاند می کند :

div {
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}

 

تابع skewX()

متد skewX() یک المان را در امتداد محور X بر حسب واحد deg می چرخاند. br نمونه ی زیر المان div را در امتداد محور X به اندازه ی 20 درجه می چرخاند :

div {
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}

 

تابع skewY()

متد skewY() یک عنصر را در امتداد محور Y به اندازه ی درجه ی زاویه ی تعیین شده (بر حسب واحد deg) می چرخاند. مثال زیر عنصر div را به اندازه ی 20 درجه در امتداد محور Y می چرخاند :

div {
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}

حال چنانچه پارامتر دومی تعیین نشده باشد, مقداری 0 خواهد داشت. بنابراین مثال زیر المان div را به اندازه 20 درجه در امتداد محور X می چرخاند :

div {
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
} 

 

متد matrix()

متد matrix() کلیه ی متدهای تبدیل دو بعدی را در یک تابع واحد می گنجاند (ادغام می کند). تابع matrix() 6 مقدار می گیرد, که شامل توابع ریاضی (mathematics functions) می شود و به شما امکان می دهد المان های خود را بچرخانید, مقایس بندی (کوچک و بزرگ) کنید, حرکت دهید (translate: انتقال دادن) و همچنین آن ها را مطابق نیاز با زوایای مختلف بچرخانید (skew) کنید :

div {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}

 

تمامی خاصیت های transform CSS3 به ترتیب زیر می باشند :

• خاصیت transform : وضعیت نمایش المان را به دو بعدی یا سه بعدی تبدیل می کند.
• خاصیت transform-origin : اجازه می دهد موقعیت المان های تبدیل شده (transformed element) را تغییر دهید.

متدهای تبدیل دو بعدی نیز به شرح زیر هستند :

• متد (matrix(n,n,n,n,n,n : تبدیل دو بعدی عنصر را با تابع matrix که 6 مقدار به آن اختصاص داده شده باشد, تعریف می کند.
• متد (translate(x,y : انتقال دو بعدی عنصر را در حول محورهای X و Y مقدار دهی می کند.
• متد (translateX(n : انتقال دو بعدی عنصر را در طول محور X تعریف می کند.
• متد (translateY(n : انتقال دو بعدی عنصر را امتداد محور Y تنظیم و مقدار دهی می کند.
• متد (scale(x,y : مقیاس بندی عنصر را به صورت دو بعدی تعیین کرده, طول و عرض عناصر را اصلاح می کند.
• متد (scaleX(n : مقیاس بندی عنصر را به صورت دو بعدی تعریف کرده, عرض عنصر را تغییر می دهد.
• متد (scaleY(n : تبدیل مقیاس عنصر را به صورت دو بعدی تعریف کرده, ارتفاع یا طول آن را اصلاح می کند.
• متد (rotate(angle : چرخش عنصر را به صورت دو بعدی تعریف می کند و زاویه ی آن را در پارامتر مربوطه تعیین می کند.
• متد (skew(x-angle,y-angle : عنصر را در امتداد هر دو محور X و Y به صورت دو بعدی بسته به مقدار تعیین شده می چرخاند.
• متد (skewX(angle : عنصر را به صورت دو بعدی در امتداد محور X می چرخاند (تغییر و تبدیل وضعیت عنصر را به صورت دو بعدی در حول محور X مقداردهی و تعریف می کند).
• متد (skewY(angle : عنصر را به صورت دو بعدی در امتدادی محور Y (بر اساس مقدار تعیین شده) می چرخاند.

 

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

آموزش طراحی سایت-پلاگین 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);

 

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

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

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

امروز با مقاله ای دیگر از سری مقاله های آموزش طراحی سایت همراه شما هستیم. در این مقاله با هم و در کنار هم می آموزیم که چطور می توانیم متود 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 میلی ثانیه است.

 

سازنده ی (7)new Date Numbers، یک شی جدید 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 در نظر گرفته می شود.

متدهای شی date

هنگامی که یک شی 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)");

 

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

آموزش طراحی سایت-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>

 

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

آموزش طراحی سایت-آموزش 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 :

​​​​​​​

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

 

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

 

 

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

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

امروز با یک مقاله دیگه از سری مقاله های آموزش طراحی سایت همراه شما هستیم. مقاله امروز برای دوستانی کاربردیست که با جی کوئری آشنایی داشته باشند؛ چون قرار همراه با هم یکی از افزونه های (پلاگین های) جی کوئری تحت عنوان 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);
})   

 

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

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

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

شی math به شما این امکان را می دهد که روی اعداد عملیات ریاضی انجام دهید. شی math امکان انجام عملیات محاسباتی و ریاضی را برای برنامه نویس فراهم می کند. شی بیان شده دربردانده ی مجموعه متد ها و توابع ریاضی می باشد. یکی از کاربردهای معمول شی math در زبان جاوا اسکریپت ایجاد یک عدد تصادفی است.

نمونه 1 :

    function myFunction() {
        document.getElementById("demo").innerHTML = Math.random();
    }

شی Math خود دارای سازنده (constructor) نیست. لازم نیست هیچ متدی ابتدا یک شی math ایجاد کند.

 

توابع ()Math.min و ()Math.max

متدهای ()Math.min و ()Math.max را می توان برای بدست آوردن مقدار بیشینه (بزرگترین عددی که به عنوان پارامتر ارسال شده) و کمینه (کوچکترین عددی که به عنوان پارامتر ارسال شده) از میان مجموعه ای از آرگومان ها بکار برد.

نمونه 2 :

 function myFunction() {
document.getElementById("demo") =
 Math.min(0, 150, -2230, 20, -8, -200);
 }

نمونه 3 :

function myFunction() {
   document.getElementById("demo") =
Math.max(0, 150, 30, 20, -8, -200);
}

 

تابع ()Math.random

یک عدد تصادفی بین 0 و 1 را به عنوان خروجی (output) برمی گرداند.

نمونه 4 :

Math.random();              // returns a random number‎

تابع ()math.random همیشه عددی کوچکتر از 1 بر می گرداند.

 

تابع ()Math.round

یک عدد را به نزدیکترین عدد صحیح (integer) گرد می کند(به عنوان مثال عدد x را گرد کرده و به نزدیکترین عدد صحیح به آن تبدیل می کند).

نمونه 5 :

 

function myFunction() {
    document.getElementById("demo") = Math.round(4.4);
    document.getElementById("demo1") = Math.round(4.7);

}

 

تابع ()Math.ceil

در آموزش طراحی سایت می آموزید که این متد یک عدد را به بالا گرد کرده و نزدیکترین عدد صحیح (integer) به آن را برمی گرداند.

نمونه 6 :

function myFunction() {
  document.getElementById("demo") = Math.round(4.4);
}

توابع ()Math.floor و ()Math.random را می توان به طور همزمان برای برگرداندن یک عدد تصادفی بین 0 و 10 مورد استفاده قرار داد.

 

تابع ()Math.floor

یک عدد را به پایین گرده کرده و نزدیکترین عدد صحیح به آن را برمی گرداند.

نمونه 7 :

function myFunction() {
document.getElementById("demo") = Math.floor(4.7);
}

توابع ()Math.floor و ()Math.random را می توان به طور همزمان برای برگرداندن یک عدد تصادفی بین 0 و 10 مورد استفاده قرار داد.

function myFunction() {
    document.getElementById("demo") =
    Math.floor(Math.random() * 11);
}

 

ثابت های ریاضی

جاوا اسکریپت در کل 8 ثابت ریاضی دارد که با استفاده شی math می توان به آن ها دسترسی پیدا کرد.

function myFunction() {
    document.getElementById("demo") =
    Math.E + "
" +
    Math.PI + "
" +
    Math.SQRT2 + "
" +
    Math.SQRT1_2 + "
" +
    Math.LN2 + "
" +
    Math.LN10 + "
" +
    Math.LOG2E + "
" +
    Math.LOG10E + "
"
}

آموزش طراحی سایت : توابع شی math را می توان بصورت زیر فهرست کرد.

1. abs(x) =

قدر مطلق عدد x را برمی گرداند.

2. acos(x) =

آرک کوسینوس عدد x را بر حسب رادیان برمی گرداند.

3. asin(x) =

آرک سینوس عدد x را بر حسب رادیان برمی گرداند.

4. atan(x) =

آرک تانژانت عدد x را به صورت مقدار عددی بین رادیان های clip_image002 - و clip_image002[1] برمی گرداند.

5. atan2(y,x) =

آرک تانژانت خارج قسمت آرگومان های عدد x را برمی گرداند یا به عبارت ساده تر این متد آرک تانژانت عدد x را بر می گرداند.

6. ceil(x) =

عدد x رو به بالا گرد کرده و نزدیک ترین عدد صحیح (integer) به آن را بر می گرداند.

7. cos(x) =

کسینوس x را بر حسب رادیان برمی گرداند.

8. exp(x) =

مقدار عدد Ex را برمی گرداند.

9. floor(x) =

مقدار x را رو به پایین گرد کرده و نزدیک ترین عدد صحیح به آن را بر می گرداند.

10. log(x) =

لگاریتم طبیعی x را بر مبنای عدد e بر می گرداند.

11. max(x,y,z,...,n) =

بزرگترین عدد که به عنوان آرگومان ارسال شده را برمی گرداند.

12. min(x,y,z,...,n) =

کوچکترین عدد که به عنوان پارامتر پاس داده شده را بر می گرداند.

13. pow(x,y) =

مقدار x را به توان y رسانده و حاصل آن را برمی گرداند.

14. ()random =

یک عدد تصادفی بین 0 و 1 را به عنوان خروجی برمی گرداند.

15. round(x) =

مقدار x را به نزدیک ترین عدد صحیح به آن گرد می کند.

16. sin(x) =

مقدار سینوس x را بر حسب رادیان برمی گرداند.

17. sqrt(x) =

جذر یا ریشه ی دوم عدد x را برمی گرداند.

18. tan(x) =

تانژانت یک زاویه را برمی گرداند / مقدار تانژانت x را بازمی گرداند.

 

در روزهای آتی با مقاله دیگه ای از آموزش جاوا اسکریپت با شما خواهم بود.

آموزش ASP.NET Core-آموزش ساخت پروژه در ASP.NET Core

​تصمیم گرفتم آموزش ASP.NET COre امروز رو با ساخت پروژه در ASP.NET Core MVC شروع کنیم.

امروز میخوایم راجع به ساخت پروژه در ASP.NET Core MVC و اضافه کردن کنترلر به پروژه با همدیگه صحبت کنیم.

پیش از هر چیزی باید ویژوال استودیو رو بر روی سیستم خودتون نصب کنید و برای نصب ویژوال با ورژن های بالاتر از 2017 باید دو گزینه زیر رو انتخاب کنید :

• ASP.NET and web development (under Web & Cloud)
• .NET Core cross-platform development (under Other Toolsets)

پس از آن باید یک برنامه تحت وب ایجاد کنید که برای اینکار باید مسیر زیر را طی کنید :

​

 

برای ساخت پروژه در ASP.NET Core MVC، بعد از باز شدن کامل پنجره New Project در پنل سمت چپ گزینه Net Core را انتخاب می کنیم، در پنل وسط تب (ASP.NET Core Web Application (.NET Core انتخاب می کنیم و نام پروژه را MvcMovie می گذاریم. بعد از باز شدن پنچره New ASP.NET Core Web Application (.NET Core) - MvcMovie گزینه Web Application را انتخاب کنید بگونه ای که حالت پیش فرض No Authentication باشد.

 

​

 

ویژوال استودیو از یک قالب پیش فرض برای پروژه های MVC استفاده می کند. شما با وارد کردن یک نام پروژه و انتخاب چند گزینه یک برنامه کاری واقعی دارید. با استفاده از کلید F5 یا Ctrl+F5 می توانید پروژه ساخته شده را اجرا کنید.

F5 = Debug Mode     &     Ctrl+F5 = Non-Debug Mode

 

​

 

با استفاده از کلید Ctrl+F5 می توانید بدون دیباگ کردن، پروژه را اجرا کرده و با تغییر در کد ها، بدون نیاز به اجرا میتوانید با رفرش کردن مروگر تغییرات را ببینید.

 

​

 

قالب پیش فرض به شما لینک های Home,Contact,About را می دهد. (Model-View-Controller (MVC الگوی معماری این برنامه را به سه قسمت اصلی تقسیم می کند :

1. Model
2. View
3. Controller

فریم ورک MVC در آموزش ASP.NET Core MVC

فریمورک MVC که مخفف Model-View-Controllerاست، یک قالب معماری است که برنامه را از نظر منطقی به سه کامپوننت اصلی مدل (Model)، ویو (View) و کنترلر (Controler) تقسیم می کند. هر یک از این کامپوننت ها برای مدیریت جنبه خاصی از توسعه یک برنامه ساخته می شود. MVC منطق تجاری و لایه نمایش را از یکدیگر جدا می کند. این معماری برای رابط های کاربری گرافیکی قابل اجرا در دسکتاپ استفاده می شد، اما امروزه هم برای طراحی برنامه های تحت وب و هم برنامه های موبایل استفاده می شود.

تاریخچه MVC

معماری MVC برای اولین بار در سال 1979 مورد بحث قرار گرفت. پس از آن معماری MVC در سال 1987 در زبان برنامه نویسی Smalltalkظهور کرد و در سال 1988 بعنوان یک مفهوم عمومی پذیرفته شد. در مدت اخیر نیز قالب MVC در برنامه های مدرن تحت وب بصورت گسترده مورد استفاده قرار گرفته است.

ویژگی های MVC

• فریمورکی با قابلیت تست، نصب و توسعه پذیری بالاست.
• امکان کنترل کامل HTMLرا علاوه بر URLها برای شما فراهم می کند.
• قدرت نفوذ در مشخصه های موجود ارائه شده توسط ASP.NET ، JSP ، Django و ... را داراست.
• تفکیک منطق برنامه بصورت آشکار : مدل (Model) ، ویو (View) و کنترلر (Controler). تفکیک وظایف برنامه مانند : منطق تجاری، منطق UIو منطق ورودی.
• آدرس دهی به URLبرای URLهای سازگار با سئو.
• قابلیت پشتیبانی برای (Test Driven Development (TDD

معماری MVCدر ASP.NET

​

 

سه کامپوننت مهم MVC به شرح زیر هستند :

مدل (Model) : مدل تمامی داده ها و منطق مربوط به آنها را شامل می شود.

ویو (View) : اطلاعات را به کاربر نمایش می دهد یا تعامل کاربر با سیستم را مدیریت می کند.

کنترلر (Controller) : رابط کاربری میان کامپوننت های View و Model است.

 

ویو (View) :

ویو بخشی از یک برنامه است که مسئولیت نمایش اطلاعات را بعهده دارد. ویوها بوسیله داده های جمع آوری شده از داده های مدل ایجاد می شوند. یک ویو برای دریافت اطلاعات به مدل درخواست می دهد. ویو همینطور داده های مربوط به چت ها، دیاگرام ها و جدول را نیز نشان می دهد. برای مثال، هر ویو تمامی کامپوننت های UI همچون Text Box، Drop Down و ... را شامل می شود.

 

کنترلر (Controller) :

کنترلر بخشی از یک برنامه است که تعامل کاربر با برنامه را مدیریت می کند. کنترلر، ورودی های کیبورد و موس را تفسیر کرده، و به مدل و ویو اطلاع رسانی می کند تا تغییرات را بصورت مناسب اعمال کند. کنترلر دستورات را به مدل می فرستد تا وضعیت خود را بروزرسانی کند (برای مثال ذخیره یک مستند خاص). کنترلر همینطور دستورات را به ویو مربوطه ارسال می کند تا نمایش ویو را تغییر دهد (برای مثال جابجایی یک مستند خاص).

 

مدل (Model) :

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

کامپوننت مدل به درخواست های فرستاده شده از ویو (View) و همینطور دستورات کنترلر (Controller) پاسخ می دهد تا خود را بروزرسانی کند. این بخش همینطور پایین ترین سطح از قالب است که مسئول حفظ و نگهداری داده هاست.

 

مثالی جالب از MVC :

حال بیایید به مصداقی از قالب MVC که در زندگی روزمره با آن مواجه هستیم، بپردازیم :

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

• گارسون به نزد شما می آید و شما سفارش خود را ثبت می کنید. گارسون شما را نمی شناسد، تنها جزئیات سفارش غذا شما را ثبت می کند.
• سپس، گارسون به آشپزخانه می رود؛ اما گارسون غذا را برای شما آماده نمی کند.
• پس از اینکه گارسون سفارش شما را بهمراه شماره میز به آشپز تحویل داد، آشپز غذا را برای شما آماده می کند.
• آشپز از مواد اولیه برای طبخ غذا شما استفاده می کند. تصور کنید شما یک ساندویچ سبزیجات سفارش داده اید، پس آشپز مواد مورد نیاز برای غذا شما را از یخچال تهیه می کند.
• سرانجام آشپز غذا را به گارسون تحویل می دهد و این وظیفه گارسون است که غذا را به بیرون از آشپزخانه منتقل کند.
• حال گارسون می داند که شما چه غذایی را سفارش داده اید و این غذا چطور سرو می شود.

 

کامپوننت های MVC در این مثال به شرح زیر هستند :

View = You

Controller = Waiter

Model = Cook

Data = Refrigerator

فریمورک های معمول MVC در وب

برخی فریمورک های معمول در MVC عبارتند از :

• Ruby on Rails
• Django
• CakePHP
• Yii
• CherryPy
• Spring MVC
• Catalyst
• Rails
• Zend Framework
• CodeIgniter
• Laravel
• Fuel PHP
• Symphony

مزایا فریم ورک MVCدر Asp.NET Core

• حفظ و نگهداری کدها و همینطور توسع و رشد آنها آسان است.
• کامپوننت مدل در MVCرا می توان بصورت مجزا از کاربر تست کرد.
• پشتیبانی آن برای نمونه کلاینت های جدید آسانتر است.
• توسعه کامپوننت های مختلف می تواند بصورت موازی انجام شود.
• فریمورک MVC با تقسیم برنامه به سه واحد – Model, View, Controller – به شما کمک می کند که پیچیدگی برنامه را کاهش دهید.
• این فریمورک تنها از یک قالب Front Controller که درخواست های یک برنامه تحت وب را در یک کنترلر مجزا پردازش می کند استفاده می کند.
• بهترین پشتیبانی را برای Test-Driven Development ارائه می دهد.
• برای برنامه های تحت وبی که توسط تیم های بزرگی از طراحان و توسعه دهندگان وب پشتیبانی می شوند، عملکرد خوبی را از خود نشان می دهند.
• تفکیک مسئولیت ها در این فریمورک بخوبی انجام می شود.
• با فرایند بهینه سازی موتور جستجوگر (سئو) سازگار است.
• تمامی کلاس ها و آبجکت ها مستقل از یکدیگر هستند و می توانند بصورت مجزا تست شوند.
• فریمورک MVC دسته بندی منطقی فعالیت های مرتبط بهم در یک کنترلر را امکانپذیر می سازد.

در یک برنامه MVC نمایش(VIew) ها فقط اطلاعات را نمایش می دهند اما کنترلر(controller ) در تعامل با کاربر می باشد و به ورودی های کاربر واکنش مناسب می دهد. در پنجره Solution Explorer بر روی فولدر Controller راست کلیک کرده و AddNew Item را انتخاب می کنیم.

 

​

 

در پنل سمت چپ گزینه Web را انتخاب کرده و در پنل وسط گزینه MVC Controller Class را انتخاب می کنیم و نامش را HelloWorldController می گذاریم.

 

​

 

می توانید کدهای زیر را کپی کنید :

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;
namespace MvcMovie.Controllers
{
public class HelloWorldController : Controller
{
// 
// GET: /HelloWorld/
public string Index()
{
return "This is my default action...";
}
// 
// GET: /HelloWorld/Welcome/ 
public string Welcome()
{
return "This is the Welcome action method...";
}
}
}

 

 

هر متد (public) در کنترلر (controller ) را می توان به عنوان (HTTP endpoint)خواند. در مثال بالا هر دو متد یک رشته(string) بر می گردانند.HTTP endpoint یک URL قابل جستجو در برنامه وب است مانند: http://localhost:1234/HelloWorld و از پروتکل HTTP استفاده می کند.هر دو متد ما با استفاده از HTTP GET فراخوانی شده اند. برنامه را با استفاده از Ctrl+F5 (non-debug mode) اجرا می کنیم و در آخر مسیر URL کلمه HelloWorld را اضافه می کنیم. متد Index یک رشته(string) بر می گرداند.

 

​

 

معماری MVC کنترلر را بسته به نوع ورودی URL فراخوانی میکند(به همراه اکشن مورد نظر ). حالت پیش فرض URL routing logic که توسط MVC استفاده می شود یک فرمت به شکل زیر است :

/[Controller]/[ActionName]/[Parameters]

فرمت Routing شما درون فایل Startup.cs قرار دارد و پیش فرض به شکل زیر است.

app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});

 

اولین بخش URL، کلاس کنترل را برای اجرا تعیین می کند. بنابراین localhost:xxxx/HelloWorld نقشه رسیدن به کلاس HelloWorldController می باشد. دومین بخش URL، تعیین اکشن(action ) در کلاس کنترل می باشد. بنابراین localhost:xxxx/HelloWorld/Index باعث می شود اکشن Index از کلاس HelloWorldController اجرا شود. حال درمرورگر آدرسhttp://localhost:xxxx/HelloWorld/Welcome وارد می کنیم.متد Welcome اجرا می شود و رشته "This is the Welcome action method..." بر می گرداند. برای این URL کنترلر(HelloWorld) و اکشن (Welcome) می باشد.

 

​

 

با تغییر کد می توانیم به صورت پارامتر از URL به کنترلر دیتا بفرستیم. برای مثال /HelloWorld/Welcome?name=Rick&numtimes=4. اکشن Welcome را به صورت زیر تغییر می دهیم.

// GET: /HelloWorld/Welcome/ 
// Requires using System.Text.Encodings.Web;
public string Welcome(string name, int numTimes = 1)
{
return HtmlEncoder.Default.Encode($"Hello {name}, NumTimes is: {numTimes}");
}

 

توجه داشته باشید که برای نشان دادن این ویژگی سی شارپ به طور اختیاری به پارامتر numTimes مقدار پیش فرض دادیم. از کد HtmlEncoder.Default.Encode استفاده می کنیم برای محافظت برنامه از ورودی های مخرب (یعنی جاوااسکریپت) برنامه را اجرا کرده و به آدرس زیر می رویم:

http://localhost:xxxx/HelloWorld/Welcome?name=Rick&numtimes=4

به جای XXXX پورت سیستم خود را وارد کنید. می توانید از پارامتر های دیگه ای هم به صورت دلخواه استفاده کنید. بخش MVC Model Binding به صورت خودکار پارامتر های نام گذاری شده از query string در URL به پارامتر های اکشن خود انتقال می دهد.

 

​

 

در عکس بالا بخش [Parameters] URL هنوز استفاده نشده.( name) و (numTimes) پارامترها منقل می شوند به query string. علامت سوال (؟) در آدرس بالا یک جدا کننده می باشد و query string آن را دنبال می کند. & کاراکتر های query string را جدا می کند. اکشن Welcome را به صورت زیر تغییر می دهیم.

public string Welcome(string name, int ID = 1)
{
return HtmlEncoder.Default.Encode($"Hello {name}, ID: {ID}");
}

برنامه را اجرا کرده و به آدرس زیر می رویم:

http://localhost:xxx/HelloWorld/Welcome/3?name=Rick

 

​

 

این بار از بخش سوم [Parameters] URL تحت عنوان ID استفاده می کنیم. اکشن (Welcome) شامل یک پارامتر ID است که الگو URL را در MapRoute دنبال می کند. اگر به دنبال ID علامت سوال (؟) بزاریم به این معنی می شود که پارماتر ID اختیاری است.

app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});

 

در این مثال کنترلر در واقع بخشی از "VC" از "MVC" انجام داده است یعنی نمایش (view ) و کنترلر(controller ). کنترلر به طور مستقیم HTML بر می گرداند.به طور کلی شما نمی خواهید که کنترلر HTML بر گرداند زیرا برا نوشتن کد و نگهداری بسیار دشوار می شود. در عوض، شما معمولا از فایل قالب (template) جداگانه Razor برای کمک به تولید HTML استفاده می کنید.

 

در آموزش بعدی از مجموعه آموزش های ASP.NET Core این کار را انجام می دهید.

​

آموزش Jquery-مثال عملی

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

آموزش مثال Hello, world در Jquery

در مبحث قبلی با نحوه ی اضافه کردن jQuery به صفحه ی وب برای بهره وری از امکانات فوق العاده زیاد آن آشنا شدید. پیش از شروع به استفاده از کتابخانه ی jQuery بایستی با مفاهیم پایه ای آن آشنایی پیدا کنید و نظر خود را به مثال ساده ی زیر جلب نمایید:

نمونه یک

 

Hello, world!

 

 

$("#divTest1").text("Hello, world!");

 

همان طور که مشاهده می کنید، یک تگ با شناسه ی "divTest1" داریم. از علامت $ که به مثابه ی یک میانبر برای دسترسی به المان های HTML ایفای نقش می کند، استفاده می کنیم. بنابراین با استفاده از این علامت تمامی المان های HTML با شناسه ی "divTest1" را انتخاب کرده و مقدار "Hello, world!" را در آن قرار می دهیم (text آن را با رشته ی "Hello, world!" تنظیم می کنیم).
حتی چاپ کردن همین متن ساده در جاوا اسکریپت به کدنویسی بسیار بیشتر نیاز داشت:

نمونه دو

 

Hello, world!

 

 

document.getElementById("divTest2") = "Hello, world!";

 

اگر المان HTML فقط یک class داشت و از ID نیز برخوردار نبود، این کد به مراتب طولانی تر می شد.
به طور معمول، باید صبر کنید تا صفحه ی وب وارد مرحله یا وضعیت READY شود و سپس اقدام به دستکاری محتویات آن نمایید. مثال های ساده ی بالا (و همچنین تعدادی از عملیات پیچیده ی دیگر) در بیشتر مرورگرها، پیش از آماده شدن صفحه نیز قابل اجرا هستند. اما این امر در مورد تمامی عملیات با jQuery (پیش از بارگذاری کامل صفحه و آماده شدن آن) امکان پذیر نیست. خوشبختانه، jQuery اجرای این عملیات را نیز بسیار آسان ساخته است.