 Prisijungusių svečių: 19
Prisijungusių narių: 15
Prisijungę nariai: Cropp, _Beta, Arvydėlis, nuken, Hamas, Gytisz_, iZyle, Aggro, tm, Gotnix, Andrejus, Ginciuss, 7even, zDon, on-line
Registruoti nariai: 13,273
Naujausias narys: picasso
|
| Support saitai |  |
|
| JavaScript disable option problemos sprendimas |
Parašė ozzWANTED
2010 sausio 31 22:17:40
Situacija yra tokia, kad kurdami tinklapius privalome juos adaptuoti visoms naršyklėms.
Todėl, nesvarbu kad viskas veikia ant mūsų mėgstamo Firefox. Naršyklė, kuri šiuo metu palaiko daugiausiai HTML galimybių ir standartų, vienintelė praktiškai pilnai palaikanti CSS 3.0 standartą ir itin greit generuojanti JavaScript.
O problema yra ta, kad su problemomis susidurime tikrindami Opera naršyklėje. Tačiau bene labiausiai su jomis susiduriame senojoje gerojoje Internet Explorer.
Taigi - mūsų užduotis
<select name='pasirk' id ='pas1' onchange='updateOpts(this)'>
kur onchange atributo dėka paslėptume kelis punktus iš pasirinkimų sąrašo.
Firefox viskas labai paprasta:
if(hide == 1)
forma.options[2].style.display = 'none';
else
forma.options[2].style.display = 'block';
Ir problemos nebėra.
Tačiau tai veikia tik FireFox.
Dabar problemą išspręsti naršyklei Opera ir kitoms bent kiek padoresnėms naršyklėms, galima primityviu bet veikiančiu būdu:
forma.options[2].disabled = "disabled";
Tokie punktai dabar taps pilki ir nebepažymini.
Tačiau su didžiausia problema susiduriame tuomet, kai tą funkciją pabandome padaryti ant IE.
Problema ta, kad visos IE naršyklės, išskyrus naujausią, yra su bugu, apie kurį oficialiai pranešta čia:
http://webbugtrack.blogspot.com/...in-ie.html
Kaip matome iš nuorodos, tai padaryta dar 2007'aisias buvo.
Tačiau Microsoft, šią problemą tesugebėjo išspręsti tik IE8 naršyklėje. T.y.
<select>
<option>Aš geras</option>
<option>Aš geras</option>
<option disabled="disabled">AŠ BLOGAS!</option>
<option>Aš geras</option>
</select>
triukas nesuveiks IE6 ir IE7 naršyklėse.
Todėl šią problemą IE6 ir IE7 naršyklėms išspręsti reikia pasitelkti papildomus metodus.
Mums tiesiog reikia naikinkti vaikus(removeChild) bei pridėti vaikus(appendChild). Na o visą mūsų elementų baseiną(elements pool) turime saugoti globaliose JavaScript sekose(arrays):
var brokenPipe = ['a', 'b', 'c', ['ca', 'cb'], 'd', 'e'];
Tuomet reiktų generuoti sąrašą tokiu būdu:
1. Išvalome baseiną (ištriname visus pasirinkties sąrašo elementus) naudodamies removeChild metodu
2. IF funkcijos pagalba pridedame naujus elementus po vieną į pasirinkčių sąrašą galą pradedant nuliniu elementu.
Pačios javascript funkcijos, supaprastinančios šį Jūsų darbą būtų tokios:
function insertOptionBefore(num) {
var elSel = document.getElementById('selectX');
if (elSel.selectedIndex >= 0) {
var elOptNew = document.createElement('option');
elOptNew.text = 'Insert' + num;
elOptNew.value = 'insert' + num;
var elOptOld = elSel.options[elSel.selectedIndex];
try {
elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
}
catch(ex) {
elSel.add(elOptNew, elSel.selectedIndex); // IE only
}
}
}
function removeOptionSelected() {
var elSel = document.getElementById('selectX');
var i;
for (i = elSel.length - 1; i>=0; i--) {
if (elSel.options.selected) {
elSel.remove(i);
}
}
}
function appendOptionLast(num) {
var elOptNew = document.createElement('option');
elOptNew.text = 'Append' + num;
elOptNew.value = 'append' + num;
var elSel = document.getElementById('selectX');
try {
elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
}
catch(ex) {
elSel.add(elOptNew); // IE only
}
}
function removeOptionLast() {
var elSel = document.getElementById('selectX');
if (elSel.length > 0)
{
elSel.remove(elSel.length - 1);
}
}
Specifiškai pagal savo poreikius šias funkcijas manau jau sugebėsite persidaryti.
Tačiau svarbu įsidėmėti, kad dėl IE veikimo keblumų būtina naudoti klaidų valdymo mechanizmą try{} catch(ec){}. Kadangi IE įdės elementą sėkmingai be antrojo add() parametro.
Kaip atrodo vizualiai visa tai, galite peržiūrėti čia:
http://javascript.internet.com/f...tions.html
---
Dar papildomai tokį vieną kodą pateiksliu, skirtą sukurti pasirinkimų([i]options) sąrašą iš elementų sekos javascript pagalba:
// Šalių ir miestų sąrašas
var countriesAndCites = new Array ();
countriesAndCites['Australija'] = ['Brisbane', 'Melbourne', 'Sydney'];
countriesAndCites['Anglija'] = ['Liverpool', 'London', 'Manchester'];
// Tarkim paimame kažkokį įrašą
var country = 'Anglija';
// Pridėti naują pasirinkimą
var countryArray = countriesAndCites[country];
if (countryArray) {
for (var i=0; i < countryArray.length; i++) {
var option = new Option (countryArray[i], i);
musuFormosSELECTAS.options.add (option);
}
}
Parengė @ozzWANTED
2010 01 31 © PhpFusion-Lt.com
5 Komentarai ·
263 Skaityta ·
|
2010 vasario 01 14:38:31
Bet ar verta rašyti kilometrini kodą vien dėl IE? Mano manymu ne. Nors ir daug žmonių dar naudojasi IE 6(7), bet jau tada geriau išviso uždrausti jam lankytis tame portale. Gal tada nors susiprotės, kad taspats FF ar Opera geriau.
vienintelė praktiškai pilnai palaikanti CSS 3.0 standartą
Opera irgi palaiko CSS 3.0 pilnai.
P.S Aš irgi neseniai taikiau JS kodą ant IE. Be IE integracijos buvo ~13 eilučių, o su integracija ~43 eilutės.
----------------------------------
Redagavo Karolis 2010-02-01 14:44 |
2010 vasario 01 20:04:00
Opera irgi palaiko CSS 3.0 pilnai.
Ne. Taip nėra. CSS 3.0 geeks ar kažkoks saitas yra visų naujų feature'ų 3.0.
Dalies jų Opera nepalaiko.
Tame tarpe - kol kas nepalaiko border-radius. Taip pat nesupranta display:none selection option'ams. Visibility:hidden taip pat berods neveikia Operoje <options> listuose.
|
2010 vasario 04 13:02:36
Nežinau, nežinau.. Susiradau testą google.lt ir išmetė, kad Opera palaiko CSS 3.0/HTML 5.
|
2010 vasario 04 15:06:41
Na aš konkrečiai tau galiu pasakyti - su opera neveikia tie mano paminėti dalykai tikrai, veikia tik su FireFox. Kadangi turiu tikrinti visas naršykles, tą ir darau. Ir galiu pasakyti, kad trūksta 'rounder-corner' ir 'visibility:hidden for options' veikimo operoje.
Kad nevynioti į vatą mūsų diskusijos į beargumentę, labai rekomenduočiau tau pasiskaitytį šį straipsnį:
SS 3 and The Future: Image-free Rounded Corners, Drop Shadows and Gradients:
http://www.schillmania.com/conte...he-future/
Straipsnio pabaigoje yra vieta:
"Tying It All Together: Glossy Buttons"
Palygink kaip atrodo per FireFox ir kaip atrodo per Opera - Operoje nėra nei šėšėlio(drop-shadow), nei apvalių kampų.
CSS kodas atrodo taip:
.demo-button {
border:4px solid #000;
background-color:#000;
background-image:-webkit-gradient(linear, 0% 1%, 0% 95%, from(rgba(255,255,255,0.9)), to(rgba(64,64,64,0.9)), color-stop(.8,rgba(64,64,64,0.25)),color-stop(.25,rgba(32,32,32,0.5)));
background-image:-moz-linear-gradient(top,bottom,from(rgba(255,255,255,0.9)),color-stop(80%, rgba(64,64,64,0.25)),color-stop(25%, rgba(32,32,32,0.5)),to(rgba(64,64,64,0.9)));
}
Visas šitas dalykas normaliai pilnai veikia tik FireFox, bet ne Operoje. IE, kadangi kalbėti teko su MicroSoft Lietuva vienu iš aukštesnes pareigas užimančių žmonių, kaip jie man patys patvirtino, bus palaikomas jau nuo IE9 versijos, kuri turėtų pasirodyti 2011metais. Galbūt ir anksčiau.
Taip pat yra superinis saitą - http://www.css3.info - kuriame viskas apie CSS 3.0 standarto galimybes. Tikrai rekomenduoju persiskaityti daugumą tinklapyje esančių puslapių.
Beje, dėl CSS 3.0, tai saite aiškiai rašoma - kad kol kas tik Safari 3.0+ ir Firefox 3.5+ pilnai palaiko CSS 3.0. Opera 10 palaiko CSS tik dalinai - t.y. tik oficialiai patvirtintus punktus, t.y. tų kurie, nors ir žinoma, kad bus įtraukti į sekantį 'CSS standarts' leidimą(ar kaip ten jis vadinasi), bet Opera jų neįtraukia.
Todėl FireFox kūrėjai, yra tikrai protingesni, nes jie laimi tai, jog net ir neatsinaujinę ateityje naršyklės, vartotojai jau matys tai, ką pilnai gali CSS 3.0.
----------------------------------
Redagavo ozzWANTED 2010-02-04 15:07 |
2010 vasario 06 18:24:26
Kai ką sužinojau po to kai karolis užsiminė apie Opera 10 pre-alpha.
http://www.opera.com/developer/
Cituoju:
"Download Opera 10.5 pre-alpha and get a preview of Opera Presto 2.5 with Carakan and Vega
Download Opera 10.5 pre-alpha, and get a preview of what is under the hood of the Opera Presto 2.5 rendering engine: Carakan brings you lightning-fast JavaScript, and our Vega graphics backend brings many CSS3 enhancements such as border-radius, box-shadow, transitions and transforms to the browser. Read more about it on Dev.Opera: CSS3 transitions and 2D transforms and CSS3 borders, backgrounds and box-shadows".
Bėda ta, kad tai tik alpha versija dar, bet esmė ta, kad prie CSS 3.0 pilnai palaikaičių naršyklių prisideda ir Opera 10.5. Reikės laukti full-relyzo, bet anyway, džiugu žinoti kad tai jau įtrauka į Opera sėkmingai.
|
|
|
Prisijunkite, norėdami parašyti komentarą.
|
|
Balsuoti gali tik nariai.
Prašome prisijungti arba prisiregistruoti.
Nėra reitingų.
|
|
|
Arabia
Belgium
Brazil
Bulgaria
Czech Republic
Denmark
France
Germany
Hungary
Iran
Italy
Lithuania
Netherlands
Norway
Poland
Russia
Spain
Slovakia
Sweden
Turkey
