jquery در طراحی سایت
زمانی در فرم لازم است که پس از درج فیلد و رسیدن فیلد به حداکثر ظرفیت (maxlength) تعریف شده آن نشانه گر به صورت اتوماتیک به فیلد بعدی انتقال یابد تا کاربر بتواند به راحتی فرم را تکمیل نماید. به عنوان مثال فرمی را در نظر بگیرید که در آن فیلدهایی برای گرفتن شماره تلفن و موبایل موجود است و به صورتی تعبیه گردیده که در آن کاربر در هر فیلد یک شماره را وارد می نماید. بهتر است برای کاربر پسند بودن فرم به گونه ای طراحی گردد که پس از درج یک شماره از یک فیلد نشانه گر…
در این مقاله به شما روش لینک نمودن یک ردیف کامل از جدول TABLE در اچ تی ام ال را آموزش خواهم داد. روش های متفاوتی برای انجام این کار وجود دارد اما روش زیر راحترین روش انجام این کار می باشد که با استفاده از JQUERY انجام می گردد. برای این کار کافی است کتابخانه Jquery را در صفحه html خود اضافه نمایید. پس از اضافه نمودن این کتابخانه قابلیت استفاده از دستورها و توابع آن را دارید. فرض نمایید کد ردیف هر جدول شما چیزی باشد شبیه به کد زیر: <tr> <td><a href="http://www.example.com/">example</a></td> <td>another cell</td> <td>one more</td> </tr>…
در صورتی که قصد دارید تا کاربر فقط دسترسی برای درج کاراکترهای فارسی را در فیلدها فرم داشته باشد این کار را می توانید توسط jquery انجام دهید. برای انجام این کار کافی است تا کد زیر را در هدر صفحات خود اضافه نمایید. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jkblayout.min.js"></script> خط اول کتابخانه jquery را به صفحه شما اضافه می نماید و خط دوم کتابخانه مخصوص محدود کردن کاربر برای درج فقط کاراکترهای فارسی در فیلدهای فرم می باشد. فایل jquery را می توانید از این آدرس و فایل دوم را می توانید از بخش ضمیمه مقاله دانلود نمایید. فایل…
jQuery در صفحان وب سایت بسیاری مورد استفاده قرار می گیرد. و یکی از متداول ترین کتابخانه هایی است که در صفحات وب سایت استفاده می شود, که عمکرد آن با آبجکت DOM است. البته, دلیل اصلی استفاده از jQuery سادگی آن است. و شما می توانید هر کاری توسط این کتابخانه انجام دهید. چندین دستور و کد از آن وجود دارد که به صورت مرتب مود استفاده طراحان و برنامه نویسان وب قرار می گیرد. در این بخش به شما 10 دستور را که به صورت متداول مورد استفاده قرار می گیرد را می آورم. 1) دکمه بازگشت…
جهت ایجاد انتخاب کننده تاریخ فارسی از تقویم در فرم می توانید از این پلاگین jquery استفاده نمایید. استفاده از این پلاگیت بسیار ساده است و کافی است کدهای زیرا را در بالای فرم خود کپی نموده و فایل های مورد نظر را بر روی سرور خود بارگذاری نمایید: <link type="text/css" href="styles/jquery-ui-1.8.14.css" rel="stylesheet" /> <script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="scripts/jquery.ui.core.js"></script> <script type="text/javascript" src="scripts/jquery.ui.datepicker-cc.js"></script> <script type="text/javascript" src="scripts/calendar.js"></script> <script type="text/javascript" src="scripts/jquery.ui.datepicker-cc-ar.js"></script> <script type="text/javascript" src="scripts/jquery.ui.datepicker-cc-fa.js"></script> فایل های مورد نظر را می توانید از سورس این مقاله در انتهای مقاله دانلود نمایید: http://hasheminezhad.com/datepicker پس از انجام این کار کافی است کد زیر را در…
با توجه به درخواست های مکرر اسکریپت اسکرول به بالای انیمیشنی را برای شما گذاشتم. پیاده سازی این افکت از طریق jquery بسیار آسان می باشد. این اسکریپت چک می نماید زمانی که اسکرول پایین آمد لینک اسکرول به بالا نمایش داده می شود, زمانی که بر روی کلید اسکرول به بالا کلیک شود صفحه سایت به بالای صفحه اسکرول می شود. می توانید دمو را بررسی نمایید تا ببینید به چه صورت کار می کند. دمو اسکرول به بالا دانلود دموی زیپ طراحی css المان #back-top با position:fixed تعریف نموده تا در صفحه به صورت ثابت باقی بماند. تگ span اضافی…
سیستم ناوبری سایت یکی از مهمترین بخش های وب سایت می باشد. بدون آن کاربران سایت نمی توانند سایت شما را مرور نمایند و صفحات مختلف سایت را ببینند. فکر کردن در مورد نحوه نمایش درست سیستم ناوبری سایت مورد بسیار مهمی در طراحی سایت می باشد. استفاده از jquery ایجاد سیستم ناوبری و منوبندی را برای طراحان سایت آسان می نماید. امروز برای شما انواع پلاگین های jquery را برای ساخت انوع سیستم ناوبری و منوبندی سایت را معرفی می نمایم. MeanMenu پلاگین رایگان jquery برای ایجاد منوها با قابلیت نمایش در موبایل و سایر مرورگرهای وب, این پلاگین…
افکت اسکرول نامحدود را دیده اید. در سایت هایی مثل فیس بوک و گوگل پلاس. این افکت به این صورت می باشد که زمانی که اسکرول کاربر به انتهای صفحه می رسد سایر مطالب لود می شود. در حقیقت اسکرول نامحدود جایگزین صفحه بندی شده. اسکرول نامحدود بسیار کاربر پسند تر از سیستم صفحه بندی می باشد زیرا برای رویت مطالب بیشتر لازم نیست کاربر صفحه دیگری را لود نماید. برای ایجاد اسکرول نامحدود در صفحه می توانید از jquery استفاده نمایید. jquery پلاگین های بسیار و دستورات بسیاری برای انجام این کار دارد. در زیر 6 پلاگین برتر انجام…
برای ایجاد لینک آیتم های بیشتر برای لیست های بلند می توانید از کد jquery زیر استفاده نمایید. <html> <head><title>Test</title></head> <body> <ul class="more"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> </ul> <script type="text/javascript" src="/jquery-1.3.1.js"></script> <script type="text/javascript"> $(function() { $("ul.more").each(function() { $("li:gt(4)", this).hide(); /* :gt() is zero-indexed */ $("li:nth-child(5)", this).after("<li class='more'><a href='#'>More...</a></li>"); /* :nth-child() is one-indexed */ }); $("li.more a").live("click", function() { var li = $(this).parents("li:first"); li.parent().children().show(); li.remove(); return false; }); });…