Öğeleri sürükleyip bırakın. Sürükle ve bırak: kullanıcı arayüzü öğelerini değiştirmenin bir yolu

Uzun bir süre, Sürükle ve Bırak işlevini oluşturmak için JavaScript işlevleri kullanıldı, ancak tarayıcılar sonucu her zaman doğru görüntüleyemedi. HTML 5'in, biraz JavaScript ile Sürükle ve Bırak'ı akıllıca desteklemenin bir yolu vardır. Bu makalede HTML 5'te Sürükle ve Bırak kullanımına ilişkin görsel bir örnek ayrıntılı olarak verilmektedir.

Sürükle&Bırak Etkinlikleri

• dragStart: Kullanıcı öğeyi sürüklemeye başlar.
• dragEnter: Sürüklenen eleman bitiş elemanına ulaşır.
• dragOver: Sürüklerken fare imleci öğenin üzerindedir.
• dragLeave: Fare imleci sürüklenen öğeden ayrılır.
• sürükle: Sürüklerken imleç hareket eder.
• drop: element düşüşü gerçekleşir.
• dragEnd: Kullanıcı sürüklerken fare imlecini serbest bırakır.

veri Aktarım nesnesi

• dataTransfer.fectAllowed=değer: Mevcut eylemin türünü döndürür - yok, kopyala, copyLink, copyMove, link, linkMove, taşı, tümü veya başlatılmamış.
• dataTransfer.setData(format, data): istenilen formatta veri ekler.
• dataTransfer.clearData(format): verileri temizler.
• dataTransfer.setDragImage(element, x, y): imleç koordinatlarında (0, 0 - sol üst köşe) sürüklenecek görüntüyü ayarlar.
• data = dataTransfer.getData(format): verileri döndürür.

Sürükle-Bırak Örneği

Bir nesneyi sürüklemeye başlayın

Function dragStart(ev) ( ev.dataTransfer.fectAllowed="move"; ev.dataTransfer.setData("Text", ev.target.getAttribute("id")); ev.dataTransfer.setDragImage(ev.target,100,100) ; doğruyu döndür; )
İlk satır olası sürükle ve bırak türünü (hareket) belirtir, ikinci satır ise işlem veri türünü (Metin) ve kimliği ayarlar. Üçüncü satırda, setDragImage imlecin konumunu, bu durumda 200x200 piksel karenin ortasında belirler.

Nesneyi sürüklemeyi bitirme

function dragEnter(ev) ( event.preventDefault(); return true; ) function dragOver(ev) ( event.preventDefault(); )

Bu basit örnekte, yalnızca ana eylemler ayarlanmıştır, ancak arka plan rengini değiştirme, metin ekleme vb. gibi başka eylemler de eklenebilir. Sonraki son aşamadır. Son sürükleme eylemini burada ayarlayabilirsiniz:

Function dragDrop(ev) ( var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); return false; )
Örnekte de görebileceğiniz gibi mavi bloklar sürüklendikten sonra orijinal yerlerine geri dönebilmektedir. Neyse ki bunu yapmak çok kolaydır. Tüm işlevler bildirildi, aşağıdaki kodu eklemek kalıyor:

Çözüm

Uzun bir süredir, sürükle ve bırak arayüzleri oluşturmamıza olanak tanıyan JavaScript işlevleri mevcut. Ancak bu uygulamaların hiçbiri tarayıcıya özgü değildir.HTML5'in kendi sürükle ve bırak arayüzleri oluşturma yöntemi vardır (JavaScript'in biraz yardımıyla). Bu yazımızda size bunun nasıl başarılabileceğini anlatacağız...

Tarayıcı desteği

HTML5 sürükle ve bırak şu anda tüm büyük masaüstü tarayıcılar tarafından desteklenmektedir (IE dahil (IE 5.5 bile kısmi desteğe sahiptir)), ancak popüler mobil tarayıcıların hiçbiri tarafından desteklenmemektedir.

Sürükle ve Bırak etkinlikleri

Sürükle ve bırak işleminin her aşamasında, tarayıcının hangi JavaScript kodunu çalıştıracağını bilmesini sağlamak için çeşitli olaylar tetiklenir. Olayların listesi:

• dragStart: kullanıcı öğeleri sürüklemeye başladığında tetiklenir;
• dragEnter: sürüklenen öğe hedef öğenin üzerine ilk kez sürüklendiğinde tetiklenir;
• dragOver: sürükleme devam ederken fare bir öğenin üzerinde hareket ettiğinde tetiklenir;
• dragLeave: kullanıcının imleci sürükleme sırasında öğeden ayrılırsa tetiklenir;
• sürükle: öğemizi sürüklerken fareyi her hareket ettirdiğimizde tetiklenir;
• drop: gerçek drop uygulandığında tetiklenir;
• dragEnd: kullanıcı bir nesneyi sürüklerken fare düğmesini bıraktığında tetiklenir.

Tüm bu olay dinleyicileri sayesinde arayüzün nasıl çalışacağı üzerinde çok fazla kontrole sahip olursunuz.

veri Aktarım nesnesi

Tüm sürükle ve bırak büyüsünün gerçekleştiği yer burasıdır. Bu nesne, sürükleme işlemi tarafından gönderilen verileri içerir. Veriler çeşitli yollarla oluşturulabilir ve elde edilebilir; bunlardan en önemlileri şunlardır:

• dataTransfer.fectAllowed=değer: İzin verilen eylem türlerini döndürür; olası değerler none, copy, copyLink, copyMove, link, linkMove, move, all ve başlatılmamış değerlerdir.
• dataTransfer.setData(format, data): Belirli verileri ve formatı ekler.
• dataTransfer.clearData(format): Belirli bir formata ait tüm verileri temizler.
• dataTransfer.setDragImage(element, x, y): sürüklemek istediğiniz görüntüyü ayarlar, x ve y değerleri fare imlecinin nerede olması gerektiğini belirtir (0, 0 onu sol üste konumlandırır).
• data = dataTransfer.getData(format) : Adından da anlaşılacağı gibi, belirli bir formata ait verileri döndürür.

Sürükle ve bırak örneği oluşturma

Şimdi basit bir sürükle&bırak örneği oluşturmaya başlayacağız. Gördüğünüz gibi iki küçük ve bir büyük div'imiz var, küçük div'leri büyük div'in içine sürükleyebiliriz, hatta geri taşıyabiliriz.

Bir nesneyi sürüklemek

Yapmamız gereken ilk şey HTML'yi oluşturmak. Div'leri sürüklenebilir özellik ile sürüklenebilir hale getiriyoruz:

Bu yapıldıktan sonra, bu öğeyi taşımaya başladığımızda etkinleşecek bir JavaScript işlevi tanımlamamız gerekir:

Function dragStart(ev) ( ev.dataTransfer.fectAllowed="move"; ev.dataTransfer.setData("Text", ev.target.getAttribute("id")); ev.dataTransfer.setDragImage(ev.target,100,100) ; doğruyu döndür; )

Bu kodda öncelikle operasyonda ne tür bir efekte izin verdiğimizi beyan edip hareket etmesini ayarlıyoruz. İkinci satırda, metnin Metin olacağı ve değerin sürüklediğimiz öğenin kimliği olacağı şekilde çalışacak verileri ayarlıyoruz. Bundan sonra neyi sürükleyeceğimizi ve ardından sürükleme sırasında imlecin nerede olacağını ayarlayacak olan setDragImage yöntemini kullanıyoruz ve küpler 200 x 200 piksel olduğundan tam ortasına yerleştirdik. Sonunda return true değerini döndürüyoruz.

Nesneyi bırak

Bir öğenin bir bırakmayı kabul etmesi için 3 farklı olayı dinlemesi gerekir: dragEnter, dragOver ve drop olayı. O halde bunu büyük ID'li HTML5 div'imize ekleyelim:

function dragEnter(ev) ( ev.preventDefault(); return true; ) function dragOver(ev) ( ev.preventDefault(); )

İlk fonksiyonda sürüklediğimiz eleman, düşüşün olması gereken yere ulaştığında ne olması gerektiğini tanımlıyoruz, bu durumda sadece tarayıcının varsayılan davranışını engellemiş oluyoruz. Daha sonra, dragOver işlevinde, varsayılan olarak bırakmanın gerçekleşmesine izin vermiyoruz.

Bir sonraki bölümde, bir elemanın istenilen hedefe "atılması" için bir fonksiyon tanımlayacağız:

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

Bu son kısımda öncelikle metin formatı için mevcut olan tüm verileri alacağımız data değişkenini ayarlıyoruz ve ardından div'de elementi bırakmak istediğimiz yere veri ekliyoruz.

Bırakma bölümünü hedef haline getirin

Demo, iki div'in tekrar yerine taşınabileceğini gösteriyor. Neyse ki, başka bir bırakma hedefi eklemek düşündüğünüzden çok daha kolaydır. Çünkü bu işlevlere zaten sahibiz ve tek yapmamız gereken olay dinleyicileri eklemek:

Div'in tekrar yerine sürüklenebilmesi için gereken tek şey budur.

JavaScript kitaplıkları kullanılarak oluşturulan birçok sürükle&bırak uygulaması vardır ve bunların kullanımı genellikle daha kolaydır. Ancak bu HTML5 ve JavaScript tekniğinde sorunlarınızı çözmek için gelecekteki potansiyeli göreceğinizi umuyoruz.

HTML Sürükle ve Bırak arayüzleri, uygulamaların Firefox ve diğer tarayıcılardaki sürükle ve bırak özelliklerini kullanmasını sağlar.Örneğin bu özelliklerle kullanıcı seçim yapabilir. sürüklenebilir elemanları fareyle bir yere sürükleyin bırakılabiliröğesini seçin ve fare düğmesini bırakarak bu öğeleri bırakın. Yarı saydam bir temsili sürüklenebilirÖğeler, sürükleme işlemi sırasında fare işaretçisini takip eder.

Web siteleri, uzantılar ve XUL uygulamaları için, oluşturulabilecek öğe türlerini özelleştirebilirsiniz. sürüklenebilir unsurlar ve geri bildirimin türü sürüklenebilir elementler üretir ve bırakılabilir elementler.

Bu belge bir genel bakış HTML sürükle ve bırak. Arayüzlerin açıklamasını, bir uygulamaya sürükle ve bırak desteği eklemeye yönelik temel adımları ve arayüzlerin birlikte çalışabilirliğinin bir özetini içerir.

Olayları Sürükle

Temeller

Bu bölüm, bir uygulamaya sürükle ve bırak işlevini eklemeye yönelik temel adımların bir özetini sağlar. Her bölüm adımın açıklamasını, kısa kod örneğini ve ek bilgilere bağlantılar içerir.

ne olduğunu tanımla sürüklenebilir

Bir öğe yapmak için sürüklenebilir aşağıdaki kod örneğinde gösterildiği gibi, sürüklenebilir özniteliğin yanı sıra ondragstart genel olay işleyicisinin eklenmesini gerektirir

Function dragstart_handler(ev) ( console.log("dragStart"); // Hedef öğenin kimliğini veri aktarım nesnesine ekleyin ev.dataTransfer.setData("text/plain", ev.target.id); )

Bu öğe sürüklenebilir.

Sürükleme görüntüsünü tanımlayın

Varsayılan olarak tarayıcı, sürükleme işlemi sırasında fare işaretçisinin yanında görünen bir görüntü sağlar. Ancak bir uygulama, öğeyi kullanarak özel bir görüntü tanımlayabilir ancak bu aynı zamanda bir veya başka bir görüntü öğesi."> setDragImage() yöntemini aşağıdaki örnekte gösterildiği gibi kullanın.

Function dragstart_handler(ev) ( // Bir görüntü oluşturun ve ardından onu sürükleme görüntüsü için kullanın. // NOT: "example.gif"i mevcut bir görüntüyle değiştirin, aksi takdirde görüntü // oluşturulmayacak ve varsayılan sürükleme görüntüsü kullanılmış.var img = new Image(); img.src = "example.gif"; ev.dataTransfer.setDragImage(img, 10, 10); )

Sürükle ve Bırak, uygulamalar arasında veri paylaşmanın bir yoludur. Bu değişim yöntemi birçok yazılım uygulaması tarafından kullanılmaktadır. Örneğin, dosyalar ve klasörler sıklıkla bu şekilde taşınır.

Görsel bileşen kütüphanesi - VCL, herhangi bir kontrol öğesinin aynı form içinde alınmasını ve iletilmesini sağlayan bir teknoloji olan kendi Sürükle ve Bırak sürümünü uygular. Bu dahili kullanımda, farklı uygulamalar arasındaki iletişimi düzenlemek için uygun Windows API işlevlerinin kullanılması gerekmesine rağmen, VCL işletim sistemiyle konuşmaz.

Kullanıcı, farenin sol tuşuna basarak kontrol öğesini (kaynak nesne) başka bir öğeye (hedef nesne) sürükleyebilir. Sürükleme ve bırakma anlarında, programın işlemesi gereken olaylar oluşturulur (olay alıcısı, fare imlecinin üzerinde bulunduğu öğedir). Bileşenlerin DragMode özelliği, veri alışverişi sürecine katılımlarından sorumludur.

DragMode=dmOtomatik- olaylar otomatik olarak tetiklenir, programcı yalnızca ilgili olay işleyicilerinin kodlarını yazar.

DragMode=dmManual- programcı tüm aramaları kendisi organize etmelidir.

Etkinlikleri Sürükleme

OnDragOver olayı fare imleci hedef nesnenin üzerine geldiğinde ve bu nesnenin üzerindeki düğme bırakıldığında meydana gelir.

Etkinlik parametreleri:

Gönderen - alıcı nesnesi (imleç onun üzerindedir);

Kaynak - kaynak nesnesi;

X,Y - Gönderen nesnesinin istemci alanı sistemindeki fare koordinatları;

durum- durum (üç değerden birine sahiptir dsDragEnter - fare imleci öğenin üzerinde belirdi; dsDragMove imleç öğenin üzerinde hareket eder; dsDragLeave - imleç öğeden ayrıldı veya düğme öğenin üzerinde serbest bırakıldı).

Accept bir boole değişkenidir. Bu değişkende işleyicinin Source nesnesini kabul etme veya kabul etmeme kararını geri vermesi gerekir.

Örneğin, bir Label(Name=Label1) sınıfı bileşeni yalnızca Shape(geometrik şekiller) sınıfı bileşenlerini kabul etmelidir, ardından işleyicisi taşınabilir kaynak nesnesinin (Kaynak) bir denetimini içerecektir:

void __fastcall TForm1::Label1DragOver(TObject *Gönderen, TObject *Kaynak,

int X, int Y, TDragState Durumu, bool &Kabul Et)

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

OnDragDrop olayı Almaya hazır bir öğenin üzerinde sol fare düğmesi bırakıldığında meydana gelir. Gönderici, Kaynak, X ve Y parametreleri bir önceki olayla aynı anlama sahiptir. Bu işleyicinin içeriği, programcının kullanıcının sürükle ve bırak yoluyla gerçekleştirmesine izin verdiği işlevlere bağlıdır. Bu, nesnelerin konumunda bir değişiklik, bilgi alışverişi vb. olabilir.

Aşağıdaki örnekte nesnelerin fiziksel bir hareketi yoktur; Label1 bileşeni, taşınan nesneye (geometrik şekil) yönelik bir işaretçi alır ve şeklin çevresini hesaplamak için özelliklerin (Yükseklik, Genişlik) değerlerini okur. Hesaplama sonucu Etiket1-> Başlık'a yerleştirilir.

void __fastcall TForm1::Label1DragDrop(TObject *Sender,

TObject *Kaynak, int X, int Y)

kayan nokta p, pi=3,14; int w, h, r, D;

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

h=((TShape *)Kaynak)->Yükseklik;

w= ((TShape *)Kaynak)->Genişlik ;

D=w; eğer (D > h) D = h;

anahtarı (((TShape *)Kaynak) -> Şekil)

( case strRectangle:

Label2->Başlık ="Dikdörtgen";

Etiket2->Başlık = "Kare";

Etiket2->Başlık = "Daire";

Etiket2->Başlık = "Elips";

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

durum strRoundRect:

Label2->Caption = "Yuvarlak

dikdörtgen";

r=(D-((TShape*)Kaynak)->Kalem->

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

durum strRoundSquare:

Label2->Caption="Yuvarlak

kare";

r=(D-((TShape*)Kaynak)->Kalem->

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

p=p/(Form1->İnç Başına Piksel/2,54);

Label1->Caption = FloatToStr(p);

Sürükleme işlemi sona erdiğinde, sonucu ne olursa olsun orijinal nesne OnEndDrag olayı. Parametreleri:

Gönderen - kaynak nesnenin işaretçisi;

Hedef – hedef nesnenin işaretçisi;

X, Y – imleç koordinatları.

Aşağıdaki örnekte, Shape1 sarmalayıcı bileşeni hedef nesnenin adını öğrenir (nesne kabul edilmezse NULL iletilir):

void __fastcall TForm1::Shape1EndDrag(TObject *Sender, TObject *Target,

if (Hedef != NULL)

Label2->Caption =(AnsiString) ((TComponent *) Hedef)->Ad;

Çoğu zaman terminalde oturan deneyimli Linuxoid'lerin ne tür bir masaüstü kullandığını ve masaüstü simgeleri ve sürükle bırak gibi şeylerin ya unutulduğunu ya da hiç tanınmadığını hiç merak ettiniz mi? Her hapşırık için bir kabuk senaryosu yazan ve KDE ve GNOME'a tiksintiyle bakan tuhaf insanlar. Bugün size kutucuklar, durum çubukları ve terminallerle gerçek bir inek masaüstünün nasıl kurulacağını göstereceğiz.

Bir dağıtım seçerek başlayalım. Ubuntu, Mint, Debian ve Fedora gerçek inekler için uygun dağıtımlar değil. Bunlarda yanlış bir şey yok, ancak sistemi seçen hayranların ne kullandığına dikkat ederseniz, büyük olasılıkla Arch Linux, Gentoo veya Slackware'i göreceksiniz. Bu dağıtımlar bir önyükleme kadar basittir ve sistem üzerinde hassas kontrole izin verir.

Bugün meraklılar için en popüler dağıtım olan Arch Linux'a odaklanalım. Yeni kurulmuş bir Arch Linux, hiçbir şey yapmayan basit bir konsol dağıtımıdır. Seksenli yıllarda UNIX konusunda uzmanlaşan en muhafazakar yoldaşlar buna yetecek, ancak yine de en azından bir tür grafik arayüze ve grafik tarayıcıya ihtiyaçları var (evet, metin tabanlı olanlar da var, örneğin Lynx, w3m, Bağlantılar, EBağlantılar).

UNIX benzeri sistemlerde (elbette Linux'u da içerir), grafik arayüzün oluşturulmasından öncelikle pencere yöneticisi (WM) adı verilen birim sorumludur. Bu, ana görevi pencereleri yönetmek, onlar için düğmeli çerçeveler oluşturmak, pencerelerin çakıştığı durumları doğru şekilde yönetmek ve bazı durumlarda uygulamaları başlatmak ve yönetmek için paneller ve menüler oluşturmak olan özel bir uygulamadır; ancak bu görev genellikle pencere yöneticisiyle birlikte GNOME, KDE veya Xfce gibi eksiksiz bir masaüstü (Masaüstü Ortamı, DE) oluşturan diğer uygulamaların omuzlarına düşer.

Herhangi bir DE'ye ihtiyacımız yok, bu UNIX dünyasına Windows'tan gelen şeytanların bir icadıdır. Üstelik klasik bir pencere yöneticisine ihtiyacımız yok çünkü pencereleri fareyle hareket ettirmek ve üst üste bindirmek verimsizdir. Bunun yerine, pencerelerin ekran boyunca sürüklenmesine izin vermeyen, bunun yerine ya tüm pencereleri her zaman tam ekrana açan ya da ekranı pencereler arasında orantılı (veya orantısız) bölerek, birbirleriyle örtüşmelerini önler.

Muhtemelen bugün mevcut olan en iyi döşeme penceresi yöneticisi i3'tür. Hadi kuralım:

$ sudo pacman -S i3-wm

Ödeme işleminden ayrılmadan, hemen i3status'u (çeşitli yararlı bilgiler içeren bir durum satırı ve ekranın altında bir tepsi görüntüleyecektir) yanı sıra uygulamaları hızlı bir şekilde başlatmanıza olanak tanıyan küçük bir dmenu uygulamasını yükleyeceğiz ve elbette, bir terminal emülatörü:

$ sudo pacman -S i3status dmenu xterm

Bu gerçekten Arch Linux'un temiz bir kurulumuysa, bir Xorg sunucusuna, bir ekran kartı sürücüsüne ve bir dokunmatik yüzey sürücüsüne (dizüstü bilgisayarsa) da ihtiyacınız olacaktır:

$ sudo pacman -S xorg-sunucusu xf86-video-intel xf86-giriş-synaptics

Video çipinin üreticisine bağlı olarak xf86-video-intel paketini ihtiyacınız olan paketle değiştiriyoruz:

• Nvidia: xf86-video-nouveau
• ATI/AMD: xf86-video-ati.

Ayrıca bir oturum açma yöneticisine de ihtiyacımız olacak - sistem önyüklendiğinde gördüğünüz kullanıcı adını ve şifreyi girmek için alanlarla aynı grafik pencere. Hiç kimse oturum açma yöneticisi KDE, GNOME, Xfce veya başka herhangi bir grafik ortamının kullanılmasını yasaklamaz, ancak bunlar çok sayıda gereksiz bağımlılığı beraberinde getiren çok ağır uygulamalardır. Bu nedenle basit ve hızlı bir SLiM oturum açma yöneticisine odaklanacağız:

$ sudo pacman -S ince

Öncelikle /etc/slim.conf yapılandırmasını aşağıdaki satırı ekleyerek düzeltelim:

current_theme archlinux

Başarılı bir oturum açma işleminin hemen ardından SLiM, kullanıcı ortamının ilk kurulumunu yapması ve pencere yöneticisini başlatması beklenen ~/.xsession dosyasının içeriğini yürütecektir. Gelenekleri değiştirmeyeceğiz ve dosyaya şu satırları eklemeyeceğiz:

# Sistem arayüzü ve uygulamalar için tercih edilen dili belirtin # İngilizce tercih ediyorsanız bu satırları silin Export LANG=ru_RU.utf8 Export LC_ALL=ru_RU.utf8 # Büyük Harf Kilidi tuşunu kullanarak düzen değiştiriciyi Rusça ve İngilizce arasında ayarlayın setxkbmap "us,ru " ", winkeys" "grp:caps_toggle,grp_led:caps" # Rahatsız edici bip sesini devre dışı bırak xset b off # i3 exec i3'ü çalıştır

Hepsi bu kadar, artık GUI'yi başlatabilirsiniz:

$ sudo systemctl ince başla

Ekranda SLiM oturum açma penceresi görünmelidir.

i3 ve dmenu

Yani, sizden önce i3. Daha doğrusu, yalnızca altta bir durum çubuğu olan siyah bir ekran görmelisiniz (mevcut disk doluluğunu, bağlı ağ arayüzlerini, pil seviyesini, tarihi ve saati görüntüler). Menüler, başlat düğmeleri veya başka saçmalıklar yok.

i3 tamamen klavye kontrollüdür. Win + Enter bir terminal başlatır (şimdi berbat bir xterm, ancak onu değiştireceğiz). Varsayılan olarak pencereler tüm ekran alanını kaplar ve onu dikey olarak iki, üç, dört veya daha fazla parçaya böler. Bu davranış, her pencereyi tam ekranda açacak olan Win + w tuşlarına basılarak devre dışı bırakılabilir - bu, ekran köşegeni 10-13" olan dizüstü bilgisayarlar için neredeyse idealdir.

Pencereler arasında geçiş yapma - Win + oklar; Win + 1…0 - burada çalışma alanları (Çalışma Alanı) olarak adlandırılan masaüstleri arasında geçiş yapın. Pencereyi kapatmak için Win + Shift + Q tuşlarına basın. Bu aşamada bu kombinasyonlar yeterli olacaktır.

Win + d özel bir kombinasyondur. İhtiyacınız olan uygulamaları hızlı bir şekilde başlatmanıza olanak tanıyan, ekranın üst kısmındaki bir giriş satırı olan dmenu'yu açar. Özünde dmenu, macOS'taki evrensel Spotlight tipi arama çubuğuna çok benzer: uygulamanın adını yazmaya başlarsınız ve size seçenekler sunar. Otomatik tamamlama da çalışır. İ3'te dmenu, klasik masaüstlerindeki uygulama menüsünün bir benzeri olarak adlandırılabilir.

i3, ekranı çalışma alanlarına bölmek için birçok seçeneği destekler, böylece bu alanlarda farklı uygulamaları düzenleyebilirsiniz. Klasik kayan pencere modu da mevcuttur. Win + Shift + Spacebar kombinasyonunu kullanarak mevcut uygulamayı bu moda geçirebilirsiniz. Win tuşunu basılı tutarken pencereyi fare ile sürükleyebilir, farenin sağ tuşuyla yeniden boyutlandırabilir, yine Win tuşuna basarak pencereyi yeniden boyutlandırabilirsiniz.

Yazı tipleri, terminal ve karalama defteri

Varsayılan olarak, i3 oldukça sıkıcı bir standart Xorg yazı tipi kullanıyor ve bir terminal emülatörü olarak, yalnızca kullanıcıların değil geliştiricilerin de uzun süredir gömmek istediği kötü bir xterm yükledik (şaka yapmıyorum). Bunun düzeltilmesi gerekiyor.

Yazı tipiyle başlayalım. Konsol tek aralıklı yazı tipinin seçimi hakkında pek çok tartışma var (yani, i3 de dahil olmak üzere ihtiyacımız olan şey bu), ancak Terminus'ta durmanızı öneririm. Minimum yuvarlak şekle sahip net bir sans-serif yazı tipidir, oldukça okunabilirdir ve Retina olmayan ekranlar (ve Retina için de) için mükemmeldir. Düzenlemek:

$ sudo pacman -S terminal-yazı tipi

Terminal emülatöründe de her şey net değil. Uzun yıllar boyunca urxvt (rxvt-unicode) standart olarak kabul edildi. Hafiftir, hızlıdır ve son derece özelleştirilebilirdir. Ancak bu makale çerçevesinde her bileşenin derinlemesine özelleştirilmesinin ayrıntılarına giremeyeceğimiz için (ve böyle bir özelleştirme olmadan urxvt berbattır), LilyTerm'e odaklanacağız. Hızlıdır, minimum düzeyde bağımlılığa sahiptir ve urxvt'nin tüm avantajlarına sahiptir ve içerik menüsü kullanılarak yapılandırılabilir:

$ sudo pacman -S lilyterm

Şimdi i3 ayar dosyasında yazı tipimizi alacak ve standart terminal yerine LilyTerm kullanacak şekilde değişiklikler yapmamız gerekiyor. ~/.config/i3/config dosyasını açın, yazı tipi seçeneğini bulun ve değerini değiştirin:

Yazı tipi pango:xos4 Terminus 8

LilyTerm'i Win + Enter'da çalıştırmak için aşağıdaki seçeneği ekleyin:

Bindsym $mod+Return exec lilyterm

Yazı tipimizle dmenu çalıştırma seçeneği:

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

Artı olarak adlandırılan karalama defterini etkinleştirmek için birkaç satır:

Bindsym $mod+Shift+minus karalama defterini taşımabindsym $mod+minus karalama defteri gösterisi

i3 terminolojisinde Scratchpad, ekranın ortasında bulunan, kısayol tuşuyla erişilebilen küçük bir penceredir. Sık sık ihtiyaç duyulan ancak dikkat dağıtıcı, sürekli ekranda olan uygulamalar için çok uygundur (evet, anlık mesajlaşma programları için). Win + eksi karalama defterini gösterir, tekrar basıldığında onu gizler. Win + Shift + minus geçerli pencereyi karalama defterine gönderir.

Tüm değişiklikler tamamlandığında dosyayı kaydedin ve i3'ü yeniden başlatmak için Win + Shift + R tuşlarına basın.

Devam yalnızca abonelere açıktır

Seçenek 1. Sitedeki tüm materyalleri okumak için "Hacker" a abone olun

Abonelik, belirtilen süre boyunca sitenin TÜM ücretli materyallerini okumanıza olanak tanır. Banka kartlarıyla, elektronik parayla ve mobil operatörlerin hesaplarından yapılan transferlerle ödeme kabul ediyoruz.