Kitelezi kimeundwa kuingiza nambari masafa maalum, lakini tofauti na shamba ina kiolesura tofauti na hutumiwa katika hali ambapo si muhimu sana kuonyesha thamani halisi. Katika Mtini. 1 inaonyesha mwonekano wa kitelezi katika vivinjari tofauti.
Mchele. 1. Mwonekano wa kitelezi kwenye vivinjari
Syntax ya kuunda kitelezi ni kama ifuatavyo.
Hapa min ni nambari ya chini kabisa katika safu (chaguo-msingi 0), max ni nambari ya juu zaidi (chaguo-msingi 100), hatua ni hatua ya kubadilisha nambari (chaguo-msingi 1), thamani ni thamani ya sasa. Kwa msingi, thamani huhesabiwa kwa kutumia fomula:
Kama thamani ya juu chini ya thamani ya chini, basi thamani ni sawa na min .
Sifa ni za hiari, zinaweza kuachwa, katika hali ambayo zinachukua maadili chaguo-msingi.
Bila kujali kiwango cha chini na idadi ya juu Upana wa slider unabaki sawa.
Sliders wenyewe hutumiwa mara chache katika fomu yao "safi", kwani haitoi muhimu maoni na mtumiaji, lakini pamoja na JavaScript inakuwa kiolesura chenye nguvu na rahisi. Katika mfano 1, kitelezi hutumika kubadilisha saizi ya picha; kipengele hiki mara nyingi hutumika katika maghala mbalimbali ya picha.
Mfano 1: Kutumia kitelezi
HTML5 IE 10 Cr Op Sa Fx
Saizi ya chaguo la kukokotoa kiteleziPic() ( size = document.getElementById("size").value; img = document.getElementById("pic"); img.width = 60 + 20*size; )
Ukubwa wa muundo:
KATIKA katika mfano huu Wakati kitelezi kinadhibitiwa, tukio la pembejeo linafukuzwa, ambalo huita kazi ya sizePic. Chaguo hili la kukokotoa hurekebisha ukubwa wa picha kulingana na mtumiaji imewekwa maadili ya kitelezi. Kwa hivyo, upana wa picha, ikiwa unataka, hupungua au, kinyume chake, huongezeka. Matokeo ya mfano kwa thamani kubwa ya kitelezi ndani Kivinjari cha Chrome inavyoonyeshwa kwenye Mtini. 2.
Mchele. 2. Dhibiti upana wa picha kwa kutumia kitelezi
Matoleo ya zamani ya vivinjari ambayo hayatumii anuwai ya aina ya sifa, onyesha uga wa fomu kama sehemu ya maandishi.
Wakati wa kuunda duka, mara nyingi unapaswa kukabiliana na kazi ya kutekeleza chaguo zinazofaa kwa mtumiaji. bei mbalimbali. Inaweza kuonekana kama hii, kwa mfano:
Wazo, natumai, liko wazi. Tunaburuta vitelezi, maadili ya uwanja hubadilika kwa usawa. Hebu jaribu kutekeleza hili.
KaziTafuta suluhisho la kivinjari katika js kwa kiolesura cha uteuzi wa masafa. Mahitaji:
- pembejeo na sliders zimeunganishwa (mabadiliko ya thamani ya moja yanaonyeshwa mara moja kwa wengine);
- kubadilika kwa mtindo (kila kitu kinapaswa kuonekana kama muundo).
Tutatumia jQuery programu-jalizi Kitelezi cha UI. Kwa yenyewe, inajenga tu slider, lakini kuunganisha na pembejeo si vigumu.
Ilijaribiwa katika:
- IE 6-8
- Firefox 4
- Opera 11
- Safari
- Chrome
Kwa hiyo, kwanza hebu tufikirie kwamba hakuna pembejeo, na hebu tuone jinsi Plugin yenyewe inavyofanya kazi.
Nini cha kupakua?- (Kb 24.33) Kiini cha UI + kitelezi chenyewe.
Kuunganisha maktaba:
Tunaanzisha kitelezi na hati:
jQuery("#slider").slider(( min: 0, max: 1000, values: , range: true ));
Na sasa kwa undani zaidiProgramu-jalizi ni rahisi kubadilika. Inakuruhusu kuunda nyimbo za wima au za mlalo ambazo slaidi moja au mbili zinaweza kusogezwa. Chaguo na slider mbili ni bora kwa kazi yetu - kuchagua aina mbalimbali.
Unaposonga kitelezi au kuisimamisha, unaweza kufanya kazi fulani, shukrani ambayo kitelezi kinaweza kutumika kama kipengee cha kudhibiti (badilisha maadili ya pembejeo, chagua, au, kwa mfano, badilisha tabo - kuna vile mfano wa demo kwenye tovuti rasmi ya programu-jalizi).
MipangilioWakati wa kuanzisha programu-jalizi, unaweza kuweka vigezo vyake:
| Huzima (kweli) au kuwezesha (sivyo) kitelezi. | boolean | uongo |
| Huamua kama kitelezi kitasogea hadi mahali vizuri mtumiaji anapobofya sehemu fulani kwenye ukanda. Inaweza pia kuchukua mfuatano wa thamani unaowakilisha moja ya kasi tatu za kuchagua kutoka ("polepole", "kawaida", au "haraka") au idadi ya milisekunde inayofafanua muda wa uhuishaji (kwa mfano, 1000). | boolean, kamba, int | uongo |
| Thamani ya juu zaidi ya kitelezi. | Nambari | 100 |
| Thamani ya chini ya kitelezi. | Nambari | 0 |
| Huamua mwelekeo wa mizani: kushoto kwenda kulia au chini kwenda juu. Thamani zinazowezekana: "usawa", "wima". | Kamba | mlalo |
| Ikiwekwa kuwa ndivyo, kitelezi kitakuwa na vitelezi viwili na safu kati ya hizo zinazoweza kuwekewa mtindo. Thamani zingine mbili ni "min" na "max". Thamani ya "min" huunda masafa kutoka kwa kiwango cha chini kabisa cha kipimo hadi kitelezi. Thamani "upeo" huunda masafa kutoka kwa kitelezi hadi upeo wa kipimo. | boolean, kamba | uongo |
| Inafafanua hatua ya kitelezi. Masafa kamili Mizani (max - min) inapaswa kugawanywa sawasawa na hatua. | Nambari | 1 |
| Huamua thamani ya kitelezi ikiwa kuna kitelezi kimoja tu. Ikiwa kuna zaidi ya kitelezi kimoja, huamua thamani ya kitelezi cha kwanza. | Nambari | 0 |
| Chaguo hili linaweza kutumika kutaja vitelezi vingi. Ikiwa masafa ni kweli, kunapaswa kuwa na thamani 2 za "thamani". | Safu | null |
Matukio ni chaguo za kukokotoa ambazo zitatekelezwa muda fulani maisha ya slider. Unaweza kuziweka wakati wa uanzishaji. Kwa mfano:
JQuery("#slider").slider(( stop: function(tukio, ui) ( tahadhari("Kitelezi kimehamia kwenye nafasi mpya!"); ) ));
Orodha ya matukio:
| Tukio hutokea wakati slider imeundwa |
| Tukio hutokea wakati mtumiaji anaanza kusonga kitelezi. |
| Tukio hutokea wakati wowote kipanya kinaposogezwa wakati wa kusogeza. Tumia ui.value (vitelezi vya kitelezi kimoja) kupata thamani ya sasa ya kitelezi, $(..) slider("thamani", index) ili kupata thamani ya kitelezi kwa vitelezi vingi. |
| Tukio hutokea wakati kusogeza kunaposimama au thamani ikibadilika kwa utaratibu(kupitia njia ya thamani). Huchukua matukio na hoja za ui. Tumia event.orginalEvent kubainisha kama thamani ilibadilishwa na kipanya, kibodi, au kwa utaratibu. Tumia ui.value (vitelezi vya kitelezi kimoja) kupata thamani ya sasa ya kitelezi, $(this).slider("maadili", faharasa) ili kupata thamani ya kitelezi kwa vitelezi vingi. |
| Tukio hutokea wakati mtumiaji amemaliza kusonga kitelezi. |
Kuita kazi hizi inakuwezesha kushawishi uendeshaji wa slider kwa kubadilisha vigezo vyake juu ya kuruka. Hii inafanywa kwa kutumia .slider() construct, kwa mfano kama hii:
JQuery("#slider").kitelezi("maadili",0, 100);
Orodha ya mbinu:
| Huondoa utendakazi wa kitelezi, na kurudisha kipengele katika hali yake ya asili. |
| Huzima kitelezi. |
| Inajumuisha kitelezi. |
| Inapata au kuweka chaguo lolote la kitelezi. Ikiwa hakuna thamani iliyobainishwa, itafanya kama mpokeaji. Sintaksia: .slider("chaguo", chaguoJina , ) |
| Huweka chaguo nyingi za kitelezi mara moja kwa kutoa chaguo za kitu. Sintaksia: .slider("chaguo", chaguzi) |
| Hurejesha kipengele cha .ui-slider. |
| Huweka au kurejesha thamani ya kitelezi. Kwa slaidi zilizo na kitelezi kimoja. |
| Huweka au kurejesha thamani ya kitelezi. Kwa vitelezi vilivyo na vitelezi vingi au vilivyo na masafa. |
Kweli stylization vipengele vya jQuery UI (moja ambayo ni kitelezi hiki) hutokea kwa kuchagua mandhari unayopenda na kupakua CSS iliyotengenezwa tayari kutoka kwa tovuti rasmi. Binafsi, sifurahishwi hata kidogo na mbinu hii. Kwa hivyo nilichagua kutoka kwao (haifai sana ikiwa unatumia kitelezi tu) CSS pekee kanuni inayohitajika, ambayo ninawasilisha hapa na maoni.
/* Upana wa kitelezi */ #kitelezi ( upana: 200px; ) /* Chombo cha kutelezesha */ .ui-slider ( nafasi: jamaa; ) /* Kitelezi */ .ui-slider .ui-slider-handle ( nafasi: kabisa; z-index: 2; upana: 13px; /* Weka upana unaotaka */ urefu: 13px; /* na urefu */ usuli: url(../img/slider.png) hakuna kurudia; /* picha inayoonyesha kitelezi. Au unaweza kuijaza kwa rangi, weka mpaka na minofu */ cursor: pointer ) .ui-slider .ui-slider-range ( nafasi: kabisa; z-index: 1; ukubwa wa fonti: .7em; onyesha */ ) /* weka vitelezi */ .ui-slider -mlalo .ui-slider-nchi ( juu: -5px; ukingo-kushoto: -6px; ) .ui-slider-mlalo .ui-slider-range ( juu: 0 ; urefu: 100%; ) .ui-slider- mlalo .ui-slider-range-min ( kushoto: 0; ) .ui-slider-horizontal .ui-slider-range-max ( kulia: 0; ) /* muundo ya ukanda ambao kitelezi husogea */ .ui-widget- maudhui ( mpaka: 1px imara #D4D4D4; mandharinyuma: #fff; ) /* muundo wa eneo amilifu (kati ya vitelezi viwili) */ .ui-widget-header ( mpaka: 1px imara #D4D4D4; usuli: #f00; ) /* kuzungusha kwa upau wa kitelezi */ .ui-kona-all ( -moz -radius-mpaka: 4px; -eneo-ya-mpaka-webkit: 4px; radius ya mpaka: 4px;)
Baadhi ya sheria hizi zinaweza kuunganishwa, kwani programu-jalizi huzawadi kwa ukarimu vipengele vilivyo na madarasa mengi. Kwa mfano, asili yangu
inageuka kuwa
Lakini nilipendelea kuacha mitindo kwani ni ya matumizi mengi zaidi. Nadhani yeyote anayepaswa kutengeneza kitelezi wima kwa kutumia kiolezo hiki atanishukuru.
Kuongeza pembejeo zinazohusianaSasa inakuja sehemu ya kufurahisha. Wacha tuongeze pembejeo mbili ambazo tutaonyesha maadili yaliyochaguliwa kwenye kitelezi.
Wakati wa kuanzisha slider, tunatumia matukio ya kuacha na slide - ya kwanza itatoa thamani sahihi wakati slider itaacha, na ya pili itaongeza mwingiliano (thamani ya pembejeo itabadilika kwa wakati halisi, kwa usawa na harakati ya slider).
Msimbo wa matukio yote mawili ni sawa - tunachukua thamani ya sasa kwa kutumia mbinu ya .slider("values",X) na kuiweka kwenye ingizo unalotaka:
JQuery("#slider").slider(( min: 0, max: 1000, values: , range: true, stop: function(tukio, ui) ( jQuery("input#minCost").val(jQuery("# slider").slider("maadili",0)); jQuery("input#maxCost").val(jQuery("#slider").slider("values",1)); ), slaidi: function(tukio , ui)( jQuery("input#minCost").val(jQuery("#slider").slider("values",0)); jQuery("input#maxCost").val(jQuery("#slider" ).kitelezi("maadili",1)); ) ));
Kilichobaki ni kuandaa maoni. Tunafundisha kitelezi kusonga ikiwa mtumiaji ataweka thamani katika ingizo. Hapa tunaweza kutumia tukio la kubonyeza vitufe ili kitelezi kijibu kwa kila kitufe kilichobonyezwa au tukio la mabadiliko ikiwa tunataka mabadiliko yatekeleze baada ya kukamilisha ingizo na kuondoka kwa uga. Suala la ladha.
Wakati huo huo, niliingiza hundi kwamba thamani ya juu iko nje ya masafa (kwangu mimi ni 1000) na angalia kwamba kitelezi cha chini hakipokei thamani kubwa kuliko ile ya juu:
JQuery("pembejeo#minCost").badilisha(kazi())( var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); ikiwa( parseInt (thamani1) > parseInt(value2))( value1 = value2; jQuery("input#minCost").val(value1); ) jQuery("#slider").slider("value",0,value1); ) ); jQuery("pembejeo#maxCost").badilisha(kazi())( var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); ikiwa ( value2 > 1000) ( value2 = 1000; jQuery("input#maxCost").val(1000)) if(parseInt(value1) > parseInt(value2))( value2 = value1; jQuery("input#maxCost").val. ( value2); ) jQuery("#slider").slider("maadili",1,thamani2); ));
Maelezo ya mwisho ni kuhakikisha kuwa mtumiaji hawezi kuvunja programu-jalizi kwa kuingiza herufi au zisizo sahihi kwenye ingizo maadili ya nambari. Sitazingatia hatua hii kwa undani, kwani haihusiani moja kwa moja na mada ya kifungu hicho. Ninarejelea wadadisi ambapo hii, bila shaka, inatekelezwa.
Katika moja ya machapisho yafuatayo tutafanya kazi ngumu. Nitaonyesha jinsi, kwa kuzingatia suluhisho hili, unaweza kufanya uteuzi wa thamani na hatua isiyo sawa na mizani tofauti. Hiyo ni, wakati inahitajika kwamba, kwa mfano, nusu ya kwanza ya slider ina anuwai ya maadili kutoka 0 hadi 100, na ya pili kutoka 100 hadi 1000.
Chaguzi kama hizo mara nyingi hupatikana katika duka za mkondoni - hii ni rahisi, kwa sababu kwa kiasi kidogo, ubinafsishaji ni muhimu zaidi, na urahisi wa mtumiaji, kama unavyojua, huja kwanza.
Kitelezi kimeundwa kuingiza nambari katika safu maalum, lakini tofauti na uwanja, ina kiolesura tofauti na hutumiwa katika hali ambazo sio muhimu sana kuonyesha thamani halisi. Vivinjari vinaonyesha mwonekano wa kitelezi kwa njia yao wenyewe, kama kwenye Mtini. Mchoro wa 1 unaonyesha mwonekano wa kitelezi kwenye Chrome.
Mchele. 1. Mtazamo wa kitelezi
Syntax ya kuunda kitelezi ni kama ifuatavyo.
Hapa min ni nambari ya chini kabisa katika safu (chaguo-msingi 0), max ni nambari ya juu zaidi (chaguo-msingi 100), hatua ni hatua ya kubadilisha nambari (chaguo-msingi 1), thamani ni thamani ya sasa. Kwa msingi, thamani huhesabiwa kwa kutumia fomula:
Ikiwa thamani ya max ni chini ya thamani ya min , basi thamani ni sawa na min .
Sifa ni za hiari, zinaweza kuachwa, katika hali ambayo zinachukua maadili chaguo-msingi. Bila kujali idadi ya chini na ya juu, upana wa slider unabaki sawa.
Slaidi zenyewe hazitumiwi sana katika fomu yao "safi", kwani haitoi maoni muhimu kwa mtumiaji, lakini pamoja na JavaScript huwa kipengee chenye nguvu na rahisi cha kiolesura. Katika mfano 1, kitelezi hutumika kubadilisha saizi ya picha; kipengele hiki mara nyingi hutumika katika maghala mbalimbali ya picha.
Mfano 1: Kutumia kitelezi
Saizi ya chaguo la kukokotoa kiteleziPic() ( size = document.getElementById("size").value; img = document.getElementById("pic"); img.width = 60 + 20*size; )
Ukubwa wa muundo:
Katika mfano huu, wakati kitelezi kinadhibitiwa, tukio la onchange limefukuzwa, ambalo huita kazi ya sizePic. Chaguo hili la kukokotoa hurekebisha ukubwa wa picha kulingana na thamani ya kitelezi iliyowekwa na mtumiaji. Kwa hivyo, upana wa picha, ikiwa unataka, hupungua au, kinyume chake, huongezeka. Matokeo ya mfano katika kivinjari cha IE yanaonyeshwa kwenye Mtini. 2.
Kwa sasa ninafanyia kazi mradi wangu wa kwanza unaolipwa. Miongoni mwa mambo mengine, mradi huu unanihitaji kutengeneza na kuandika hati za vitelezi. Kuna wachache wakati wa kuvutia ambayo ningependa kukujulisha, kama vile masuala ya kuonyesha katika IE, Android WebKit na matumizi sahihi pembejeo na kubadilisha matukio. Na mapitio mafupi sintaksia.
Huu hapa ni mfano wangu. Katika kesi hii, watumiaji kutoka Uholanzi wanaombwa kugawanya euro milioni 100 kwa kutumia vitelezi fedha za bajeti kati ya idara kadhaa. Katika kesi hii, thamani ya jumla ya sliders zote haipaswi kuzidi 100 (mamilioni), ambayo inahitaji kuandika script ndogo.
Kitelezi, fuatilia na kiteleziHapa kuna kitelezi. Kitaalam inajulikana kama, na haihimiliwi na IE9 na chini.
Hapa kuna nambari ya HTML:
Kitelezi kinajumuisha njia ambayo mtumiaji huburuta kitelezi. Unaweza kutumia mitindo kwenye wimbo na kitelezi, lakini sio hati.
Misingi ya MtindoKuweka slaidi za mtindo sio ngumu sana. Kitelezi na wimbo unaweza kuwekewa mtindo, ingawa vipengele vya uwongo vinavyohitajika hutofautiana kulingana na kivinjari:
Kwa kitelezi tumia -webkit-slider-thumb , -moz-range-thumb au -ms-thumb .
Wimbo unaweza "kufikiwa" kwa kutumia -webkit-slider-runnable-track , -moz-range-track au -ms-track .
Huwezi kuchanganya viteuzi hivi katika sheria moja, ingawa ni sahihi zaidi kutumia mitindo sawa kwa vivinjari vyote (isipokuwa ujongezaji wa kitelezi). Ikiwa kivinjari kinapata kichaguzi kimoja ambacho hakitambui, kinapuuza wengine wote. Kwa hivyo utalazimika kurudia au kutumia jenereta ya CSS kwenye upande wa seva.
IE na MS Edge zinahitaji rangi ya uwazi na rangi ya mpaka kwenye wimbo, au zitaonyesha mitindo chaguomsingi ya wimbo. Pia zinahitaji pedi tofauti kwa kitelezi kuliko vivinjari vingine.
Katika mfano wangu, urefu wa kitelezi ni takriban saizi 40. Inabadilika kuwa mitindo kuu ya slider ina kufurika: seti ya mali iliyofichwa, ambayo inaficha slider nyingi kwenye Edge na IE. Ili kurekebisha hii, ilinibidi kuweka wazi urefu wa kitelezi.
Katika IE, lakini si Edge, slider ni indented. Kwa hivyo weka pedi: 0 na ujiokoe maumivu ya kichwa.
Nimesoma mara kadhaa kwamba MS Edge inapaswa kusaidia -webkit- mali. Lakini katika mazoezi iligeuka kuwa haiwezekani kufanya kazi na seti moja ya mitindo kwa Edge na WebKit / Blink. Ninapendekeza kutumia -ms- mitindo tofauti, ikiwa ni kwa sababu tu inahitajika kwa IE10 na IE11. Ni bora kufafanua -ms- mitindo baada ya -webkit- : kwa njia hiyo -ms- mitindo itatekelezwa haswa kwenye Edge.
Katika vivinjari vilivyojengwa kwenye injini za WebKit na Blink, kitelezi hubadilika chaguomsingi kwa ukubwa wa kisanduku: kisanduku cha mpaka , wakati katika vivinjari vingine vyote, thamani ya kipengele hiki ni kisanduku cha maudhui. Ni bora kuweka ukubwa wa kisanduku kwa kitelezi kwa uwazi.
WebKit na Blink pia zinahitaji -webkit-appearance: none , lakini isipokuwa moja. Tazama hapa chini.
Kiolezo cha CSSMasuala haya yote madogo husababisha kiolezo kifuatacho cha CSS:
pembejeo ( -webkit-muonekano: hakuna; urefu: 35px; /* weka urefu wako */ padding: 0; /* mitindo kitelezi chako */ ) ingizo::-webkit-slider-thumb ( -webkit-muonekano: hakuna; sanduku -sizing: kisanduku cha yaliyomo; /* hutengeneza kitelezi chako */ ) ingizo::-moz-range-thumb ( /* hutengeneza kitelezi chako tena */ ) pembejeo::-ms-thumb ( /* inapaswa kuja baada ya -webkit- */ /* hutengeneza kitelezi chako tena */ /* huenda ikahitaji pembejeo tofauti */ )::-webkit-slider-runnable-track ( /* mitindo ya wimbo wako */ ) ingizo::-moz-range-track ( / * hutengeneza wimbo wako tena */ ) ingizo::-ms-track ( /* inapaswa kuja baada ya -webkit- */ border-color: transparent; color: transparent; /* mitindo ya wimbo wako tena */ )
kuonekana mali na Hitilafu ya Android WebKitKikwazo kingine katika vivinjari vya WebKit na Blink ni kwamba lazima uweke -webkit-appearance: hakuna mali kwenye kitelezi na kitelezi (lakini sio wimbo). Hii imeonyeshwa kwenye kiolezo cha CSS hapo juu.
Shida halisi ni kwamba Android WebKit inakuhitaji usitumie tamko hili. Ukiongeza -webkit-appearance: none , Android WebKit haitatoa mitindo yako ipasavyo. Kuondoa msimbo huu hurekebisha hitilafu, lakini mitindo ya kitelezi haitafanya kazi katika Safari, Chrome, na vivinjari vingine. Hebu tutatue tatizo hili pamoja.
Tunaweka -webkit-appearance: hakuna katika CSS, hili ndilo suluhisho pekee ambalo lina siku zijazo. Katika Android WebKit tunataka kubadilisha thamani kuwa slider-mlalo. Lakini tunajuaje kuwa tuko kwenye Android WebKit?
Utambuzi wa kivinjari? Hii sio kawaida katika miduara yetu - ambayo ni bora zaidi: haitafanya kazi katika Xiaomi Chromium 34 (au 35), ambayo inategemea Chromium na kwa hivyo inahitaji. thamani hakuna, lakini wakati huo huo "hujifanya" kama Android.
Mpango wangu wa awali ulikuwa kufikia mitindo ya kitelezi na kuona ikiwa inalingana na yangu. Ikiwa hazifai, basi tunatumia slider-horizontal :
window.getComputedStyle(kitelezi,"::-webkit-slider-thumb").urefu;
Inabadilika kuwa mbinu hii daima hutoa mitindo chaguo-msingi, sio CSS yako. Akizungumza katika muhtasari wa jumla, hati zinazojaribu kufanya kitu kwa wimbo au kitelezi huwa hazifanyi kazi.
Kisha nikaona kuwa matumizi haya ya getComputedStyle() hayatumiki kwenye Android WebKit. Hakuna mitindo inayorejeshwa, hata mitindo chaguomsingi.
Kwa hivyo niliandika hila ya kawaida ambayo hutumia mdudu mmoja kuondoa mwingine asiyehusiana. Kwa bahati nzuri hii mapokezi salama, kwa kuwa hitilafu zote mbili zinaweza tu kuonekana kwenye Android WebKit, na kivinjari hiki hakijatengenezwa tena:
var testAndWK = window.getComputedStyle(kitelezi,"::-webkit-slider-thumb").urefu; ikiwa (!testAndWK) ( slider.style.WebkitAppearance = "slider-horizontal"; )
Unaweza kuendesha jaribio mara moja na utumie matokeo kwa kila kitelezi. Haijalishi ni ipi Mali ya CSS ukijaribu, angalia ikiwa kweli ipo. Ikiwa hakuna thamani iliyorejeshwa, basi weka -webkit-appearance: slider-horizontal kwa kila kitelezi. Tatizo limetatuliwa. Bora zaidi, vivinjari vingine vinatupuuza tunapotumia -webkit- .
Kujaza upau wa maendeleoKatika mfano wangu, wimbo wa kushoto wa kitelezi unapaswa kuwa na rangi tofauti ya usuli kuliko wimbo wa kulia. IE/Edge na Firefox zinapendekeza kutumia pseudo-elements kwa hili, WebKit na Blink hazifanyi. Nambari hii inasuluhisha shida katika matoleo yote ya IE, Firefox na Edge:
pembejeo::-ms-fill-chini ( background-color: #5082e0; ) ingizo::-moz-range-progress ( background-color: #5082e0; )
Kama kwa vivinjari kulingana na WebKit na Blink, suluhisho na JavaScript inahitajika. Nilikopa yangu kutoka kwa mifano ya Ana Tudor. Suluhisho hili linatumia gradient ya mstari na rangi ya kusimama iliyohesabiwa kutoka thamani ya sasa ya kitelezi. Angalia hati, haswa msimbo wa kazi ya handleSlider().
Vidokezo vya zanaAna Tudor pia alionyesha jinsi kipengele cha :before pseudo-kinavyoweza kutumika kama kidokezo cha mtindo kilicho na thamani ya sasa. Kwa bahati mbaya, zinageuka kuwa IE/Edge na Firefox haziauni :before au :after katika kesi hii. IE/Edge ina zana iliyojengewa ndani (tazama hapa chini), lakini Firefox haiwezi kuonyesha vidokezo vya zana.
Nilijaribu kipengele cha kusonga ambacho humenyuka kwa harakati ya slider, lakini kuandika maandiko haifanyi kazi na haiwezekani kupata kuratibu za sasa za slider. Nilijaribu pia kutumia thamani ya sasa ya kitelezi badala ya kuratibu, lakini jaribio lilishindwa. Hatimaye, tuliamua kutumia kidokezo tuli (ambacho kwa kweli hakionekani kama kidokezo).
IE/Edge ina zana iliyojengewa ndani ambayo kwa sehemu kubwa haiwezi kuwekewa mtindo. Kwa bahati nzuri, unaweza kuificha:
pembejeo::-ms-tooltip ( display: none; )
Ingiza na ubadilishe matukioMtumiaji anaposogeza kitelezi kando ya wimbo, kitelezi kinaweza kuanzisha ingizo au kubadilisha matukio. Vivinjari vingine vinaendelea "kutoa" matukio wakati wa kusonga, wengine tu baada ya harakati kusimamishwa.
Unapofuatilia vitendo vya mtumiaji kwa kutumia kitelezi, zuia ingizo na ubadilishe matukio. Kisha piga simu kidhibiti tukio wakati mtumiaji anaacha kusonga kitelezi. Hii inatoa matokeo thabiti katika vivinjari vyote.
Na matokeo ya kutumia kitelezi kwenye nambari:
Sifa zifuatazo zimeanzishwa ili kufanya kazi na kitelezi:
- upeo - thamani ya juu kipengele (inalingana na msimamo uliokithiri wa kulia wa kitelezi). Nambari.
- dakika - thamani ya chini kipengele (inalingana na nafasi ya kushoto ya slider). Nambari.
- hatua - hatua ya kitelezi. Nambari.
Mfano wa kutumia sifa umewasilishwa hapa chini.
|
Zaidi ya hayo, kama ilivyo kwa yoyote Vipengele vya HTML unaweza kutumia mtindo wa CSS kwa ingizo type="ange".
Jinsi ya kufanya kazi na kitelezi katika JSKwa kuwa kitelezi ni kipengele cha Kuingiza, unaweza kutumia kipengele cha thamani kusoma thamani yake. Katika mfano ufuatao, tutasoma thamani ya kitelezi na kuitoa kwa aya.
kazi fun1() ( var rng=document.getElementById("r1"); //rng is Input var p=document.getElementById("one"); // p - aya p.innerHTML=rng.value; )
kazi fun1() ( var rng = hati . getElementById('r1");//rng ni Input var p = hati . getElementById (& #x27;moja"); // p - aya uk. innerHTML = rng . thamani; |
Angalia tukio jipya la pembejeo. Tukio la OnInput - huanzishwa wakati kuna mabadiliko yoyote katika kipengele cha fomu, kwa mfano wakati herufi mpya imeingizwa, au wakati kitelezi kinaposogezwa na 1px. Tofauti na tukio la OnChange, ambalo huanzishwa tu wakati kipengele kinapoteza mwelekeo, pembejeo huanzishwa wakati kuna mabadiliko yoyote katika kipengele. Tukio hili linaongeza mwingiliano kwenye kitelezi.
Tukio la onchange pia ni muhimu linapotumiwa na kipengele kilichochaguliwa.
Kazi ya vitendoJukumu la 1. Badilisha tukio la OnInput katika mfano uliowasilishwa na tukio la kubadilisha. Jifunze jinsi tabia ya vipengele imebadilika. Je, ni lini maana katika sasisho la aya?
Kazi ya 2. Weka kitelezi kwa thamani ya chini ya 50 na thamani ya juu ya 150. Jifunze ni maadili gani ya chini na ya juu zaidi yanaonyeshwa katika aya?
Kazi ya 3. Weka hatua ya kitelezi hadi 10. Je, maadili yanabadilikaje katika aya?
Kazi ya 4. Weka hatua ya mabadiliko ya thamani hadi 7. Jinsi ya kubadilisha maadili ya juu na ya chini?
Tunaendelea kufanya kazi na kitelezi cha masafaMakini! Thamani zilizosomwa kutoka kwa mali ya thamani ni mfuatano. Usisahau kuzibadilisha kuwa nambari kwa kutumia parseInt(kamba yako) kazi.
Wacha tusuluhishe shida rahisi: onyesha thamani ya kitelezi kwenye pembejeo. Ili kufanya hivyo, unahitaji kuhamisha thamani ya mali ya slider.value kwenye mali ya input.value. Mfano umeonyeshwa hapa chini:
kazi fun1() ( var rng=document.getElementById("r1"); //rng ni kitelezi var i1=document.getElementById("i1"); // i1 - ingizo i1.value=rng.value; )
Kazi ya vitendoKazi ya 5. Jifunze kazi ya mfano hapo juu. Ongeza tukio la oninput="fun2()" ili kuingiza type="text". Kwa programu ya fun2 ya kazi tatizo kinyume- zile maadili ambazo zimeingizwa kwenye pembejeo hupewa kitelezi kiatomati.
Ili kuilinda, hebu tufanye kazi moja zaidi: tumia kitelezi kubadilisha saizi div block. Mpangilio wa kazi umewasilishwa hapa chini:
