BT ifade

Sıra Mootools için birçok orada, atlı karıncalar, çeşitli ile, hala bazı iyi sebepleri, kendi Carousel Sınıf yazmaya karar verdim
1. Sayfalama özelliği (atlıkarınca belirli bir slayt / adım atlamak edebilmek için) istedim.
2. SOL ve SAĞ düğmelerini / bağlantılar yerleştirilmesi ile özgürlük, nereye giderse ben lütfen istedim.
3. Slayt adımlar üzerinde daha fazla kontrol.

Yukarıdaki özelliklere sahip, yeni bir Carousel oluşturmak için başardınız ... aşağıdaki gibi ... Eğer gerektirecektir! Herhangi bir değişikliği önermek için çekinmeyin!

Benim Örnek bu ... [benziyor Profil Demo ]

Demo bilgileri | Çağrı Sürüm 1.0 ile download Mootools Carousel (1990 kez indirildi)

1. Carousel Çağrı

Kolayca sadece true MooCarousel örneğini oluştururken geçti son parater olan sayfalama bayrağı, (istediğiniz disk belleği) veya yanlış (donot sayfalama isteyen) ayarlayarak, kendi atlıkarınca için sayfalama ekleyebilirsiniz.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns slayt sayısını, sss = slayt adım boyu

Ve tabii onların CSS değiştirerek lütfen bu sayfalama achors görünümünü-n-hissediyorum değiştirebilirsiniz.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging akımı, carousel_paging sayfa {anahat: yok; genişliği:... 15px; height: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging güncel {background: # 4D4D9B; color: # ffffff;}..

Eh! küçük bir sorun bile yoktur, sayfalama çapa seti, o zaman Carousel bileşeninin sonra her zaman oluşturulur alacak. Ben dinamik de yapmak istedim, ama sonra sadece oranlarda üfleme için Script tutmak için, onu atlamak için karar verdi.
Ama küçük bir Javascript biliyorum, kolayca ihtiyaçlarınıza lütfen MooCarousel sınıf sayfalama oluşturma kod değiştirebilir.

2. Sol ve Sağ Simgeler özelleştirme

Sadece CSS ile uğraşırken YERLEŞTİRME, IMAGES veya Sol ve Sağ Düğmeler herhangi displat özelliğini değiştirebilirsiniz. Sol ve Sağ buttoms yerleşimlerin değiştirmek edebilmek için doğru benim bizim Carousel Sınıf benim için gerçek nedeniydi.
Bu MooCarousel Sınıf, id bu düğmelerin var kabul yana, aslında eğer lütfen, sayfada herhangi bir yerde bu düğmeleri koyabilirsiniz ... o eleman hiyerarşi içinde olmak zorunda değil, benim örnekte olduğu gibi.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, gerçek);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; width: 23px; height: 20px; float: left; cursor: pointer;}

. Carousel_container_r {background-position: 0-38px;}

. Carousel_container_l {background-position: 0-58px;}

3. Slayt Adımlar özelleştirme

Ben MY ÖZELLESTIRME SLAYT ADIMLAR NEDIR?
En Karosel görünür pencere ile tam kaydırın. Bu dört öğe (yukarıda benim örnek gibi) vardı Peki diyorum, tüm dört öğe doğru kayacaktır. Bu Carousel Bileşeni ile, Sen slayt sayısını ve seçtiğiniz adım boyu geçmektedir.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, gerçek);
c_ns slayt sayısını, c_sss = slayt adım boyu

Ayrıca, benim example1 ben nerede mantığa dayalı, slayt adım boyu calcuted, ben öğelerin sayısı, her öğe üzerinde genişlik ve benim CSS her öğeden sonra verdikleri marjları biliyorum.

Carousal için 1 / * /

var c1_w = 92; / / Carousal Ürün Genişliği

var c1_n = 10; Karşılaştırılması Carousal Haber / / Total

var c1_pp Karşılaştırılması Carousal Ürünleri perpage = 4 / / Numara

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / sss = slayt adım boyu

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + .5) / / ns = sayısı slaytlar

c1_sss + = c1_marginFactor; kenar boşlukları için / / sss = slayt adım boyu, 51

Gereksinimleri: Mootools 1.2

Demo bilgileri | Çağrı Sürüm 1.0 ile download Mootools Carousel (1990 kez indirildi)

(Bunu MooTools kütüphane güç kullanır gibi tabii çapraz tarayıcı,) MooRating bir basit, hafif ve mükemmel Mootools derece çözüm dayanır. Bu derece resmin (I download ile Yıldız, Barlar ve Hearts vermiş, ancak kendi çeşitli oluşturmak ve sadece bunu bırakabilirsiniz) seçtiğiniz gibi olabilir, çünkü basitçe "Star Rating" olarak adlandırılır değildir.

Nasıl benziyor mu:

	Farklı görüntüleri ile Mootools Puanlama Demo görüntüle
	Yüzde değerleri ile Mootools Puanlama Demo görüntüle
	Kesirli değerleri ile Mootools Puanlama Demo görüntüle

İndir Mootols Yıldız Derecelendirmesi Senaryo (718 kez indirildi)

Puanlama veriler: Tüm Numarası, Ondalık veya Yüzde
Şu anda komut ondalık içinde tüm değerleri (1,2,3,4,5), (1.24, 3.45 gibi) veya yüzde olarak değerlendirmesi veri (% 12,% 55 vb) göstermek için tasarlanmıştır. Bahsedilen biçimlerinden herhangi veri göstermek için seçim javascript içindeki bazı bayrak değerleri (moorating.js) değiştirerek basitçe ayarlanabilir
Temelde seçim formatında değerleri görüntülemek için, oynamak için iki e iki bayrak vardır ...

var inpercent = false; Eğer yüzdelik değerlerin gösterilmesini gerektiriyorsa / / true, bu bayrak ayarlayın
var isFractional Eğer 1.24, 1.25, 4.56 yerine 1,2 gibi kesirli değerler ... 5 istiyorsanız = false / / true bu ayarla

Ve ben bunun için gerekli herhangi bir açıklaması yoktur sanmıyorum. Dahası. Betik çok basittir. Biraz javascripting biliyorsanız, gösterilen değerin herhangi bir tür almak için komut değiştirebilir. Görüntülenmesini üç ondalık basamak isteseydiniz örn ... gibi aşağıdaki komut tweak ...

/ / 2 değiştirilir ile 3 arasındadır; | (isFractional) {. moostartval [I] innerHTML = FormatNumber (x, 3) halinde (= 0 x <| x = 5>)} halinde
else {moostartval [i] innerHTML = Math.round (x).;

Değerlendirme Değer güncellenmesi:
Ben DAİMA bunu en kısa sürede kullanıcı oranları bir şey olarak RATING güncellemek için düşünüyorsunuz değil benim yaşadığım için biliyorum, çünkü Oyları değeri güncellemek için herhangi bir AJAX senaryo yazmaya rahatsız vermedin. Bu puan değeri ile ne istersen yapmak serbesttir, bunu AJAX kullanarak güncelleyin ya da gönderin veya gizli bir form alanı değeri ayarlayın, tüm formu vb sunulacak

fonksiyonu updateRating (id, rating) {
/ / Alert (id + "," + rating);
/ / SINIFI İLE WHATEVER DO
}

"UpdateRating" adlı javascript işlevi yoktur. Bu fonksiyon olarak tanımlamak için, Puanlama Div ID geçti edildiği derecelendirme güncellenen ve derecelendirme değeri [updateRating (id, rating)]. Edildi (sayfa üzerinde bir oy daha o varsa) I daha önce belirtildiği gibi, bu değerleri her istediğinizi seçebilirsiniz.

Değerlendirme Resim: Yıldız, Hearts, Barlar ya lütfen bir şey
Yukarıda türleri (yıldız, kupa vb) birine derece değiştirmek çok basittir. Eğer resmin adını değiştirmek CSS dosyasında gerekli değişiklikleri yapmak, yapmayı, sadece sağlanan benzer bir görüntü oluşturmak ve hatırla içeri bırakın, aşağıya bakın.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; width: 84px; height: 20px; float: left; background: url ('stars.gif') repeat-x;}
. Moostar a {float: left; margin: 0px; padding: 0px; display: block; width: 84px; height: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar Curr {background: url ('stars.gif') 25px sola;}

En çok oy widget her yıldızın üzerine olaylar üzerinde fare ile yıldız ve yarım-yıldız görüntüleri kullanın. Moo oyları çok düşük bir ek yük ile gerekli görsel efektler elde etmek için bir arka plan resmi olarak basit bir sprite görüntüyü kullanır.

Gereksinimleri: Mootools 1.2
İndir Mootols Yıldız Derecelendirmesi Senaryo (718 kez indirildi)

Ben Mootools kullanılarak çift tutturulmuş sürgü (minimum ve maksimum iki düğme ile kaydırıcı) arayan olmuştu. Rağmen, ben mootools forumda bir kaç iyi yapılmış çift tutturulmuş kaymak buldunuz, tek sorun bu sürgü kuvvetiyle seçilen aralığı göstergesi olduğunu oldu. Nihayet! Ben kendi yaratmaya karar verdi. Eh! Ben özgün kod kullanmak ve aralık aşağıda benim örnekte olduğu gibi, görsel olarak seçilen belirtilen bir kaydırıcı bir arka plan var onu değiştirmek yaptı. MAVİ alanları seçilen değerinin alanı belirtir.

Sürüm 2.2 Demo bilgileri | İndir Mootools Çift Slider Sürüm 2.2 Dilli (11717 kez indirildi)

Çok kolay gerektiği gibi slider.css değiştirerek görünümünü değiştirmek ve aralık göstergesi (yukarıdaki örnekte mavi), kaymak topuzu, kaydırma parçasının hissedebilirsiniz.

Eğer yararlı varsa bana bir yorum bırakın etmeyin.

Biz bir tablo hücresinde bazı içerik hizalayarak, bizim sayfa düzenleri oluşturmak için CSS ile uğraşmak zorunda kaldı önce, sadece çocuk oyuncağı gibiydi. Basitçe "align" veya seçtiğiniz hizalama, çocuk oyuncağı olması tablonun "valign" özelliğini ayarlayın!
Biz elemanları için özellik "vertical-align" sahip olsa css ile, bu "align" veya "valign" özellikleri gibi basit olması görünmüyor. Daha specifiic olmak "vertical-align" çapraz tarayıcı CSS parçası yazmak, özellikle de sizin sorunları çözmek için herhangi bir gibi görünüyor.

HTML Tabloları kullanımı olmadan, nesne üzerinde merkezleme ve SORUN, herhangi bir görüntü veya içeren bölümü içinde bazı metin, belki bir noktada her UI / CSS geliştiricileri kabusu olmuştur olacaktır. Bu sorun daha da ortalanmış olarak nesne doğada dinamik olursa, yüksekliği değişken olduğunda, yani uyumlaştırmak üzüntülerin extrapolates (bilinmeyen yükseklik).

Biz uğraşmak zorunda tarayıcılarının aralığında çalışacak bilinen hiçbir yalındır çözüm olsa da, ben yapar varmak için denedim çözüm (IE6, IE 7 ben bunu denedim birkaç tarayıcılarda çalışır gibi görünüyor , FF).

ÇÖZÜM:
Mozilla, Opera ve Safari gibi tarayıcılarda garip özelliği basitçe "table-cell" (display: table-cell) için içeren bölünme "ekran" özelliğini ayarlayarak, onun duyular getirilebilir "vertical-align" davranıyor .

Sorun hala, ama onlar, onlar sadece bunu görmezden gibi "table-cell" mülkiyet ve cahil ile ne anlamak için kim görünmüyor, tarayıcı IE ailesi ile kalır. Şeyler yapmak için HTML basit, reklamlar birkaç DOM öğeleri olsa da, aşağıda verilen çözüm.

CSS ve HTML bu gibi görünüyor
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> kez <br/>: 3456 </ div>
</ Div>
</ Div>

Sonuç şöyle: -

Burada demo görüntülemek | İndir Kaynak Dosyaları (452 kez indirildi)

TOP CSS Hizala
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> kez <br/>: 1234 </ div>
</ Div>
</ Div>

Sonuç şöyle: -

ALT CSS Hizala
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> kez <br/>: 1234 </ div>
</ Div>
</ Div>

Sonuç şöyle: -

Burada demo görüntülemek | buradan indirin

Bu uyum sorunu için makul bir çözüm bulmaya çalışan bu yana, yaşları gibi görünüyor. Ama şimdi bu çözüm ile, ben biraz huzur hissediyorum.

Bu gün bir umut

• CSS dikey hizalama özelliği çalının etrafında çok dövmeye sahip OLMADAN, bir tablo hücresinde yaptığı gibi çalışacak
• En azından, margin-top ayarı: otomatik ve margin-bottom: oto, margin-left ve margin-right seti auto ile aynı sonucu verecektir
• Tarayıcı savaşları bir gün bitecek.
• Orada olacak TÜM için sadece tek bir tarayıcı.

Burada yukarıdaki çözüm CSS ve HTML indirin (452 kez indirildi) .. anlaşılabilirliği için, CSS optimize edilmiş değil

PS: Bu arada, bu benim tıklandığında bazı resimlerin küçük olan ...

Sadece birkaç lightbox Kullanıcı zaman google bulabilirsiniz orada değil ki. Ben bulduğum lightbox'lar çoğu ile sorun hepsi bir veya jQuery, Prototype, Mootools ve seviyor gibi diğer ağır JAVASCRIPT çerçeveler kullanmak görünüyordu oldu. Hepsi serin ve şık görünümlü vardır. Gereksinimi olan "AMA BENİM SİTE İÇİN BASİT VE HAFİF lightbox SCRIPT İSTİYORUM" Eğer Ama, o zaman buyrun;

Bu lightbox bazı güzel özellikleri

1. Işaret fişeği
   Bir. Paketlenmiş Scripts 4kb (8 kb ambalajsız)
   b. CSS 2 kb
   c. Lightbox konteyner için HTML birkaç satır
2. Anlamak ve uygulamak kolay
3. Aynı sayfada birden çok lightbox'lar olabilir.
4. Aynı lightbox konteyner, tıklandığında link / seçeneğe bağlı olarak farklı içerikleri (ayrı sayfa gizli bölümler olarak dahil edildiği), göstermek için kullanılır.
5. Otomatik olarak dikkate gibi Pencere yüksekliği ve genişliği (ekran çözünürlüğü), sayfa kaydırma miktarı ve ışıklı içeriğinin yüksekliği gibi tüm faktörleri alarak, kendisini merkezleri
6. IE 7 ve FF test edilmiştir

Demo bilgileri |
Indirin Lightbox Kaynak Zip (1804 kez indirildi)

jo.js, jo_pack.js [packed versiyonu]: - JAVASCRIPT OBJECTS basit bir set [JO], eleman, pencere ve belge konumlandırma betikleri içerir. Eğer soyut işlevleri oluştururken bazı Gelişmiş Javascripting, ellerinizi kirli olsun isterseniz elemanı özellikleri ve bu uzanan, JO.JS açabilirsiniz. Javascripting size çok fazla değilse, yalnız bırak.

lightbox.js, lightbox_pack.js [packed versiyonu]: - ışık kutusu yöneticisi komut içerir. Eğer sayfada lightbox uygulanması ile de sorumlu sayfa tasarımcısı iseniz, LightBoxManager anlamak gerekir. LightBoxManager temelde sadece iki işlevi showLightBox ve closeLightBox içerir.

lightbox.css: - CSS biliyorsanız, göz-n-hisset lightbox.css özelleştirmek için lightbox.css oynayabilir

index.html: iki farklı içeriği ile lightbox örnek uygulama

lb_underlay_bkg.png: - [lightbox açıkken, Underlay sayfada başka herhangi bir varlık tıklayarak engeller lighbox aşağıda tabakasıdır] Bu ışıklı altlık için arka plan kullanılır simi / hafif şeffaf bir görüntüdür. Bu sayfa tasarımı ve gereksinimi bağlı olarak, bu amaç için bile herhangi bir resim veya bir renk kullanabilirsiniz.

icon_lb_close.gif: - ışık kutusunun sağ üst köşesinde yakın ışıklı kolu için görüntü. Tasarım başı olarak herhangi bir resmi kullanabilir miyim

Demo bilgileri |
Indirin Lightbox Kaynak Zip (1804 kez indirildi)

Lütfen yorum ve geribildirim atalım ...

Size ilham ya da her neyse almak için çoğu yapılan HTML sayfası CSS kontrol edin o adamlardan biri (benim gibi), varsa, o zaman biz (zaten benim daha önceki makalede bahsedilen Faux Konumlandırma kullanmış fark etmiş olabilirsiniz Biz Faux Mutlak Konumlandırma kullanarak: A Brilliant CCS Düzen )

Biz bu şablonu bazı iyi çalışmalar, bu yüzden paylaşmak güzel olurdu .... düşündüm vermedi Bu WordPress Tema (196 kez indirilmiş) indirin