IntroJ'ler vurgulanan alanları nasıl başarır?

Question

intro.js yazılımını kullanarak - yazılım arayüzlerini kullanma konusunda kullanıcılara rehberlik etmenin çok güzel bir yoludur. Kaynağa derinlemesine bakmadım, ancak, etkiyi elde etmek için, vurgulanan alanları (özellikle boyutlar/konum/zindexing) elde etmek için kodun ne yaptığını kısaca açıklayabileceğini merak ediyordum. peşin

Teşekkür Jay

Bağlantı: http://usablica.github.com/intro.js/

Answer 1

Eh - oldukça basit.

1. Genişlik/yükseklik ile bir bindirme div'i yapmak 100% z indeksi ile 1000 diyelim ki bu siyah opaklığa sahip ana bacground;
2. "adım" öğesinin özel elemanını z-dizini ile vurgulayan başka bir üst üste bindirme daha sonra taban kaplaması 1001 diyelim ki bu araç ipucu kabı açıklamasıyla "beyaz" elemandır;
3. Son olarak, orijinal öğeyi sayfadan konumlandırılacak şekilde ayarlayın: göreceli ve en yüksek z-endeksi (1002) hepsinin üstünde olacak şekilde.

Answer 2

Ben Afshin, Intro.js yazarıyım. Aslında nasıl çalıştığını size anlatayım. odaklanmış/vurgulanan eleman olarak

, iki ayrı şeyler happend:
1) bir yardımcı katman olun. Yardımcı katman, odaklanmış öğedeki beyaz yuvarlak köşe tabakasıdır.
2) Öğeyi, sayfadaki diğer tüm öğelerin önüne getirmek için, hedef öğenin z-index ve position öğelerini değiştirin.

hedef elemanın konumu (odaklanmalıdır elemanı/vurgulanmış) ise

geçerli: Bağıl

Mutlak/: IntroJs sadece hedef elemanı z-index9999999 ayarlı, hedef eleman ön gider böylece sayfadaki diğer tüm öğelerin Statik

: Şimdi IntroJs relative hedef elemanı pozisyonunu ayarlayın ve sonra 9999999 için z-index ayarlayın.

Şimdi, hedef öğe, sayfadaki tüm diğer öğelerin önündedir. Yani, son bir adım kalır, yardımcı elemanını yaratın. yardımcı katman oluşturmak için

, IntroJs sadece yükseklik, genişlik üst almak ve hedef elemanının bırakıldı ve daha sonra sınıf introJs-helperLayer (ve konumu absolute) ile div oluşturmak ve body ekle.

Sonuç IntroJs iki adım, ilk (sayfa yuvarlak köşe tabakası) bir yardımcı katman oluşturarak ve ardından getirmek amacıyla hedef eleman içeriğini relative yaratıyor bir öğe odaklanmak amacıyla

, sayfadaki tüm öğelerin önüne.