10 ŞUBAT 2014, PAZARTESİ

Çekirdek Javascript Çoklu Sütun Düzeni Kılavuz Programlama Eğitimi

Merhaba öğreneceksiniz bu egzersiz herkes program Çoklu sütun ızgara düzeni mısır birazcık kullanarak JavaScript Bir çok sütunlu sınıf kutuları değişen yükseklikleri sağlar düzgünce hiç boşa alan sayfa üzerinde aşağı yığılmış için bu tabloları kullanarak render edilemez etkisi var ya da CSS kendisine farklı bir yaklaşım almaya elemanları var yüzer Ertesi Egzersiz biz css3 çok sütun düzenleri kapsayacak saf CSS ile size yaklaşımı seçebilirsiniz bu şekilde benzer bir düzeni üretmek onlar farklı davranış çünkü en sevdiğiniz o Ben en bir web sayfasında bitirmek bir göz atalım gerçeği numara size ders kodu

iki örnek vermek Dağınık bir örnek aslında şu anda inşa edebilirsiniz biridir ve görmek Bu kılavuz ortalanmış web sayfası ve kodlanmış ile 900 piksel de bu sürümü almak için gidiyoruz yani o tam ekran dinamik vardır onu

n Tüm kutuları tam ekran olarak uyanık tarayıcı penceresinde böylece ders kodunda bu örnekleri hem alırsınız ama biz gidiyoruz örnek bir video öğretici hemen inşa etmek bu bir JavaScript tam olarak aynı ç

“Ders Kodu: http://www.developphp.com/view.php?tid=1382 Çekirdek JavaScript birazcık kullanarak çok sütunlu ızgara düzenleri Öğrenmek için program. Bir çok sütun ı...”
Adam Khoury

ok benzer bu biridir Tek fark CSS küçük farklılıklar olduğunu biz bazı temel HTML ve CSS ile başlayan gidiyoruz Zaten yerinde ve bana kılan sana göstereyim Sen burada benim açgözlülük düzeni kabı var görebilirsiniz kesik olan Gray Line ve pencere merkezli oluyor sınırı gösterir o içimde 15 kutu var Tüm farklı yükseklikte veya değişken yükseklikleri Amacım JavaScript tüm bu kutular konumlandırmak yapmaktır sıkı sıkıya ızgara düzeni içine şimdi ben buraya gitmek

Çekirdek Javascript Çoklu Sütun Düzeni Kılavuz Programlama Eğitimi Resim 1 Çekirdek Javascript Çoklu Sütun Düzeni Kılavuz Programlama Eğitimi Resim 2 Çekirdek Javascript Çoklu Sütun Düzeni Kılavuz Programlama Eğitimi Resim 3 Çekirdek Javascript Çoklu Sütun Düzeni Kılavuz Programlama Eğitimi Resim 4

ve bu kutuları float deneyebilirsiniz Bazı insanlar sadece sol bu kutular yüzebilen düşünebilir gibi ve sonra onlar yerine tüm düşmek en ne olacağını görelim edeceğiz Gördüğünüz% uh değişen yüksekliklerde çünkü tam olarak aynı yükseklikte olsaydı bir sorun var hiçbir sorun olurdu ama biz değişen yüksekliklere sahip Devam edin ve bu pozisyon yapmak için gidiyorum öylesine biz şamandıra kullanamazsınız Mutlak artık bu yaptım Eğer ben burada ızgara kabı hedefleyen ediyorum görebilirsiniz Bu kural ve ardından tüm alt kimlikleri hed

ef Izgara kap içinde onlara bu özellikleri veren ve bu iki kural kutu renklerini alternatif ayarlamak ve sonra bu kural tüm yaptım etkiliyor İyi kaplar içindeki çocuk kimlikleri Çocuk burada DC aşağı verir Ben büyük bir konteyner vardı ve sonra ben iyi içindeki tüm çocuk vardı konteyner ve sonra orada her çocuğun o birinin içine başka çocuk ve ben ped ve kenar boşluğu olabilir bu şekilde eklemek vermedi tüm bu şeyler senin düzeni karışıklık olmadan sadece içerik koyabilirsiniz içinde Bu yüzden en neyi pozisyonda bir göz atalım burada vermedi Biz akışından değişti zaman mutlak yaptım hepsi yığılmış see mutlak pozisyon Sağ sol üst konumda aynı noktada ve ben onları mutlak konumlandırılmış olmak istiyorum bu yüzden ne istediğinizi Ben tüm bu konumlandırmak için JavaScript kullanmak için gidiyorum çünkü onlar çok gitmek gerekir tam olarak nerede stil etiketi altında gidelim en go ahead ve yolumuza o yüzden tüm bu daraltmak izin ben bu senaryoyu kapatmak emin sağ script öğesindeki koymak sereceğim altında yapmak eleman Sayfa yüklendiğinde benim ızgara işlemek istediğinizde doğru sayfa yeniden boyutlandırılır zaman ve ben de istiyorum kullanıcı benim pencereyi yeniden boyutlandırmak olur yani ızgara hale Ben de her şeyin yerinde kalır yapmak için ızgara işlemek istiyorum Ben dinleyicilerine olacak koymak kulüpler ve pencere nesnesi üzerinde konum bu yüzden pencere nesnesi sonra olay dinleyicisi aşırı eklemek hedef ve biz yük olay ızgarayı işlemek adında bir işlevi çalıştırmak Pencere nesne üzerinde daha sonra sayfa ilk yüklendiğinde yine biz varken demektir Bir olay dinleyicisi kullanıcı pencereyi yeniden boyutlandırmak olur bu yüzden her zaman diğer boyutlandırma Biz ızgara hale edeceksin yüzden ihtiyacınız olan tüm ızgara hale işlevi Üst burada oturan ızgara hale işlevini yazın yakın parantez küme ayracı açılması ve kıvırcık taban kapatma açmak ve isterseniz disfonksiyonu dışa seçebilirsiniz ve içerebilir sayfanızı dosya harici JavaScript koydum Bunun yerine HTML'nize doğrudan bu komut yok olsaydın veya web sayfası ve ilk şey bu işlev içinde yapmak istiyorum temsil eden bir dizi olsun ızgara hale getirmek Çocuk bu içinde sadece her ne kadar Izgara konteyner ve javascript kolayca yapabilirsiniz diyerek bar blokları ve bloklar diziyi temsil edecek Tüm bu alt kimlikleri ve eleman kimliği olacak olsun bir belgedir İyi konteyner nokta çocukların bu yüzden nokta kullanmak Izgara kap üzerinde çocuklar mülkiyet tüm çocukları ve tüm çocuklarını erişmek için Bu onbeş bu içeriden olanlar yaptım yaptım edilir Çocuklara Büyük konteyner kabul olmaz Bu çocuklarımızın çocukları çünkü Bu torunları Büyük konteyner vardır olurdu bu yüzden sadece bu burada bu dizi içinde erişilebilir olacak değiliz ve ben tüm bu olacak bu diğer bloklar olmak için erişim istiyorum yeniden konumlandırılmış ve disarray bakmak bana yapacağım tüm bunların tümüne erişim verir döngüsü olan Sanırım bazı değişkenler ayarlanır ne yapmak istediğinizi benim dört küçük çalıştırmadan önce Benim dört küçük ilk değişken ihtiyacımız olacak ki Eğer gerçekten bu marj alanı düşünebilirsiniz pad Ben sadece o ped adında her bloğun etrafında ancak uzay olacak Her blokta arasında aramalar değişken sütunları kısa ve bu sizin ızgara düzeni istiyorum kaç sütun var Eğer sadece bir koyun dört sütun düzeni değiştirmek istiyorsanız onların İki sütun düzeni sadece bizimki üç bırakmak koymak ve biz yeni adı verilen başka bir değişken, yeni bir top sol gerek Çünkü biz sadece bir saniye içinde burada olacak yer değil bir for döngüsü içinde yeni sol koymak için gidiyoruz, yeni bir üst değerler değerler Bütün bu küçük kutuları için ve beri konumlandırılmış konum Burada CSS mutlak olduğu üst gelir ve sol özellikler lissy kolayca etrafında hareket sağlayacak Yeni sol bakın yüzden bu yüzden her yerde biz onları istediğiniz yeni bir üst değişkenler döngü dışında kuruluyor tamam şimdi Seni yapabilirsiniz yerine döngü için pop ve bunu en iyi ben açıklamak ediyorum tüm bu değil çok soğuk olduğunu görebilirsiniz tüm sihirli olmasını sağlıyor ve temelde yapmak için kurulur döngü için bu ne erişimi ızgara kap içindeki her eleman tüm alt öğeleri ve uygun onları konumlandırmak onlar çok temelde onlardan önce gelen eleman Bu unsur burada yerleştirilmiş olacak pozisyon ve böyle giderse bu aşağı bir ve tüm şekline göre bu yüzden bu eleman da pozisyon olduğu duygusu bunu hemen yanındaki bu eleman koyabilirsiniz boyutu ve konumu bu eleman göre ve bu temel mantığı gerçekten uygulama var böylece görebilirsiniz Bu zavallı döngü uzunluğu boyunca yineleme yapmak için ayarlanmış olduğundan bloklar dizisi ve ben 21 normalde göreceğiniz bu çubuğu ayarlıyor burada yapıyorum bar Ben bir for döngüsü içinde 0 eşittir ama ben ilk eleman erişilen istemiyorum bu ilk yaptığı çocuk konumlandırılmış gerekmez üst sol konuma sahip olacak çünkü Varsayılan olarak beni en bu hale edelim demek sana göstereyim Eğer bunu yapmak zorunda değilsiniz, varsayılan olarak sol üst konuma sahiptir görebilirsiniz Pozisyon kutusu 1 ama konumlandırmak zorunda Bu döngü görmek için her şey kaçmayacak sadece on dört katıdır Ben 15 kutu olsa bile o 14 kez nedeniyle sadece olacak zamanında var Ben dizi var sıfır endeksi atlama ediyorum hangi şimdi ilk elemanı Spurs biraz sevgi mantığı döngü Heidi eğer söyleyerek yılında o birinde başlayan döngü artan barry uble ve artışlarla her zaman böylece eğer II bizim durumumuzda üç olan çağrılar bölünemeyen ve bir sonraki blok için yeni bir üst newt muhalefeti batacak ediyoruz ve sonra yeni üst konumda kendi bloğu bırakmaya gidiyoruz biz üçe bölünebilir olup olmadığını görmek için değerlendirirken neden şimdi neden bu yüzden II değişken else if yeni gül yapabilirsiniz döngü içinde üçe bölünebilir değildir Biz orada sol konumunu ve üst konumunu taşımak zorunda Bu değerlendirme sadece biz konumlandırmak çalışmıyoruz emin olmak için sırada yer alıyor üst rolü üstüne o beni ne demek sana göstereyim çünkü bizim durumumuzda kutusuna bir iki ve üç üst kardeşim vardır Bunların hiçbiri sekiz üst konumlandırılmasını ihtiyaç yaptıkları her şey ama her aşağı itti gerekmez bu yüzden bu değerlendirme üst ray değilse sadece söylemek için yerinde olduğunu o zaman biz onlara yeni bir üst pozisyon kutu verecekler ve hepimiz vermek değil Tüm bunları yeni bir sol konumunu ve bütün o senaryo Ben yeni üst olsun yol şimdi çok gerçekten orada değil ve Yeni Sol değerleri erişerek olduğunu Örneğin blok dizisi geliyor yani blok Biz döngü içinde hedef konum engelleme sorusu bloklar II olarak temsil edilmektedir şimdi alabilirsiniz bir eksen ile basit bir mesele ile bunun daha önce veya daha sonra blok şu Söz konusu bloğun önce blok Diyorum ki ben orada -1 Ben iki blok engelleme sorudan önce blok erişmek istiyorsan ben i say -2 Gördüğünüz Ben eksi söylüyorum görünmesi neden bu kadar işte 3 Ben sadece blok hedefliyor yapıyorum hepsi engelleme sorudan önce üç blok şu ve top özelliğini ofset alma merhaba o ve ben de onu alıyorum dedi yaşıyorum nerede görmek için ne kadar yüksek görmek ve set-top kullanabilirsiniz yüksek birlikte bu eklemek ofset ve ben koymak gerekir tam olarak nerede olduğunu bilmek 10 Ben sadece burada pad ekleyerek kulüpler aşağıdaki altında blok ve piksel ve bu gerçekten en karmaşık parçası Bu değerleri oluyor bunu sadece hedef çok basit görebilirsiniz ne olursa olsun blok İstediğiniz ve nasıl çalıştığını işte bir önce ve bu şimdi bu şey tamamen özelleştirilebilir kılar Bu komut özelleştirebilirsiniz çalışır şekilde özelleştirebilirsiniz günler ne zaman için tüm CSS ve kullanım bozukluğu şey Eğer hepsi olacak, farklı yüksekliklere sahip olduğunu verir var ancak sayfa gayrimenkul kullanmak bir sayfalama için onları koymak istiyorum mümkün olan en etkili yolu ve ben de tam ekran sürümü ile tedarik için gidiyorum hatırlıyorum hangi burada bu biridir dinamik vardır bu yüzden ne olursa olsun, kullanıcının penceresi onların tam olarak uygun olacak ve bu bir aynı vardır JavaScript fark JavaScript tüm var o CSS biraz çok Asya ve sen bir tekne alabilirsiniz bağlantısını tıklayarak bu örnekler Bu video açıklamasında ders kodu tamam ben seni çok sütunlu sınıflarda bina bu egzersizi memnun kaldım umarım Çekirdek JavaScript kullanarak ve yapacağımız bir sonraki egzersiz unutma gösteri Saf css3 çok sütun düzenleri bu da benzer bir etki üretilmesi ancak bir serin vardır Bir sonraki sütunlar halinde ses içeriği yayılma özelliği böylece bir bayan.

Açıklama

Ders Kodu: http://www.developphp.com/view.php?tid=1382 Çekirdek JavaScript birazcık kullanarak çok sütunlu ızgara düzenleri Öğrenmek için program. Bir çok sütun ızgara düzgünce hiçbir israf alanı ile sayfa üzerinde aşağı yığın yükseklikleri değişen kutuları için izin verir. Biri yükseklikleri değişen DIV'leri ile ilgili olduğunda elemanları yüzer tablo veya CSS kullanarak render edilemez bir etkidir.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



9.7/10

  • 155
    Olumlu
  • 4
    Olumsuz
  • 34
    Yorum
  • 14945
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • AginoEvolutionHD

    AginoEvoluti

    27 AĞUSTOS 2011
  • Peyton

    Peyton

    28 Aralık 2008
  • The Bad Tutorials

    The Bad Tuto

    6 EKİM 2009

ANKET



Bu sayfa işinize yaradı mı?