عناصر را بکشید و رها کنید. کشیدن و رها کردن: راهی برای دستکاری عناصر رابط کاربری

برای مدت طولانی، از توابع جاوا اسکریپت برای ایجاد قابلیت Drag&Drop استفاده می شد، اما مرورگرها همیشه نمی توانستند نتیجه را به درستی نمایش دهند. HTML 5 راهی برای پشتیبانی هوشمندانه Drag&Drop با کمی جاوا اسکریپت دارد. این مقاله یک مثال تصویری از استفاده از Drag&Drop در HTML 5 را شرح می دهد.

کشیدن و رها کردن رویدادها

• dragStart: کاربر شروع به کشیدن عنصر می کند.
• dragEnter: عنصری که کشیده می شود به عنصر انتهایی می رسد.
• dragOver: نشانگر ماوس در حین کشیدن روی عنصر قرار دارد.
• dragLeave: نشانگر ماوس عنصر کشیده شده را ترک می کند.
• کشیدن: مکان نما در حین کشیدن حرکت می کند.
• drop: افت عنصر اتفاق می افتد.
• dragEnd: کاربر در حین کشیدن مکان نما ماوس را رها می کند.

شی انتقال داده

• dataTransfer.effectAllowed=value: نوع عملکرد موجود را برمی‌گرداند - هیچ، کپی، copyLink، copyMove، پیوند، انتقال، انتقال، همه، یا بدون مقدار اولیه.
• dataTransfer.setData(فرمت، داده): داده ها را در قالب دلخواه اضافه می کند.
• dataTransfer.clearData(format): داده ها را پاک می کند.
• dataTransfer.setDragImage(عنصر، x، y): تصویر را تنظیم می کند که در مختصات مکان نما (0، 0 - گوشه سمت چپ بالا) کشیده شود.
• data = dataTransfer.getData(format): داده ها را برمی گرداند.

مثال کشیدن و رها کردن

شروع به کشیدن یک شی کنید

تابع dragStart(ev) ( ev.dataTransfer.effectAllowed="move"; ev.dataTransfer.setData("Text"، ev.target.getAttribute("id")); ev.dataTransfer.setDragImage(ev.target,100,100) ؛ بازگشت واقعی؛ )
خط اول نوع احتمالی کشیدن و رها کردن - حرکت را مشخص می کند، دوم - داده های فرآیند - نوع (Text) و ID را تنظیم می کند. در خط سوم، setDragImage موقعیت مکان نما را تعیین می کند، در این مورد در وسط یک مربع 200x200 پیکسل.

کشیدن یک شی را به پایان برسانید

تابع dragEnter(ev) ( event.preventDefault(); return true؛ ) تابع dragOver(ev) ( event.preventDefault(); )

در این مثال ساده، فقط اقدامات اصلی تنظیم شده است، اما می توان موارد دیگری را اضافه کرد - تغییر رنگ پس زمینه، اضافه کردن متن و غیره. مرحله بعدی مرحله نهایی است. این جایی است که شما عمل کشیدن پایان را تنظیم می کنید:

تابع dragDrop(ev) ( var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); return false;)
همانطور که از مثال مشاهده می کنید، بلوک های آبی را می توان پس از کشیدن به جای اصلی خود بازگرداند. خوشبختانه انجام این کار بسیار آسان است. همه توابع اعلام شده اند، باید کد زیر را اضافه کنید:

نتیجه

مدت‌هاست که توابع جاوا اسکریپت وجود دارد که به ما امکان ایجاد رابط‌های کشیدن و رها کردن را می‌دهد. اما هیچ یک از این پیاده سازی ها بومی مرورگر نیستند.HTML5 روش خاص خود را برای ایجاد رابط های کشیدن و رها کردن (با کمک کمی از جاوا اسکریپت) دارد. در این مقاله به شما خواهیم گفت که چگونه می توان به این ...

پشتیبانی از مرورگر

کشیدن و رها کردن HTML5 در حال حاضر توسط همه مرورگرهای اصلی دسکتاپ (از جمله IE (حتی IE 5.5 پشتیبانی جزئی دارد) پشتیبانی می شود، اما توسط هیچ یک از مرورگرهای محبوب موبایل پشتیبانی نمی شود.

کشیدن و رها کردن رویدادها

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

• dragStart: زمانی فعال می شود که کاربر شروع به کشیدن عناصر می کند.
• dragEnter: زمانی که عنصر کشیده شده برای اولین بار روی عنصر هدف کشیده می شود، اجرا می شود.
• dragOver: هنگامی که ماوس روی یک عنصر حرکت می کند در حالی که کشیدن در حال انجام است، اجرا می شود.
• dragLeave: اگر مکان نما کاربر هنگام کشیدن عنصر را ترک کند، فعال می شود.
• کشیدن: هر بار که ماوس را حرکت می‌دهیم در حالی که عنصر خود را می‌کشیم، شلیک می‌شود.
• drop: هنگامی که دراپ واقعی اجرا می شود، شلیک می شود.
• dragEnd: زمانی که کاربر دکمه ماوس را در حین کشیدن یک شی رها می کند، فعال می شود.

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

شی انتقال داده

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

• dataTransfer.effectAllowed=value: انواع کنش های مجاز را برمی گرداند، مقادیر ممکن هیچ، کپی، copyLink، copyMove، پیوند، linkMove، حرکت، همه و غیر اولیه هستند.
• dataTransfer.setData (فرمت، داده): داده ها و قالب خاصی را اضافه می کند.
• dataTransfer.clearData(format): تمام داده ها را برای یک فرمت خاص پاک می کند.
• dataTransfer.setDragImage(عنصر، x، y): تصویری را که می خواهید بکشید تنظیم می کند، مقادیر x و y نشان می دهد مکان نما ماوس کجا باید باشد (0، 0 آن را در سمت چپ بالا قرار می دهد).
• data = dataTransfer.getData(format): همانطور که از نام آن پیداست، داده ها را برای یک فرمت خاص برمی گرداند.

ایجاد یک مثال کشیدن و رها کردن

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

کشیدن یک شی

اولین کاری که باید انجام دهیم ایجاد HTML است. ما div ها را با ویژگی draggable قابل کشیدن می کنیم:

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

تابع dragStart(ev) ( ev.dataTransfer.effectAllowed="move"; ev.dataTransfer.setData("Text"، ev.target.getAttribute("id")); ev.dataTransfer.setDragImage(ev.target,100,100) ؛ بازگشت واقعی؛ )

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

رها کردن شی

برای اینکه یک عنصر یک drop را بپذیرد، باید به 3 رویداد مختلف گوش دهد: dragEnter، dragOver، و رویداد drop. پس بیایید این را با شناسه بزرگ به div HTML5 خود اضافه کنیم:

تابع dragEnter(ev) ( ev.preventDefault(); return true; ) تابع dragOver(ev) (ev.preventDefault(); )

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

در قسمت بعدی، تابعی را برای زمانی که یک عنصر روی هدف مورد نظر "پرتاب می شود" تعریف می کنیم:

تابع dragDrop(ev) ( var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); return false;)

در این قسمت آخر، ابتدا متغیر داده را در جایی قرار می دهیم که تمام داده های موجود برای قالب متن را دریافت می کنیم و سپس داده ها را به div که می خواهیم عنصر را رها کنیم، اضافه می کنیم.

بخش رها کردن را به یک هدف تبدیل کنید

دمو نشان می دهد که دو div را می توان به جای خود بازگرداند. خوشبختانه، اضافه کردن یک هدف دیگر بسیار ساده تر از آن چیزی است که فکر می کنید. زیرا ما قبلاً این توابع را داریم و تنها کاری که باید انجام دهیم این است که شنوندگان رویداد را اضافه کنیم:

و این تمام چیزی است که لازم است تا بتوان دیو را به جای خود بازگرداند.

بسیاری از برنامه های کاربردی کشیدن و رها کردن وجود دارد که با استفاده از کتابخانه های جاوا اسکریپت ساخته شده اند و اغلب استفاده از آنها آسان تر است. اما امیدواریم در این تکنیک HTML5 و جاوا اسکریپت، پتانسیل آینده را برای حل مشکلات خود مشاهده کنید.

رابط‌های Drag and Drop برنامه‌ها را قادر می‌سازد تا از ویژگی‌های کشیدن و رها کردن در فایرفاکس و سایر مرورگرها استفاده کنند.به عنوان مثال با این ویژگی ها کاربر می تواند انتخاب کند قابل کشیدنعناصر را با ماوس بکشید، عناصر را به a بکشید قابل رها شدنعنصر، و با رها کردن دکمه ماوس آن عناصر را رها کنید. یک نمایش شفاف از قابل کشیدنعناصر در طول عملیات کشیدن از نشانگر ماوس پیروی می کنند.

برای وب‌سایت‌ها، برنامه‌های افزودنی و برنامه‌های XUL، می‌توانید انواع عناصری را که می‌توانند تبدیل شوند، سفارشی کنید قابل کشیدنعناصر و نوع بازخورد قابل کشیدنعناصر تولید می کنند، و قابل رها شدنعناصر.

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

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

اصول اولیه

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

تشخیص دهید که چیست قابل کشیدن

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

تابع dragstart_handler(ev) (consol.log("dragStart"); // شناسه عنصر هدف را به شی انتقال داده اضافه کنید ev.dataTransfer.setData("text/plain", ev.target.id); )

این عنصر قابل کشیدن است.

تصویر کشیدن را تعریف کنید

به‌طور پیش‌فرض، مرورگر تصویری را ارائه می‌کند که در طول عملیات کشیدن، در کنار نشانگر ماوس ظاهر می‌شود. با این حال، یک برنامه ممکن است یک تصویر سفارشی را با استفاده از عنصر تعریف کند، اما می تواند یک تصویر نیز باشد یا هر عنصر تصویر دیگری."> متد setDragImage() همانطور که در مثال زیر نشان داده شده است.

تابع dragstart_handler(ev) (// یک تصویر ایجاد کنید و سپس از آن برای کشیدن تصویر استفاده کنید. // توجه: "example.gif" را به یک تصویر موجود تغییر دهید یا تصویر // ایجاد نخواهد شد و تصویر کشیدن پیش فرض ایجاد خواهد شد. used.var img = new Image(); img.src = "example.gif"; ev.dataTransfer.setDragImage(img, 10, 10); )

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

کتابخانه اجزای بصری - VCL نسخه مخصوص به خود Drag&Drop را پیاده‌سازی می‌کند، فناوری که دریافت و انتقال هر عنصر کنترلی را در همان فرم فراهم می‌کند. با این استفاده داخلی، VCL با سیستم عامل صحبت نمی کند، اگرچه باید از توابع مناسب Windows API برای سازماندهی ارتباطات بین برنامه های مختلف استفاده شود.

کاربر با فشردن دکمه سمت چپ ماوس می تواند عنصر کنترل (شیء مبدا) را به عنصر دیگر (شیء مقصد) بکشد. در لحظه‌های کشیدن و رها کردن، رویدادهایی تولید می‌شوند که برنامه باید آنها را پردازش کند (گیرنده رویداد عنصری است که نشانگر ماوس روی آن قرار دارد). ویژگی DragMode اجزاء مسئول مشارکت آنها در فرآیند تبادل داده است.

DragMode=dmAutomatic- رویدادها به طور خودکار فعال می شوند، برنامه نویس فقط کدهای مربوط به کنترل کننده رویداد را می نویسد.

DragMode=dmManual-برنامه نویس باید تمام تماس ها را خودش سازماندهی کند.

کشیدن رویدادها

رویداد OnDragOverزمانی اتفاق می افتد که نشانگر ماوس روی شی مقصد حرکت می کند و همچنین زمانی که دکمه روی این شی آزاد می شود.

پارامترهای رویداد:

شی فرستنده - گیرنده (مکان نما بالای آن است).

منبع - شی منبع؛

X,Y - مختصات ماوس در سیستم ناحیه مشتری شیء فرستنده.

State- State (دارای یکی از سه مقدار dsDragEnter - نشانگر ماوس روی عنصر ظاهر شد؛ dsDragMove مکان نما روی عنصر حرکت می کند؛ dsDragLeave - مکان نما عنصر را ترک کرد یا دکمه روی عنصر رها شد).

Accept یک متغیر بولی است. در این متغیر، کنترل کننده باید تصمیم خود مبنی بر پذیرش یا عدم پذیرش شی منبع را بازگرداند.

به عنوان مثال، یک جزء کلاس Label(Name=Label1) فقط باید اجزای کلاس Shape (اشکال هندسی) را بپذیرد، سپس کنترل کننده آن شامل بررسی شی منبع قابل حمل (Source) خواهد بود:

void __fastcall TForm1::Label1DragOver(TObject *فرستنده، TObject *منبع،

int X، int Y، وضعیت TDragState، bool &Accept)

Accept=Source->ClassNameIs("TShape");

رویداد OnDragDropزمانی اتفاق می افتد که دکمه سمت چپ ماوس روی عنصری که آماده دریافت است رها می شود. پارامترهای Sender، Source، X و Y آن همان معنای رویداد قبلی را دارند. محتوای این کنترل کننده بستگی به عملکردهایی دارد که برنامه نویس به کاربر اجازه می دهد از طریق کشیدن و رها کردن انجام دهد. این ممکن است تغییر در مکان اشیاء، تبادل اطلاعات و غیره باشد.

در مثال زیر، حرکت فیزیکی اجسام وجود ندارد. مؤلفه Label1 یک اشاره گر به شی منتقل شده (شکل هندسی) دریافت می کند و مقادیر ویژگی ها (ارتفاع، عرض) را برای محاسبه محیط شکل می خواند. نتیجه محاسبه در Label1-> Caption قرار می گیرد.

void __fastcall TForm1::Label1DragDrop(TObject *Sender,

TObject *منبع، int X، int Y)

float p, pi=3.14; int w,h,r,D;

if (String(Source->ClassName())=="TShape")

h=((TShape *)منبع)->قد;

w= ((TShape *) Source)->Width ;

D=w; اگر (D > h) D = h;

سوئیچ (((TShape *) منبع) -> شکل)

( مورد strRectangle:

Label2->Caption "مستطیل";

Label2->Caption = "مربع";

Label2->Caption = "دایره";

Label2->Caption = "بیضی";

p=pi*(3*(w+h)/4-sqrt(w*h)/2);

case strRoundRect:

Label2->Caption = "گرد

مستطیل"؛

r=(D-((TShape*)منبع)->Pen->

p=2*(w+h)-8*r+2*pi*r;

Case strRoundSquare:

Label2->Caption="گرد

مربع"؛

r=(D-((TShape*)منبع)->Pen->

p=4*D-8*r+2*pi*r;

p=p/(Form1->PixelsPerInch/2.54);

Label1->Caption = FloatToStr(p);

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

فرستنده - اشاره گر شی منبع؛

Target – اشاره گر شی هدف.

X، Y - مختصات مکان نما.

در مثال زیر، مؤلفه wrapper Shape1 نام شی مورد نظر را می‌آموزد (اگر شی مورد نظر پذیرفته نشود، NULL ارسال می‌شود):

void __fastcall TForm1::Shape1EndDrag(TObject *فرستنده، TObject *Target،

اگر (هدف != NULL)

Label2->Caption =(AnsiString) ((TComponent *) Target)->Name;

آیا تا به حال به این فکر کرده اید که لینوکس های سخت شده از چه نوع دسکتاپ استفاده می کنند که بیشتر اوقات در ترمینال می نشینند و چیزهایی مانند آیکون های دسکتاپ و drag’n’drop یا فراموش شده اند یا هرگز شناسایی نشده اند؟ آن آدم های عجیب و غریب که برای هر عطسه ای یک پوسته می نویسند و با انزجار به KDE و GNOME نگاه می کنند. خوب، امروز به شما نشان خواهیم داد که چگونه یک دسکتاپ واقعی واقعی با کاشی ها، نوارهای وضعیت و پایانه ها راه اندازی کنید.

بیایید با انتخاب توزیع شروع کنیم. اوبونتو، مینت، دبیان و فدورا توزیع‌های مناسبی برای گیک‌های واقعی نیستند. هیچ مشکلی با آنها وجود ندارد، اما اگر توجه کنید که طرفداران انتخاب سیستم از چه چیزی استفاده می کنند، به احتمال زیاد Arch Linux، Gentoo یا Slackware را خواهید دید. این توزیع ها به سادگی بوت هستند و امکان کنترل دقیق سیستم را فراهم می کنند.

بیایید روی Arch Linux، محبوب‌ترین توزیع برای گیک‌ها تمرکز کنیم. یک Arch Linux تازه نصب شده یک توزیع کنسول ساده است که هیچ کاری انجام نمی دهد. محافظه کارترین رفقا، که در دهه هشتاد بر یونیکس تسلط داشتند، به اندازه کافی از این کار برخوردار خواهند بود، اما همچنان حداقل به نوعی رابط گرافیکی و یک مرورگر گرافیکی نیاز دارند (بله، موارد مبتنی بر متن نیز وجود دارد، به عنوان مثال، Lynx، w3m، پیوندها، ELlinks).

در سیستم‌های مشابه یونیکس (که البته شامل لینوکس نیز می‌شود)، به اصطلاح مدیر پنجره (WM) مسئول اصلی تشکیل رابط گرافیکی است. این یک برنامه ویژه است که وظیفه اصلی آن مدیریت ویندوز، ایجاد قاب هایی با دکمه برای آنها، مدیریت صحیح موقعیت هایی است که پنجره ها با هم همپوشانی دارند و در برخی موارد ایجاد پنل ها و منوها برای راه اندازی برنامه ها و مدیریت آنها است. اگرچه این وظیفه معمولاً بر دوش سایر برنامه‌ها قرار می‌گیرد که همراه با مدیر پنجره، یک دسکتاپ کامل (محیط دسکتاپ، DE) مانند GNOME، KDE یا Xfce را تشکیل می‌دهند.

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

احتمالا بهترین مدیر پنجره کاشی موجود امروز i3 است. بیایید آن را نصب کنیم:

$ sudo pacman -S i3-wm

بدون خروج از تسویه حساب، ما بلافاصله i3status را نصب می کنیم (یک خط وضعیت با اطلاعات مفید مختلف و یک سینی در پایین صفحه نمایش داده می شود)، و همچنین یک برنامه کوچک dmenu که به شما امکان می دهد به سرعت برنامه ها را راه اندازی کنید، و دوره، یک شبیه ساز ترمینال:

$ sudo pacman -S i3status dmenu xterm

اگر این واقعاً نصب تمیز Arch Linux است، به سرور Xorg، درایور کارت گرافیک و درایور صفحه لمسی (اگر لپ‌تاپ باشد) نیز نیاز خواهید داشت:

$ sudo pacman -S xorg-server xf86-video-intel xf86-input-synaptics

بسته به سازنده تراشه ویدیویی بسته xf86-video-intel را به بسته ای که نیاز دارید تغییر می دهیم:

• انویدیا: xf86-video-nouveau
• ATI/AMD: xf86-video-ati.

ما همچنین به یک مدیر ورود نیاز داریم - همان پنجره گرافیکی با فیلدهایی برای وارد کردن نام کاربری و رمز عبور که هنگام بوت شدن سیستم مشاهده می کنید. هیچ کس استفاده از مدیر ورود به سیستم KDE، GNOME، Xfce یا هر محیط گرافیکی دیگری را ممنوع نمی‌کند، اما اینها برنامه‌های بسیار سنگینی هستند که وابستگی‌های کاملاً غیرضروری را به همراه دارند. بنابراین، ما بر روی یک مدیر ورود به سیستم ساده و سریع SLiM تمرکز خواهیم کرد:

$ sudo pacman -S اسلیم

ابتدا اجازه دهید پیکربندی /etc/slim.conf آن را با افزودن خط زیر به آن اصلاح کنیم:

current_theme archlinux

بلافاصله پس از ورود موفقیت آمیز، SLiM محتویات فایل ~/.xsession را اجرا می کند، که قرار است تنظیمات اولیه محیط کاربر را انجام دهد و مدیر پنجره را راه اندازی کند. ما سنت ها را تغییر نمی دهیم و خطوط زیر را به فایل اضافه می کنیم:

# زبان مورد نظر را برای رابط سیستم و برنامه‌ها مشخص کنید # اگر صادرات انگلیسی را ترجیح می‌دهید، این خطوط را حذف کنید. " ", winkeys" "grp:caps_toggle,grp_led:caps" # صدای بوق آزاردهنده را غیرفعال کنید xset b خاموش # اجرای i3 exec i3

این همه است، اکنون می توانید رابط کاربری گرافیکی را راه اندازی کنید:

$ sudo systemctl start slim

پنجره ورود به سیستم SLiM باید روی صفحه ظاهر شود.

i3 و dmenu

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

i3 به طور کامل با صفحه کلید کنترل می شود. Win + Enter یک ترمینال راه اندازی می کند (اکنون یک xterm بد است، اما ما آن را جایگزین می کنیم). به طور پیش‌فرض، پنجره‌ها کل صفحه نمایش را اشغال می‌کنند و آن را به دو، سه، چهار یا چند قسمت به صورت عمودی تقسیم می‌کنند. این رفتار را می توان با فشار دادن Win + w غیرفعال کرد که هر پنجره را به صورت تمام صفحه باز می کند - این تقریباً برای لپ تاپ هایی با قطر صفحه نمایش 10-13 اینچ ایده آل است.

جابجایی بین ویندوز - Win + فلش. Win + 1…0 - جابجایی بین دسکتاپ ها، که در اینجا به آن فضاهای کاری (Workspace) می گویند. برای بستن پنجره Win + Shift + Q را فشار دهید در این مرحله این ترکیب ها کافی خواهد بود.

Win + d یک ترکیب خاص است. dmenu را باز می کند، یک خط ورودی در بالای صفحه که به شما امکان می دهد برنامه های مورد نیاز خود را به سرعت راه اندازی کنید. dmenu در هسته خود بسیار شبیه نوار جستجوی جهانی Spotlight در macOS است: شما فقط شروع به تایپ کردن نام برنامه می کنید و گزینه هایی را از شما می خواهد. تکمیل خودکار نیز کار می کند. در i3، dmenu را می توان آنالوگ منوی برنامه در دسکتاپ های کلاسیک نامید.

i3 از گزینه های زیادی برای تقسیم صفحه به فضاهای کاری پشتیبانی می کند تا بتوانید برنامه های مختلف را در آنها مرتب کنید. حالت پنجره شناور کلاسیک نیز موجود است. می توانید برنامه فعلی را با استفاده از ترکیب Win + Shift + Spacebar به این حالت تغییر دهید. می توانید با نگه داشتن کلید Win پنجره را با ماوس بکشید، با دکمه سمت راست ماوس اندازه آن را تغییر دهید و دوباره با فشار دادن دکمه Win.

فونت ها، ترمینال و اسکرچ پد

به طور پیش فرض، i3 از یک فونت استاندارد نسبتا کسل کننده Xorg استفاده می کند، و به عنوان یک شبیه ساز ترمینال، ما یک xterm بد را نصب کردیم، که نه تنها کاربران، بلکه خود توسعه دهندگان نیز مدت هاست می خواستند آن را دفن کنند (شوخی نمی کنم). این باید اصلاح شود.

بیایید با فونت شروع کنیم. بحث های زیادی در مورد انتخاب فونت monospace کنسول وجود دارد (یعنی این همان چیزی است که ما به آن نیاز داریم، از جمله برای i3)، اما من پیشنهاد می کنم در Terminus توقف کنید. این یک فونت sans-serif واضح با حداقل اشکال گرد است، برای نمایشگرهای غیر شبکیه چشم (و همچنین Retina) بسیار خوانا و عالی است. نصب:

$ sudo pacman -S terminus-font

با شبیه ساز ترمینال نیز همه چیز مشخص نیست. سالهاست که urxvt (rxvt-unicode) استاندارد در نظر گرفته شده است. این سبک وزن، سریع و بسیار قابل تنظیم است. اما از آنجایی که نمی‌توانیم در چارچوب این مقاله به جزئیات سفارشی‌سازی عمیق هر مؤلفه بپردازیم (و urxvt بدون چنین سفارشی‌سازی وحشتناک است)، روی LilyTerm تمرکز خواهیم کرد. سریع است، حداقل وابستگی ها و تمام مزایای urxvt را دارد و می توان آن را با استفاده از منوی زمینه پیکربندی کرد:

$ sudo pacman -S lilyterm

حالا باید در فایل تنظیمات i3 تغییراتی ایجاد کنیم تا فونت ما را بگیرد و به جای ترمینال استاندارد از LilyTerm استفاده کند. فایل ~/.config/i3/config را باز کنید، گزینه فونت را پیدا کنید و مقدار آن را تغییر دهید:

فونت pango:xos4 Terminus 8

برای اجرای LilyTerm در Win + Enter، گزینه زیر را اضافه کنید:

Bindsym $mod+Return exec lilyterm

خوب، گزینه اجرای dmenu با فونت ما:

Bindsym $mod+d exec dmenu_run -fn "xos4 Terminus-8"

به علاوه چند خط برای فعال کردن به اصطلاح Scratchpad:

Bindsym $mod+Shift+minus scratchpad bindsym $mod+minus scratchpad show

Scratchpad در اصطلاح i3 یک پنجره کوچک با کلید میانبر در وسط صفحه است. برای برنامه‌هایی که اغلب مورد نیاز هستند، اما حواس‌پرتی را پرت می‌کنند و دائماً روی صفحه هستند، مناسب است (بله، برای پیام‌رسان‌های فوری). Win + minus صفحه خراش را نشان می دهد، فشار دادن مجدد آن را پنهان می کند. Win + Shift + minus پنجره فعلی را به scratchpad می فرستد.

وقتی همه تغییرات انجام شد، فایل را ذخیره کنید و Win + Shift + R را فشار دهید تا i3 دوباره راه اندازی شود.

ادامه فقط برای مشترکین در دسترس است

گزینه 1. برای خواندن تمام مطالب موجود در سایت در "هکر" مشترک شوید

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