::: در حال بارگیری لطفا صبر کنید :::Loading , please wait ...

انجمن کدستانMoisrex

MoisrexMoisrex.rozblog.com
زمان جاریtime : جمعه 24 اردیبهشت 1400 - 6:24 بعد از ظهر
نام کاربریusername : پسوردpassword : یاor عضویتregister | رمز عبور را فراموش کردمForgot your password?
شما در سایت ما ثبت نام نکرده اید و یا وارد اکانت کاربری خود نشده اید. از شما خواهشمند هستیم You are not log in to site. Please وارد شویدlogin یاor ثبت نام کنیدregister .
جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز
تعداد بازدیدvisits : 673
ehsanerfani آفلاین



ارسال هاAnswers : 157
عضویتRegistration date : 26 /2 /1392
حمایت کردهThanks : 27
حمایت شدهThanked : 205
جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز
درباره‌ی جی‌کوئری
پیش‌تر صحبت کرده‌ایم. کتاب‌خانه‌ی جاوااسکریپتی که کار را برای‌مان
چندین‌برابر راحت کرده است و به سادگی می‌توان کارهای بزرگی را در کم‌تر از
چند دقیقه پیاده نمود. نمی‌خواهم از جی‌کوئری بگویم که می‌دانم کم و بیش
با آن آشنایید.


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

یک شروع ساده

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

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

اما بهتر است برای درک بهتر ماجرا، یکی از نمونه‌ها را با هم مرور کنیم؛

درگ‌کردن [+]

- یادتان باشد که کتاب‌خانه‌ی جی‌کوئری و جی‌کوئری UI را به صفحه اضافه
کنید (هردو کتاب‌خانه در پکیجی که دریافت می‌کنید، در فولدر js قرار
دارند).

دستور اچ‌تی‌ام‌ال زیر را داریم:

کد:
Drag me!



حالا کافی است اسکریپت زیر را اضافه کنیم:
کد:

$(function() {
$(".draggable").draggable();
});


همه‌چیز به همین ساده‌گی است؛ هر المنتی که در صفحه، کلاس draggable داشته باشد، توسط اسکریپت بالا، دارای خاصیت درگ‌شدن می‌شود.

حالا می‌توانیم آپشن‌هایی را به آن اضافه کنیم تا کاربردی‌تر شود. مثلاً هنگام درگ‌کردن، المنت موردنظر کمی شفاف شود:
کد:

$(function() {
$(".draggable").draggable({ opacity: 0.50 });
});



می‌توانیم از چند آپشن هم‌زمان استفاده کنیم، با گذاشتن یک , بین آپشن‌ها:
کد:

$(function() {
$(".draggable").draggable({ opacity: 0.50, revert: true });
});



آپشن revert اگر مقدارش true باشد باعث می‌شود المنت را وقتی درگ می‌کنید به سمتی، پس از رها کردن، برگردد سر جای اولش. مقدار پیش‌فرض آن false است.

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

برای استفاده از این فریم‌ورک سی‌اس‌اس کافی است فایل سی‌اس‌اسی که نامش یک همچین‌چیزی است: jquery-ui-1.8.4.custom.css و در مسیر css/smoothness قرار دارد را به صفحه‌مان اضافه کنیم.

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

و البته یک سری قواعدی هم برای استفاده از این فریم‌ورک مانند هر
فریم‌ورک سی‌اس‌اس دیگری وجود دارد که کمی در این‌باره توضیح می‌دهم؛

در فریم‌ورک UI نام همه‌ی کلاس‌ها با .ui آغاز می‌گردد. مثلاً: .ui-widget یا .ui-widget-content

کمی بالاتر مثالی برای درگ‌کردن ِ یک المنت زدم. حالا می‌خواهم آن المنت را با فریم‌ورک سی‌اس‌اس جی‌کوئری UI استایل‌دهی کنم؛


Title
Content...



درواقع .ui-widget المنت اصلی‌ای است که درگ می‌شود. در داخلش .ui-widget-header آوردم و عنوانی در آن نوشتم و بعد از آن هم .ui-widget-content برای قراردادن محتوا در آن.

لُپ ِ کلام اینکه جی‌کوئری UI زمینه‌ها را برای‌مان آماده می‌کند تا ما حواس و تمرکزمان روی هدفی که داریم باشد.

منبع : http://aliha.ir

جمعه 18 مرداد 1392 - 00:49
ارسال پیامsend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
حمایت شده حمایت شدهThanks : سپاس هاThanks (4) : dehkadedl - alireza111 - mfo7 - alijoon -
ahm آفلاین



ارسال‌هاAsnwers : 0
عضویتRegistration date : 4 /5 /1393
تعداد اخطارWarnings : -2147483648
حمایت شدهThanked : 426
پاسخAnswer 1 : جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز

زدم ت ش ک ر و ها!!
ولی...
جمعه 18 مرداد 1392 - 00:57
ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
cena آفلاین



ارسال‌هاAsnwers : 3425
عضویتRegistration date : 1 /3 /1393
حمایت کردهthanks : 1288
حمایت شدهThanked : 1898
پاسخAnswer 2 : جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز
میشه همه اینارو تو چند جمله بگی . واقعا میشه ؟

جمعه 18 مرداد 1392 - 01:00
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
dehkadedl آفلاین



ارسال‌هاAsnwers : 1516
عضویتRegistration date : 10 /11 /1391
حمایت کردهthanks : 101
حمایت شدهThanked : 278
پاسخAnswer 3 : جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز
خیلی ممنون واقعا
سایت جدید زدم بیخیاله همه چی
novel98.ir




جمعه 18 مرداد 1392 - 02:23
ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
alireza111 آفلاین



ارسال‌هاAsnwers : 3294
عضویتRegistration date : 25 /10 /1391
حمایت کردهthanks : 831
حمایت شدهThanked : 1853
پاسخAnswer 4 : جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز
کی حوصله داره بخونه
خلاصه نداره؟
جمعه 18 مرداد 1392 - 15:27
ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
abzar-web آنلاین آفلاین
[avatar_answerabzar-web]
[starsabzar-web]
[rankingabzar-web]

ارسال‌هاAsnwers : [Count_Allabzar-web]
عضویتRegistration date : [registerdateabzar-web]
محل زندگیLiving position : [cityabzar-web]
سنAge : [age_answerabzar-web]
شناسه یاهوYahoo ID : [yahooabzar-web]
تعداد اخطارWarnings : [warningabzar-web]
حمایت کردهthanks : [thanksabzar-web]
حمایت شدهThanked : [thanksabzar-web]
پاسخAnswer 5 : جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز
کسی خوند خلاصشو بگه!
[emzaabzar-web]
جمعه 18 مرداد 1392 - 18:16
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport






برای ارسال پاسخ ابتدا باید لوگین یا ثبت نام کنید.


moisrex
درباره ماAbout us لینک های ماOur links کلمات کلیدیKeywords
انجمن تخصصی کدستان ، ساخته شده توسط فردی با نام مستعار Moisrex می باشد.This forum designed by a person who called Moisrex.

ایمیلE-mail : Moisrex @ Gmail.com
کدستان,انجمن کدستان,کدنویسی,انجمن پشتیبانی,فروم,رزبلاگ,آموزش کدنویسی,درخواست کد
تمامی حقوق این انجمن مربوط به همین انجمن می باشد | طراحی قالبCopyright (c) By Moisrex , All rights reserved | Desiger : Moisrex