تصاویر ریسپانسیو – تکنیک دوم

  • بوسیله: محسن شفیعی
  • در 1392/01/10 - 19:11
  • نظرات (4)
طراحی ریسپانسیو

طراحی ریسپانسیو

چندی قبل مطلبی به نام “ایجاد تصاویر ریسپانسیو با Jquery و PHP” قرار دادیم که در آن میتوانستیم بسته به اندازه صفحه نمایش کاربر عکس مورد نظر را فراخوانی کنیم. برای مثال برای صفحه نمایش های بزرگتر عکس بزرگ را فراخوانی میکنیم و برای صفحه نمایش های کوچک عکس کوچک را فراخوانی میکنیم. دلیل های اینکار را هم در همان مطلب گفتیم که برای اطلاعات بیشتر میتوانید به آن مطلب مراجعه کنید.

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

(بیشتر…)

جستجوی لحظه ای در لیست با پلاگین apSearcher

  • بوسیله: محسن شفیعی
  • در 1391/12/25 - 16:04
  • یک نظر
جی کوئری

جی کوئری

اگر در سایت شما لیستی طولانی وجود دارد و شما میخواهید برای این لیست طولانی قابلیت جستجو قرار دهید میتوانید از پلاگین apSearcher استفاده کنید. اما نکته ای که در این پلاگین وجود دارد این است که جستجو در آن به صورت لحظه ای است. یعنی هم زمان با تایپ متن جستجوی کاربر, متن هایی که مطابقت پیدا میکند در همان لحظه نمایش داده میشود.

مشاهده دمو
(بیشتر…)

پلاگین جی کوئری apSlider v1

  • بوسیله: محسن شفیعی
  • در 1391/12/09 - 17:58
  • دیدگاه‌ها برای پلاگین جی کوئری apSlider v1 بسته هستند
پلاگین جی کوئری apSlider v1

پلاگین جی کوئری apSlider v1

پس از نوشتن مطلب “آموزش مقدماتی ساخت پلاگین جی کوئری” تصمیم بر این گرفتم که پلاگینی کاربردی را با استفاده از جی کوئری بسازم تا هم اولین پلاگین ساخته خودم باشد و هم مطلبی آموزشی برای دوستان علاقمند باشد. با استفاده از پلاگین apSlider میتوان یک اسلایدر ساده را در سه قدم بسیار ساده تر درست کرد.

مشاهده دمو

در ادامه با ما همراه باشید.

(بیشتر…)

آموزش مقدماتی ساخت پلاگین جی کوئری

  • بوسیله: محسن شفیعی
  • در 1391/12/05 - 21:22
  • نظرات (9)
جی کوئری

جی کوئری

این مطلب در دسته بندی مطالب جی کوئری است. جی کوئری را در اینجا دنبال کنید.

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

برای مثال ما میخواهیم پلاگینی درست کنیم که طراح وب میتواند با استفاده از آن رنگ متن های خود را تغییر دهد. البته اینکار را با CSS به راحتی میتوان انجام داد, اما ما به جهت بخش آموزشی آن اینکار را با ساختن پلاگین جی کوئری انجام میدهیم.

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

(بیشتر…)

نحوه استفاده از Easing در جی کوئری

  • بوسیله: محسن شفیعی
  • در 1391/12/02 - 17:21
  • نظرات (3)
جی کوئری

جی کوئری

این مطلب در دسته بندی مطالب جی کوئری است. جی کوئری را در اینجا دنبال کنید.

استفاده از easing میتواند به افکت های جی کوئری شما روح تازه ای بدمد. easing با استفاده از تغییر در شتاب و پیشرفت انیمیشن اینکار را انجام میدهد. جی کوئری دو متد easing دارد که شامل linear و swing است. کار با این متدها تقریبا خسته کنند است زمانی که پلاگینی به نام easing.js وجود دارد.

پلاگین easing جی کوئری دارای 30 نوع متد متفاوت است. در این مطلب با آموزش استفاده از این پلاگین پر کاربرد در جی کوئری آشنا میشویم. ابتدا این پلاگین را از اینجا دانلود کنید.

از این متدها فقط میتوان در متد animate استفاده کرد و نمیتوان از آن در متدهایی مانند show, fadeIn و … استفاده کرد.

(بیشتر…)

ساخت کنترل های سفارشی برای ویدئو در HTML5

  • بوسیله: محسن شفیعی
  • در 1391/11/29 - 21:43
  • یک نظر
ساخت کنترل های سفارشی برای ویدئو در HTML5

ساخت کنترل های سفارشی برای ویدئو در HTML5

در HTML5 به سادگی میتوان کنترل های سفارشی برای پخش ویدئوها ساخت. حتی این امکان را به شما میدهد که بتوانید دکمه های اضافی مانند حرکت سریع به جلو را بسازید. این کارها با استفاده از APIهای جاوا اسکریپت قابل انجام است. اگر در مورد ویدئو در HTML5 چیزی نمیدانید به مطلب “شروعی بر ویدئو در HTML5” مراجعه کنید.

در این مطلب به آموزش ساخت کنترل های سفارشی برای ویدئو در HTML5 میپردازیم.

(بیشتر…)

کار با کوکی ها در Jquery

  • بوسیله: محسن شفیعی
  • در 1391/11/14 - 19:53
  • یک نظر
کار با کوکی ها در Jquery

کار با کوکی ها در Jquery

این مطلب در دسته بندی مطالب جی کوئری است. جی کوئری را در اینجا دنبال کنید.

نصب کتابخانه

اولین چیزی که به آن احتیاج دارید دانلود کتابخانه jquery.cookie است که میتوانید از GitHub دانلود کنید.

سپس این کتابخانه را پس از کتابخانه خود Jquery به صفحه اضافه کنید.

<head>
    <script src="path/to/jquery.js"></script>
    <script src="path/to/jquery.cookie.js"></script>
</head>

 


(بیشتر…)

آموزش کار با ajax بخش دوم

  • بوسیله: محسن شفیعی
  • در 1391/11/09 - 11:35
  • نظرات (9)
آموزش کار با ajax

آموزش کار با ajax

این مطلب در دسته بندی مطالب جی کوئری است. جی کوئری را در اینجا دنبال کنید.

ما در مطلب آموزش کار با ajax نحوه کار با ajax را به صورت کامل توضیح دادیم و در آن مطلب قول دادیم که نحوه کار فرستادن درخواست به توابع PHP و گرفتن پاسخ از طریق ajax را با هم بررسی کنیم.

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

(بیشتر…)

آموزش Drag and Drop در HTML5

  • بوسیله: محسن شفیعی
  • در 1391/11/04 - 10:54
  • نظرات (6)
آموزش Drag and Drop در HTML5

آموزش Drag and Drop در HTML5(عکس را زیاد جدی نگیرید)

قبل به وجود آمدن HTML5 ما برای استفاده از ویژگی Drag and Drop حتما لازم بود از کتابخانه هایی مثل jQuery یا MooTools استفاده کنیم. حالا با استفاده از HTML5 ما میتوانیم ویژگی های Drag and Drop را پیاده سازی کنیم.

برای اینکه به یک عنصر این قابلیت را اضافه کنیم باید ویژگی draggable=true را به آن بدهیم. این ویژگی API های دیگری هم دارد که عبارتند از dragstart, drag, dragend, dragenter, dragleave, dragover و drop که از اینها هم میتوانیم استفاده کنیم.

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

(بیشتر…)

نسخه جدید جی کوئری 1.9

  • بوسیله: محسن شفیعی
  • در 1391/11/02 - 18:31
  • نظرات (2)
نسخه جدید جی کوئری 1.9

نسخه جدید جی کوئری 1.9

این مطلب در دسته بندی مطالب جی کوئری است. جی کوئری را در اینجا دنبال کنید.

جی کوئری 1.9 در شش روز پیش منتشر شد. این نسخه یکی از نسخه هایی است که در تکامل جی کوئری نقش مهمی دارد.بعضی از ویژگی های حذف شده قرار است به صورت خلاصه تر و بهتر در نسخه 2 ارائه گردند و پایانی بر پشتیبانی از مرورگرهای IE6, 7و 8 است.

متد های حذف شده:

jQuery.browser() — removed
.live() events — use .on() instead
.die() — use .off() instead
.andSelf() — use .addBack() instead
.add() — nodes are now returned in document order with disconnected nodes (those not in the document) at the end. All sets which contain disconnected nodes follow this behavior
.after(), .before(), .replaceWith() — now return an unmodified jQuery set
.appendTo, .insertBefore, .insertAfter, .replaceAll — if no elements can be selected by the target selector, e.g. $(elements).appendTo("#not_found"), the resulting set is now empty
Ajax events must be attached to the document — not a DOM node, i.e. $(document).ajaxStart(...); rather than $("#node").ajaxStart(...);
radio/checkbox click events — now returns the checked state rather than the state it would have been in if .preventDefault() were not called
Order of focus events — blur events on the previous element are now fired prior to focus events on the new element
jQuery(htmlString) — htmlString is only considered to be HTML (rather than a selector) if it starts with a tag character
.attr() — you should normally use .prop()
“hover” pseudo-event — “hover” is no longer supported as a synonym for “mouseenter mouseleave”
jQuery.ajax returning an empty JSON result — this is now considered to be malformed JSON and throws an error

(بیشتر…)