Pagpapahayag ng IT

Sa isang iba't ibang mga Carousels out doon, marami para sa mga Mootools pati na rin, ako pa rin ay nagpasya na isulat ang aking sariling Carousel Class, para sa ilang mga magandang dahilan
1. Nais ng isang tampok ng paging (magagawang lumipat sa isang partikular na slide / hakbang sa carousel).
2. Nais kalayaan sa placement ng ang kaliwa at KARAPATAN mga pindutan / link, kung saan kailanman mangyaring ako.
3. Karagdagang kontrol sa Hakbang Slide.

Ako ay pamahalaan upang lumikha ng isang bagong Carousel, sa itaas na tampok ... bilang sa ibaba ... Huwag mag-atubiling upang magmungkahi ng anumang mga pagbabago na nais mong nangangailangan!!!

Ang aking Halimbawa mukhang ganito ... [ View Demo ]

Tingnan ang Demo | ng Download Mootools Carousel Sa Paging Bersyon 1.0 (Nai-download na 1994 ulit)

1. Carousel Paging

Maaari mong madaling magdagdag ng paging sa iyong carousel, lamang sa pamamagitan ng pagtatakda ng paging flag, na kung saan ay ang huling parater na lumipas habang paglikha ng ang halimbawa ng ang MooCarousel sa tunay na (gusto na paging) o maling (donot kinakapos paging).

var carousel1 = bagong MooCarousel ang (na 'carousel1_wrapper', ang 'carousel1_items_container', ang 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = bilang ng mga slide, sss = slide hakbang laki

At ofcourse mo maaaring baguhin ang hitsura-n-pakiramdam ng mga achors paging bilang ninyo sa pamamagitan ng pagbabago ng kanilang mga CSS.

. Carousel_paging {text-ihanay: karapatan; margin: 5px 10px 0 0;}
. Carousel_paging kasalukuyang, carousel_paging pahina {balangkas: none; lapad:.. 15px; taas: 15px; linya-taas: 15px; text-ihanay: center; display: block; Float: kaliwa; background: # D8D8EB; margin: 0 1px 0 0; text-dekorasyon: none;}

. Carousel_paging isang: Pasadahan, carousel_paging kasalukuyang {background: # 4D4D9B; kulay: # ffffff;}..

Na rin! may isang maliit na isyu na bagaman, Ang mga anchor ng paging kung set, pagkatapos ito ay makapag-nabuo laging pagkatapos ng Carousel bahagi. Nais kong gumawa ng mga ito dynamic pati na rin, ngunit pagkatapos ay upang panatilihin lamang ang Script para sa pamumulaklak ng mga sukat, ako nagpasya upang laktawan ang mga ito.
Ngunit alam mo ang isang maliit na Javascript, maaari mong madaling baguhin ang paging code generation sa MooCarousel klase sa mangyaring ang iyong mga pangangailangan.

2. Customising ang Kaliwa at Kanan Icon

Maaari mong baguhin ang Placement, imahe o anumang displat na ari-arian ng Kaliwa at Kanan mga Pindutan sa pamamagitan lamang ng naglalaro sa paligid sa CSS. na magagawang baguhin ang mga placement ng Kaliwa at Kanan buttoms ay ang aktwal na dahilan para sa akin sa kanan aking aming Carousel Class.
Dahil ang ng ito MooCarousel Class, tumatanggap ng id ang ng mga pindutan, maaari mo talagang ilagay ang mga pindutang ito kahit saan sa pahina, kung mangyaring ... ito ay hindi na sa hierarchy elemento, tulad ng sa aking halimbawa.

var carousel1 = bagong MooCarousel (na 'carousel1_wrapper', ang 'carousel1_items_container', ang 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; posisyon: kamag-anak; width: 23px; taas: 20px; Float: kaliwa; cursor: pointer;}

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

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

3. Customising Hakbang Slide

Ano ang ibig sabihin ko ang MY CUSTOMISING HAKBANG slide?
Karamihan Carousels slide ang buong ng nakikita window. Kaya sabihin mo ay mayroong apat na item (tulad ng sa aking sample sa itaas), ito ay slide ang lahat ng apat na mga item. Sa Carousel Component na ito, ipasa mo ang bilang ng mga slide at ang laki ng hakbang ng iyong napili.

var carousel1 = bagong MooCarousel (na 'carousel1_wrapper', ang 'carousel1_items_container', ang 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = bilang ng mga slide, c_sss = slide hakbang laki

Gayundin, sa aking example1 ko calcuted ang laki ng hakbang ng slide, na batay sa lohika kung saan, alam ko ang bilang ng mga item, lapad sa bawat item at ang mga margin na ibinigay pagkatapos ng bawat item sa aking CSS.

/ * Para sa lasingan 1 * /

var c1_w = 92; / / lasingan Item Lapad

var c1_n = 10; / / Kabuuang Bilang ng Item Comparision lasingan

ang var c1_pp = 4 / / Bilang ng mga Comparision Item perpage lasingan

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / sss = slide hakbang laki

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + .5); / / ns = bilang ng mga slide

c1_sss + = c1_marginFactor ang; / / sss = slide hakbang laki, 51 para sa mga margin

Pangangailangan: Mootools 1.2

Tingnan ang Demo | ng Download Mootools Carousel Sa Paging Bersyon 1.0 (Nai-download na 1994 ulit)

MooRating ay isang simpleng (kalyeng browser, siyempre bilang ito ay gumagamit ng kapangyarihan ng library MooTools), magaan at mahusay Mootools batay rating solusyon. Hindi ito ay termed bilang "Star Rating", lamang dahil, ang imahe ng rating ay maaaring maging bilang na pinili mo (ibinigay ko ang mga bituin, Bar at puso sa pag-download, ngunit maaari kang lumikha ng iyong sariling mga iba't-ibang at lamang drop ito sa).

Paano ito ganito ang hitsura:

	Mootools Rating na may ibang mga imahe Tingnan ang Demo
	Mootools Rating na may halaga Porsiyento Tingnan ang Demo
	Mootools Rating na may fractional halaga Tingnan ang Demo

I-download ang Mootols Star Rating Script (Nai-download na 718 beses)

Rating data: Buong Number, sa Decimal o Porsiyento
Kasalukuyang script ay dinisenyo upang ipakita ang data rating ng buong halaga (1,2,3,4,5), sa mga desimal (1.24, 3.45 etc) o sa porsyento (12%, 55% etc). Ang pagpili sa ipakita ang data sa anumang ng mga nabanggit format ay maaaring itakda lamang sa pamamagitan ng pagbabago ng bandila ilang mga halaga sa loob ng javascript (moorating.js)
Talaga may mga dalawang e dalawang flag upang i-play sa, para sa pagpapakita ng mga halaga sa format na iyong pinili ...

var inpercent = false; / / Itakda ang bandila na ito sa tunay, kung kailangan mo ng porsyento halaga na ipapakita
var isFractional = maling / / Itakda ito sa tunay, kung gusto mong mga fractional halaga tulad ng 1.24, 1.25, 4.56 kaysa sa 1,2 ... 5

At wala ako sa tingin may anumang paliwanag na kinakailangan para sa. Bukod pa rito. Ang script ay napaka-simple. Kung alam mo ng kaunti javascripting, maaari mong baguhin ang script upang makakuha ng anumang uri ng halaga ipinapakita. Para sa halimbawa kung nais mo ang tatlong mga lugar ng decimal na ipapakita ... sabunot lang ang script sa ibaba ...

kung (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3);} / / 2 ay nagbago sa 3
iba {moostartval [i] innerHTML = Math.round (x);

Ina-update ang Marka Halaga:
Na havent ako bothered pagsulat anumang mga script ng AJAX para sa pag-update ng mga Ratings ng halaga, dahil alam ko mula sa aking karanasan na hindi laging balak ko ito i-update ang RATING sa lalong madaling bagay rate gumagamit. Ikaw ay libre upang gawin ang anumang nais mo sa rate halaga, I-update ito gamit ang AJAX o Isumite ito o Itakda ang isang nakatagong form na halaga ng patlang, na isinumite kasama ang buong form atbp

function na updateRating (id, rating) {
/ / Alerto (id + "," + rating);
/ / MERON Anuman MAY ANG RATING
}

May ay pagpapaandar sa javascript na tinatawag na "updateRating". Ang function na ito ay nakapasa sa ID ng div Rating, upang makilala bilang sa kung aling mga rating (kung may higit na isang rating sa pahina) ay na-update at ang halaga ng rating [updateRating (id, rating)]. Maaari kang pumili sa kahit anong gusto mo sa mga halagang ito, bilang ko nabanggit mas maaga.

Imahe ng Rating: Bituin, puso, Bar o anumang bagay mangyaring mo
Ang pagbabago ng rating sa anumang ng sa itaas na uri (mga bituin, puso atbp) ay napaka-simple. Lumikha lamang ng isang imahe na katulad sa ang isa na ibinigay at drop ito in Tandaan, kung mong baguhin ang pangalan ng imahe, huwag gumawa ng mga kinakailangang mga pagbabago sa ang CSS file, tingnan sa ibaba.

. Moostar {margin: 0px; padding: 0px; overflow: nakatagong; width: 84px; taas: 20px; Float: kaliwa; background: url ('stars.gif') repeat-x;}
. Moostar span {Float: kaliwa; margin: 0px; padding: 0px; display: block; width: 84px; taas: 20px; text-dekorasyon: none; text-indent:-9000px; z-index: 20;}
.. Moostar na curr {background: url ('stars.gif') pakaliwa 25px;}

Karamihan rating widget ay gumagamit ng mga bituin at ang kalahati-star na mga imahe na may mouse sa mga kaganapan sa bawat bituin. Moo Ratings ay gumagamit ng isang simpleng engkanto imahe bilang isang imahe sa background upang makamit ang mga kinakailangang visual na mga epekto sa isang napakababang overhead.

Pangangailangan: Mootools 1.2
I-download ang Mootols Star Rating Script (Nai-download na 718 beses)

Ako ay naghahanap para sa isang double pinned slider (slider sa dalawang knobs, minimum at maximum) gamit ang mootools. Kahit na, ko mahanap ang ilang mga magaling na double pinned slider sa forum mootools, Ang tanging problema ay na ang lahat mga sliders yupi na ang mga napiling hanay ng marker. Sa wakas! Ko nagpasya upang lumikha ng aking sariling. Na rin! Ko gamitin ang orihinal na code at baguhin ito sa isang slider background na sinabi hanay ng mga napiling mga paningin, tulad ng sa aking halimbawa sa ibaba. Ang bughaw na lugar ay nagpapahiwatig sa hanay ng halaga na pinili.

Tingnan ang Bersyon 2.2 Demo | Download Mootools Double Pinned Slider Bersyon 2.2 (Nai-download na 11,800 ulit)

Maaari mong masyadong madaling baguhin ang hitsura at pakiramdam ng hanay na tagapagpahiwatig (sa asul sa halimbawa sa itaas), hawakan ng pinto ng slider, ang slider track sa pamamagitan ng pagbabago ng slider.css bilang kinakailangan.

Drop ako ng isang komento kung nakita mo ito kapaki-pakinabang.

Kung hindi ka ng isa sa mga guys (tulad ng sa akin), na madalas na suriin ang CSS ng mahusay na ginawa ng HTML na pahina, upang inspirasyon o anuman, pagkatapos ay maaari mong napansin na namin ginagamit FAUX Positioning (bilang na nabanggit sa aking naunang artikulo ay namin gamit Faux Ganap Positioning: A Brilliant CCS Layout )

Namin ang ilang mga magandang gawain sa ang template na ito, kaya naisip ito Nice upang ibahagi ang mga ito .... I-download ito WordPress Tema (download 196 ulit)