طراحی وب سایت در کرج
026-34204893
09101013858

بایگانی برچسب‌ها : jquery

جی کوئری | طراحی سایت در کرج | طراحی وب سایت در کرج | کیان تجارت فاوا

ایجاد اولین پلاگین JQuery شما

 

ایجاد اولین پلاگین JQuery شما

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

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

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

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

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

راه اندازی شما می توانید کل پروژه را از GitHub دانلود کنید برای این آموزش، ما یک پلاگین آکوردئون ساده ایجاد خواهیم کرد. بیایید یک فایل js ایجاد کنیم و آن را در دایرکتوری “js” وب سایت ما قرار دهیم.

این سنت است که تمام فایل های js plugin را با “jquery dot” شروع کنیم و سپس نام پلاگین واقعی آن را بنویسیم، بنابراین ما “jquery.simple-accordion.js” را با ما تماس خواهیم گرفت.

 – فایل پلاگین ما در داخل دایرکتوری js

در دایرکتوری وب سایت ما حالا ما باید فایل پلاگین ما را همراه با کتابخانه جی کوئری به صفحه HTML اصلی (index.html) اضافه کنیم.

بهتر است که کتابخانه جی کوئری را مستقیما از سرورهای Google API بگنجانیم، زیرا آنها به جای محل سرور تک سرور شما در سراسر جهان توزیع شده اند: سرورهای نزدیک تر معمولا به معنای پاسخ سریع تر به بازدید کننده می باشند.

یکی دیگر از مزایای داشتن جی کوئری از گوگل شامل این است که وقتی یک بازدید کننده به سایت شما می آید، ممکن است سایتی جی کوئری را در حافظه داخلی خود داشته باشد.

محتویات پیش ذخیره شده به معنی بارگذاری بار سریع برای بازدید کننده است. ساختار پلاگین جی کوئری jQuery با تمام قلاب های لازم برای کمک به شما در توسعه پلاگین ما بسته بندی شده است.

اما خوب است که جاوا اسکریپت های خوب را حفظ کنیم، بنابراین باید مطمئن شویم که همه چیز در محدوده محلی نگهداری می شود. اجازه دهید با پوسته اصلی پلاگین جی کوئری شروع کنیم: 

(function($) {

$.fn.simpleAccordion = function() {

//TODO: code for simple accordion plugin

}

}(jQuery));

بیایید به سرعت از آنچه که در اینجا اتفاق می افتد برویم. با وارد کردن همه چیز در الگوی جاوااسکریپت self-enclosed (function () {}) ما مطمئن هستیم که تمام متغیرهای موجود در پلاگین ما با خیال راحت در خارج از فضای نامیش جهانی باقی خواهند ماند.

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

باز هم، ما در تلاش برای جلوگیری از برخورد با دیگر جاوا اسکریپت در صفحه است، بنابراین ما می خواهیم اطمینان حاصل کنیم که افزونه ما وابسته به $ default نیست، که می تواند توسط یک کتابخانه دیگر مورد استفاده قرار گیرد. 

در نهایت، $ .fn راه جی کوئری است که به شما اجازه می دهد پلاگین خود را تعریف کنید، که ما آن را SimpleAccordion نامیدیم. با تمام قطعات ما در محل، بیایید آشپزی کنیم! 

اضافه کردن قابلیت به پلاگین ماآنچه در مورد جی کوئری عالی است این است که به شما اجازه می دهد از هر انتخابگر مورد نظر خود استفاده کنید. با این حال، باید بدانید که افزونه ما می تواند با چندین نوع عنصر مختلف برخورد کند.

با استفاده از کلمه کلیدی “این” ما می توانیم پلاگین خود را اعمال توابع مرتبط با دسترسی به هر عنصر در یک حلقه بدون در نظر گرفتن نوع عنصر. گرفتن بخش HTML آماده – ساخت آکاردئوناز آنجایی که ما در حال ساخت آکاردئون ما می خواهیم ساختار HMLT برای آن را داشته باشیم، بنابراین در اینجا بروید: 

Heading 1 

Cras dolor elit, porttitor ac diam bibendum, eleifend aliquam erat.

Heading 2

Donec blandit risus nec est tristique interdum.

Heading 3

Fusce sit amet arcu id justo malesuada faucibus.

Heading 4

Aliquam tincidunt lobortis sem at porttitor.

این یک ساختار ساده آکوردئون است که چهار عنوان را تعریف می کند و زمینه های مربوط به محتوای آنها را مشخص می کند. بنابراین ایده این است که پلاگین ما این کد HTML را به یک آکوردئون کاربردی تبدیل می کند، جایی که کاربر می تواند بخش های مختلف باز و سقوط کند.

این است که چگونه باید به نظر می رسد:

فقط به نظر می رسد که ما باید برخی از سبک های ساده را اضافه کنیم. پس بزن که بریم:

.accordion {

width: 600px;

border: 1px solid #ccc;

border-bottom: none;

}

.accordion dt,.accordion dd {

border-bottom: 1px solid #ccc;

margin: 0px;

}

.accordion dt {

background: rgba(193, 221, 252, 0.24);

cursor: pointer;

padding: 8px 4px;

font-size: 14px;

font-weight: bold;

}

.accordion dd {

padding: 12px 8px;

}

در حال حاضر ساختار آکوردئون ما باید چنین باشد:

 

بخش جی کوئری – زمان برای انجام کاری!

 

برای اضافه کردن قابلیت به پلاگین ما قصد داریم فایل js را ویرایش کنیم و کد زیر را اضافه کنیم:

(function($) {

$.fn.simpleAccordion = function(options) {

return this.each(function() {

var dts = $(this).children(‘dt’);

dts.click(accordionClick);

dts.each(reset);

});

function accordionClick() {

$(this).siblings(‘dt’).each(hide);

$(this).next().slideDown(‘fast’);

return false;

}

function hide() {

$(this).next().slideUp(‘fast’);

}

function reset() {

$(this).next().hide();

}

}

})(jQuery);

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

واقعا درک نحوه پلاگین خود را برای گسترش کتابخانه جی کوئری نیاز به درک از ویژگی های نمونه اولیه جاوا اسکریپت دارد. اگرچه این طور نیست مستقیما استفاده نمی شود، ویژگی مجتمع جاوااسکریپت پشت صحنه ها از طریق ویژگی jQuery fn استفاده می شود، که یک نام مستعار جی کوئری برای اموال نمونه اولیه جاوا اسکریپت است.

بنابراین در شرایط ساده، شما افزونه خود را از جی کوئری با استفاده از fn “your-plugin-name”

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

به جای ارسال چندین استدلال، با یک شی گزینه ای می توانید چندین خواص را ارسال کنید، که عمل استاندارد جی کوئری است. هنگامی که اجازه می دهد گزینه در پلاگین خود، بهترین روش برای تنظیم گزینه های پیش فرض با استفاده از شیء پیش فرض است.

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

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

(function($) {

$.fn.simpleAccordion = function(options) {

var state = $.extend({}, {open: false}, options);

return this.each(function() {

var dts = $(this).children(‘dt’);

dts.click(accordionClick);

dts.each(reset);

if(state.open)

$(this).children(‘dt:first-child’).next().show();

});

function accordionClick() {

$(this).siblings(‘dt’).each(hide);

$(this).next().slideDown(‘fast’);

return false;

}

function hide() {

$(this).next().slideUp(‘fast’);

}

function reset() {

$(this).next().hide();

}

}

})(jQuery);

اگر متوجه شدید، ما از مقدار پیش فرض open استفاده می کنیم: false، بنابراین اگر هیچ گزینه ای منتقل شده باشد، افزونه فرض می کند که شما وقتی می خواهید اولین آیتم را در آکاردئون بسته کنید، بسته می شود.

هنگامی که افزونه گزینه ها را دریافت می کند، می توانید به روش $ .extend تکیه کنید تا حقیقت اصلی را اعمال کنید. چه روش $ .extend این است که دو یا چند اشیا را ادغام می کند.

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

Tagged
jQuery | طراحی سایت در کرج | طراحی وب سایت در کرج | کیان تجارت فاوا

چرا جی کوئری تنها زمانی  که بعضی از صفحات Asp DotNet است کار میکند

چرا جی کوئری تنها زمانی  که بعضی از صفحات Asp DotNet است کار میکند

من یک مشکل عجیب داشتم که در آن یک عبارت jQuery ساده فقط یک بار در صفحه ASP.NET کار کرد. معلوم شد که کنترلهای به روز رسانی Update .NET در همان صفحه سبب مشکالت صفحه ای تازه از تماس AJAX شد.

 

من ساده ترین کد جی کوئری را در کنترل کاربر داشتم:

 

$(document).ready(function () { $(‘#mybutton’).click(function () { $(‘.chartwin’).slideToggle(“slow”); }); });

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

 

در مورد تحقیقات بیشتر در صفحه والدین، متوجه شدم که کنترل کاربری من در بخش کنترل Update.Progress نشسته است. UpdateProgress یک وسیله ساده برای استفاده از نسخه های صفحه جزئی فراهم می کند؛ این کار جادویی است وقتی که آن را کار می کند، اما من قبل از آن با آنها مشکلی داشتم، با دیگر جاوا اسکریپت (از جمله کنترل های AJAX ASP.NET) در همان صفحه دخالت کردم.

 

گاهی اوقات راه حل ها می توانند کاملا درگیر باشند، اما در این مسئله خاص، از یک راه حل ساده برای خواندن استفاده می شود.

 

مشکل این است که جی کوئری آماده (تابع () فقط یک بار اجرا می شود زمانی که صفحه برای اولین بار شروع می شود. هنگامی که صفحه تا حدی تجدید (همانطور که در یک تماس AJAX) ما باید به طور موثر دوباره رویدادهای جی کوئری.

 

برنامه All.NET رویداد Function PageLoad را بسیار خوب می شناسد، اما رویداد جاوااسکریپ معادل نیز وجود دارد. ما می توانیم از این برای بارگیری رویدادهای jQuery ما هر بار که صفحه تجدید می شود استفاده کنید. کد ما اکنون تبدیل می شود:

 

function pageLoad() { $(function () { $(‘#mybutton’).click(function () { $(‘.chartwin’).slideToggle(“slow”); }); }); }

 

آن را برای من ثابت کرد! نقطه ضعف این است که ما باید تمام jQuery را بارگیری کنیم هر بار صفحه به جای فقط یک بار تازه سازی می شود یا جزئی می شود. در این مورد برای من خیلی مشکل نبود.

 

توجه داشته باشید که با چک کردن DOM به طور کامل بارگذاری نمی شود (همانطور که در هنگام استفاده از (document) .ready، شما باید کد را به پایین صفحه اضافه کنید و پس از آنکه scriptmanager بارگیری شده است.

 

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

 

Tagged
jQuery | طراحی سایت در کرج | طراحی وب سایت در کرج | کیان تجارت فاوا

مزایای استفاده از jQuery over flash برای طراحی وب

مزایای استفاده از jQuery over flash برای طراحی وب

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

دلایل بسیار ساده برای درک تجربیات بصری و جذاب و تعاملی. هیچ بحثی وجود ندارد که استفاده از فلاش در بسیاری از وبسایتها برخی از تجارب بصری خیره کننده و روش های خلاقانه تعامل کاربر را که هر یک از فن آوری های طراحی مانند (X) HTML و CSS است، ارائه می دهد. در نمایش دادن بازی های تعاملی، گرافیک بالا پایان و خلق و خوی بسیار خلاق برای صنعت تبلیغات فلش مفید است، اما در بیشتر موارد فلش بیش از حد مورد استفاده قرار می گیرد و یا همان اثرات را می توان به راحتی با استفاده از فن آوری های مانند جی کوئری به دست آورد.

بنابراین بیایید بحث کنیم که مزایای اصلی استفاده از jQuery بر روی فلش چیست؟

مزایای جستجوگرها – همانطور که جی کوئری تعاملی صفحات HTML موجود را اضافه می کند، دیدگاه سایت از نظر رتبه بندی موتورهای جستجو را مختل نمی کند. موتورهای جستجوگر اخیرا فلش بسیار بهتر از آن هستند، آن ها محتوای متن نوشته شده در فایل های .SWF را خالی می کنند، اما هنوز هیچ راهی به عنوان SEO به عنوان jQuery نیست.

بنابراین اگر می خواهید عناصر ناوبری خیالی یا گالری ها را بخواهید، بهتر است از jQuery به عنوان تکنولوژی استفاده کنید.

اندازه عناصر طراحی – از لحاظ اندازه فایل ها فایل های جی کوئری کوچکتر هستند، بنابراین آنچه در آن است بهبود کامل تجربه کاربر با بارگذاری سایت سریع تر در بسیاری از مرورگرها است.

علاوه بر این اکنون گوگل مدت زمان بارگذاری سایت را به عنوان یک عامل در نظر گرفتن رتبه بندی این موضوع بسیار مهم است در طراحی وب است که نمیتوان آن را نادیده گرفت.

آسان به کد – جی کوئری یک تکنولوژی منبع باز است بنابراین بسیاری از منابع در خالص و همچنین انواع مختلف اثرات انیمیشن، کدهای به راحتی در دسترس هستند که طراحان می توانند در پروژه های طراحی و تحویل در زمان هیچ پیگیری و پیاده سازی.

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

نمایش کاربر – همچنین گاهی اوقات مجموعه ای از کاربران وجود دارد که نمی خواهند از یک وب سایت فلش دیدن کنند، اغلب برای زمان بارگیری، اگر اتصال آهسته باشد. بنابراین برای تمام بخش های کاربران در وب بهتر است در jQuery طراحی شود. علاوه بر این، بسیاری از مردم تمایل دارند از دکمه ناوبری که در هنگام استفاده از فلش بیشتر حذف می شود، استفاده شود.

بنابراین در حالی که فلاش ظرفیت بیشتری برای افزایش انیمیشن وب سایت در سطوح خلاقانه بالاتری دارد، اما بهتر است از jQuery در بیشتر پروژه های وب طراحی شده باشد که در آن اکثر نیازهای انیمیشن را می توان با استفاده از jQuery انجام داد.

 

Tagged

کاربرد و مزایای جی کوئری

کاربرد و مزایای جی کوئری

jQuery یک کتابخانه جاوا اسکریپت است که اساسا بسته بندی را فراهم می کند. این اساسا API هایی را نشان می دهد که می توانند برای انجام وظایف باور نکردنی در UI فراخوانی شوند. با کمک jQuery، می توان موارد زیر را به صورت یکپارچه به دست آورد

:

  • دستکاری عناصر DOM
  • ایجاد HTML در پرواز
  • رویداد های مرتبط و آنها را با استفاده از کد آنها را فعال کنید
  • ارسال درخواستهای ajax به سرور.

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

دو راه برای جی کوئری در وب سایت وجود دارد:

  • دانلود کتابخانه جی کوئری ازcom
  • شامل جی کوئری از

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

انتخابگرها: انتخابگرهای جی کوئری در jQuery بسیار ضروری هستند. آنها برای پیدا کردن عناصر بر اساس شناسه، کلاس، برچسب و غیره مورد استفاده قرار می گیرند. همه انتخاب کنندگان با علامت دلار شروع می شوند. در زیر چند انتخابگر وجود دارد:

  • انتخاب #id: از ویژگی id برای انتخاب یک عنصر HTML استفاده می کند. به عنوان مثال، $ (“# id”)
  • class selector: این عنصر را با یک کلاس CSS مشخص می کند. به عنوان مثال، $ (“. کلاس”)
  • انتخابگر برچسب: تمام عناصر دارای یک تگ مشخص مانند.، $ (“a”) تمام تگ های لنگر را پیدا می کند.

توابع: چندین توابع یا API وجود دارد که ویژگی های هیجان انگیزی را ارائه می دهند. تعداد کمی از آنها به شرح زیر است:

  • hide () – یک عنصر را پنهان می کند
  • show () – یک عنصر را نشان می دهد
  • HTML () – HTML یک عنصر را تعیین می کند
  • append () – HTML در انتهای عنصر اضافه می کند
  • prepend () – HTML را در ابتدای عنصر قرار می دهد

رویداد اتصال و راه اندازی: jQuery را می توان مورد استفاده برای اتصال رویدادها به عناصر HTML و همچنین برای راه اندازی این حوادث.

یک رویداد کلیک می تواند به یک دکمه با استفاده از $ (“دکمه”) محدود شود. bind (“click”، handler) که “handler” یک تابع است که باید بر روی کلیک دکمه مربوطه کلیک شود. رویداد کلیک می تواند با استفاده از قطعه کد زیر انجام شود: $ (“button”). trigger (“click”).

درخواست آژاکس: درخواست های Ajax می تواند با استفاده از jQuery ارسال شود که یک درخواست POST یا GET را برای سرور انجام می دهد و به نوبه خود داده ها را از سرور دریافت می کند.

پلاگینها: جامعه جی کوئری همچنین دارای چند افزونه است که به عنوان یک جزء قابل استفاده مجدد قابل استفاده است که می تواند در وب سایت ها استفاده شود. تعداد اندکی از آنها عبارتند از:

  • گفتگوی UI
  • آکاردئون
  • زبانه ها
  • تکمیل خودکار

 

Tagged
jQuery | طراحی سایت در کرج | طراحی وب سایت در کرج | کیان تجارت فاوا

صرفه جویی در وقت با پلاگین های JQuery

صرفه جویی در وقت با پلاگین های JQuery

اکثر کسانی که تصمیم به ایجاد صفحه وب خود کرده اند، درباره پلاگین های jQuery شنیده اند. تعداد زیادی از افرادی هستند که تصمیم می گیرند این پلاگین ها را بررسی کنند، زیرا هزاران موجود هستند.

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

شما باید بدانید که همه این افزونه ها آسان نیستند. اگر شما نمی توانید از افزونه جی کوئری که انتخاب می کنید استفاده کنید، پس از اتمام زمان صرف وقت خواهد شد. باید توجه داشته باشید که با استفاده از هر کدام از اینها، باید بدانید که چگونه از آنها استفاده کنید.

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

اگر آنها به درستی نوشته نشده اند که بسیاری از آنها وجود نداشته باشند، یا مجبورید یک فرد دیگر را پیدا کنید یا ساعتها صرف کنید تا بتوانید آن را بیابید.

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

این به این دلیل است که اکثریت گسترده ای از این افراد توسط افرادی که مدت زمان لازم را نداشته اند تا مطمئن شوند که افزونه آنها درست کار می کند قبل از تصمیم گیری در مورد آن، نوشته شده است.

شما می توانید بسیار ناامید شوید اگر به پلاگین جی کوئری برسید که فکر می کنید برای سایت شما کار خواهد کرد و شما زمان زیادی را صرف تلاش برای کشف کردن نحوه استفاده از آن می کنید تا متوجه شوید که زمان خود را هدر داده اید

اگر زمان خود را می گیرید و می دانید که چه چیزی را باید در پلاگین جی کوئری جستجو کنید، پس می توانید زمان زیادی را صرف جستجو کنید. شما نباید نگران وقت خود را صرف پلاگین کنید که به نظر می رسد کار نمی کند.

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

Tagged