| Zero-Cool |
06. 06. 2012. 15:38 |
Change Background Color of Li Element
Pozdrav svima,
Imam jedan za mene malo komplikovan task, treba da promenim boju pozadine jednog Li elementa, ali tako da prvo proverima tekst unutar P taga koji se nalazi ugnjezden u Li tagu:
Kôd:
<ul>
<li id="input-token"><p>Ime i prezime</p></li>
<li id="input-token"><p>Drugo ime</p></li>
</ul>
Ime za poredjenje sa tekstom unutar p taga dobijem iz metoda u code behind-u neke custom stranice, sto je skroz ne bitno...bitno mi je da pozivu js funkcije mogu da prosledim niz imena koje on treba da pronadje i da tim Li elementima postavi drugu boju.
nesto sto sam ja nasao mi ne radi a to je sledece:
Kôd:
(document).ready(function() {
$('.token-input > li').each(function () {
if($(this).children('p').text() == 'Ime i prezime')
{
$(this)
.css('background-color','#FF0F4B');
});
});
});
|
| xippi |
06. 06. 2012. 16:14 |
|
| jablan |
06. 06. 2012. 16:21 |
http://jsfiddle.net/AAJB9/
Mada bolje izgleda kao CS:
Kôd:
$ ->
$("li").filter(->
$(this).text() is "bar"
).css "background-color", "red"
;)
|
| Zero-Cool |
06. 06. 2012. 16:22 |
Citat:
Originalno napisao xippi
(Napišite 107333)
|
Pa zato sto ih generise neka jQuery klasa, pa im dodaje jos neki identifikator posle toga, koji ja u trenutku kad treba da menjam boju ne znam i ne mogu da dobijem iz code behind-a.
Hvala na pomoci |
| Zero-Cool |
06. 06. 2012. 16:42 |
E sad to mi stvarno puno pomaze, osim sto sam skontao da ne mogu da imam recimo tri ovakve funkcije gurnute od stran code behind-a za recimo promenu tri LI elementa, nego moram jednoj funkciji proslediti niz od 3 stringa, sa recimo delimiterom ; i onda u funkciji za svaki od elemenata niza uraditi ovo gore :)
|
| Nemanja Avramović |
06. 06. 2012. 17:59 |
Ubaci ovo u neki JS fajl:
Kôd:
Array.prototype.in_array = function(p_val) {
for(var i = 0, l = this.length; i < l; i++) {
if(this[i] == p_val) {
return true;
}
}
return false;
};
function hajlajtuj(lista, fraze, bg_color)
{
if (bg_color === undefined)
bg_color = "#ccc";
$(lista).find('li').each(function() {
var txt = $(this).text();
if (fraze.in_array(txt))
$(this).css('background-color', bg_color);
});
}
Zatim bilo gde u JS kodu možeš pozvati:
Kôd:
hajlajtuj("#css-selektor-liste", ["fraza1", "fraza2", "...", "frazaN"], '#ccc');
Napomena: Ova f-ja zahteva jQuery!
edit: Primer: http://jsbin.com/ugigem/3/edit |
| Br@nkoR |
06. 06. 2012. 18:07 |
http://api.jquery.com/jQuery.inArray
Kôd:
$(
function() {
var select = ['foo', 'bar'];
$('li').filter(
function(i){
return $.inArray($(this).children('p').text(), select) >= 0;
}
).css('background-color', 'red');
}
);
|
| Zero-Cool |
07. 06. 2012. 14:25 |
Citat:
Originalno napisao Nemanja Avramović
(Napišite 107337)
Ubaci ovo u neki JS fajl:
Kôd:
Array.prototype.in_array = function(p_val) {
for(var i = 0, l = this.length; i < l; i++) {
if(this[i] == p_val) {
return true;
}
}
return false;
};
function hajlajtuj(lista, fraze, bg_color)
{
if (bg_color === undefined)
bg_color = "#ccc";
$(lista).find('li').each(function() {
var txt = $(this).text();
if (fraze.in_array(txt))
$(this).css('background-color', bg_color);
});
}
Zatim bilo gde u JS kodu možeš pozvati:
Kôd:
hajlajtuj("#css-selektor-liste", ["fraza1", "fraza2", "...", "frazaN"], '#ccc');
Napomena: Ova f-ja zahteva jQuery!
edit: Primer: http://jsbin.com/ugigem/3/edit
|
Malo sam ispravljao kod da bi ga prilagodio, reci mi jel moze jquery-1.5.1.min.js da se koristi?
Posto kad ispravljen kod isprobam na JSBin-u radi kako treba, dok kod mene ne radi...
ispravio sam ovako: http://jsbin.com/ugigem/5/edit |
| Nemanja Avramović |
07. 06. 2012. 15:04 |
Trebalo bi da može, ništa posebno novo se ne koristi u tom kodu... mada nemam pojma, ja uglavnom koristim uvek poslednji jQ i sa njim radi :)
Je l' dobijaš neku grešku, kako misliš "ne radi"?
|
| Zero-Cool |
07. 06. 2012. 15:13 |
Ne dobijem gresku, ali kad ga pustim kroz debug ne udje uopste u deo gde prolazi kroz niz i proverava vrednosti pa postavlja css.
Zato sam te pitao da li treba neka druga posebna verzija, posto ja koristim ovu 1.5.1 i sve ostalo mi s njom radi ok...al ovde zapinje :)
Morao sam da dodam .children('p') zasto sto nissam skontao ali unutar tog Li elementa imam i span, pa da bi pokupio kako treba, cak sam probao da dole dodam .parent('li') --// $(this).parent('li').css('background-color', bg_color); // misleci da ne moze da dohvati li element da ga ofarba ali nista...
|
| Zero-Cool |
07. 06. 2012. 15:17 |
Da i moja greska u kodu mi jquery postavlja u ul element class="token-input-list" a ne id="token-input-list"...mada ne vidim sto bi to bio problem.
|
| Nemanja Avramović |
07. 06. 2012. 17:32 |
|
| Br@nkoR |
07. 06. 2012. 17:38 |
http://api.jquery.com/jQuery.inArray/
Citat:
The $.inArray() method is similar to JavaScript's native .indexOf() method in that it returns -1 when it doesn't find a match. If the first element within the array matches value, $.inArray() returns 0.
Because JavaScript treats 0 as loosely equal to false (i.e. 0 == false, but 0 !== false), if we're checking for the presence of value within array, we need to check if it's not equal to (or greater than) -1.
|
|
| Nemanja Avramović |
07. 06. 2012. 17:43 |
Off Topic: Evo videh i sam. Na kraju sam posle 10 minuta ipak odlučio da pročitam šta piše na toj stranici pa sam zaključio da ne vraća true/false. Ispravio sam svoj kod. Hvala! :) |
| Br@nkoR |
07. 06. 2012. 20:09 |
@Zero-Cool: Postavi link do stranice gde ovo koristiš, ukoliko problem i dalje postoji.
|
| Zero-Cool |
08. 06. 2012. 08:57 |
Malo je komplikovana situacija kod mene, ovo se sve vrti pod Sharepoint-om na nekom izolovanom serveru, tako da je nemoguce da okacim stranicu...mogu samo da vam opisem sta radim, mozda cete skontati nesto iz toga....
Ovako: Imam text box sa autocomplete=om koji je multiple, znaci moze da se izabere vise vrednosti (tako je napravljen da koristi jquery i na svaki izbor on uradi neki postback i smesti vrednosti u hiddenfield a u ovo text box-u prikaze vrednost, uokviri je i postavi 'x' za brisanje vrednosti...to je upravo ono <li class="token-input-token">nesto</li><span class="nesto">x</span>...znaci za svaki dodat element on napravi jedan ovakav element kroz postback.
Kada selektujem sve potrebne elemente, ja tada na neko drugo dugme hocu da proverim da li selektovani (u ovom slucaju su to useri iz Sharepoint-a) se nalaze stvarno prisutni u AD i ako se neki od njih ne nalazi da se taj ukovireni deo Li elementa oboji u crveno. Ovo radim u Code Behindu, imam metod koji sve to lepo pregleda i vrati mi niz usera koji se ne nalaze u AD-u, ja taj niz prosledim javascript metodi koju sam pre toga definisao u ASPX stranici ili nekom eksternom js fajlu i pozovem tu javascript metodu kroz ScriptManager.RegisterStartupScript....
Kada pustim kroz debug, on lepo udje u ovaj highlight(hajlajt) metod ali nikad mi ne prodje ovaj .each, odnosno kad stavi breakpoint na var txt = $(this).children('p:first').text(); nikad ne dodje do toga...
Tacno je da ovaj kod sto ste ovde napisali radi, to sam isprobao ovako bezveze, ali u okviru ovog mog solutiona ima neki problem.
|
| Br@nkoR |
08. 06. 2012. 11:45 |
Deluje kao da jQuery selektor nije ispravan i ne selektuje se nijedan elemenat, dakle u primeru koji je postavio @Nemanja Avramović $('.input-token-list').find('li'). Pokušaj to u conzoli da uneseš i vidiš da li selektuje neki elemenat ili ukoliko možeš postavi samo html kod tog dela (ul elmenat). Mada vidim da ti pominješ, u prethodnoj poruci, drugačiji class atribut token-input-list, zatim obrati pažnju na to da . u jQuery selektoru predstavalja class, a # id.
Zatim možda je bolje da menjaš classu tih elemenata a ne css background osobinu tih elemenata, lakše ti posle ukoliko želiš da menjaš dizajn, menjaš u CSS kodu osobine za tu klasu, a ne u JavaScrip.
|
| Zero-Cool |
08. 06. 2012. 11:56 |
Da upravo sam shvatio da je bolje da menjam klasu a ne poseban stil, tako da sam to vec napravio pre nego sto sam video tvoj post...u medjuvremenu gledam ovaj kod pa sve mislim da se mozda ne pregazi ova promena sto pozivam sa onom nativnom koju sama kontrola poziva pri renderu
Takodje ono sto sam zaboravio da napomenem (moja greska), ali mislim da to ne bi trebalo toliko da utice je, da je ta kontrola u UpdatePanelu, ali ona radi sve ok. Jedini pravi problem je sto na FullPostBack (klikom na dugme) ja ne mogu da dohvatim te elemente koji su kreirani i da im promenim stil...
|
| Zero-Cool |
08. 06. 2012. 12:12 |
Funkcija koja je trenutno:
Kôd:
function highlight(list, fraze, bg_color) {
if (bg_color === undefined)
bg_color = "token-input-token-facebook-red";
$(list).find('li').each(function () {
var txt = $(this).children('p:first').text();
if ($.inArray(txt, fraze) !== -1)
$(this).removeClass('token-input-token-facebook').addClass(bg_color);
});
}
Poziv funkcije:
Kôd:
highlight('ul.token-input-list-facebook'," + _usersNotExisting + ",'token-input-token-facebook-red')
Deo koda iz ASPX stranice u kome se nalazi kontrola koja pri renderu pravi UL listu sa LI elementima o kojima sam pricao
Kôd:
<asp:Panel ID="pan_FindUsers_User" runat="server" Visible="false" CssClass="nis-taskdetails-zone-row">
<span class="nis-taskdetails-zone-row-title">User</span>
<div class="nis-taskdetails-zone-row-value" style="clear:both;">
<asp:UpdatePanel ID="up_FindUsers_Value" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<ati:ASPTokenInput ID="pe_FindUsers" runat="server" OnListChanged="pe_FindUsers_ListChanged" RequestHandlerPath="/_layouts/NIS.TaskManagement/pages/ItemList.aspx" PostbackOnItemAdded="True" PostbackOnItemRemoved="True" Theme="facebook" HintText="Start Typing User Name ..." Width="530px" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Panel>
i na kraju renderovani kod izgleda ovako:
Kôd:
<UL class=token-input-list-facebook jQuery164001925506440042457="315">
<LI class=token-input-token-facebook jQuery164001925506440042457="318">
<P>Ime i Prezime, Poslovođa</P><SPAN class=token-input-delete-token-facebook jQuery164001925506440042457="317">×</SPAN></LI>
<LI class=token-input-token-facebook jQuery164001925506440042457="320">
<P>Ime i Prezime, Specijalista za održavanje remontnih postrojenja</P><SPAN class=token-input-delete-token-facebook jQuery164001925506440042457="319">×</SPAN></LI>
<LI class=token-input-input-token-facebook><INPUT style="OUTLINE-STYLE: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: medium; WIDTH: 30px" id=token-input-ctl00_ctl23_g_e95b3a1e_efe8_4b15_8ff5_2909cd47abf9_ctl00_pe_FindUsers_ctl00 type=text autocomplete="off" jQuery164001925506440042457="313"><tester style="POSITION: absolute; WIDTH: auto; LETTER-SPACING: normal; FONT-FAMILY: Tahoma; WHITE-SPACE: nowrap; FONT-SIZE: 12px; FONT-WEIGHT: 400; TOP: -9999px; LEFT: -9999px"></tester></LI></UL>
|
| Br@nkoR |
08. 06. 2012. 17:10 |
Ne znam, i ovo radi kod mene kada testiram ovako:
HTML kôd:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<style>
.token-input-token-facebook-red {
background-color: red;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript">
function highlight(list, fraze, bg_color) {
if (bg_color === undefined)
bg_color = "token-input-token-facebook-red";
$(list).find('li').each(function () {
var txt = $(this).children('p:first').text();
if ($.inArray(txt, fraze) !== -1)
$(this).removeClass('token-input-token-facebook').addClass(bg_color);
});
}
$(function() {
highlight('ul.token-input-list-facebook', ['Ime i Prezime, Specijalista za održavanje remontnih postrojenja'], 'token-input-token-facebook-red');
});
</script>
</head>
<body>
<UL class=token-input-list-facebook jQuery164001925506440042457="315">
<LI class=token-input-token-facebook jQuery164001925506440042457="318">
<P>Ime i Prezime, Poslovođa</P>
<SPAN class=token-input-delete-token-facebook jQuery164001925506440042457="317">×</SPAN>
</LI>
<LI class=token-input-token-facebook jQuery164001925506440042457="320">
<P>Ime i Prezime, Specijalista za održavanje remontnih postrojenja</P>
<SPAN class=token-input-delete-token-facebook jQuery164001925506440042457="319">×</SPAN>
</LI>
<LI class=token-input-input-token-facebook>
<INPUT style="OUTLINE-STYLE: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: medium; WIDTH: 30px" id=token-input-ctl00_ctl23_g_e95b3a1e_efe8_4b15_8ff5_2909cd47abf9_ctl00_pe_FindUsers_ctl00 type=text autocomplete="off" jQuery164001925506440042457="313">
<tester style="POSITION: absolute; WIDTH: auto; LETTER-SPACING: normal; FONT-FAMILY: Tahoma; WHITE-SPACE: nowrap; FONT-SIZE: 12px; FONT-WEIGHT: 400; TOP: -9999px; LEFT: -9999px"></tester>
</LI>
</UL>
</body>
</html>
|
| Zero-Cool |
09. 06. 2012. 13:38 |
Pa verujem ti, sa Sharepoint-om uvek imas problem vise, ko zna u cemu je problem...uvek vise vremena provedem trazeci sta Sharepoint-u smeta, nego da napisem neko parce kod-a....svakako puno hvala na trudu, ovo je definitivno ono sto mi treba...jos "samo" da pronadjem sto to ne radi pod SP-om :D
|
| Zero-Cool |
10. 06. 2012. 13:22 |
I posle mnogo lupanja glavom o sto, napokon sam uspeo da provalim sta se desava...zbog asynchronous postback-a, redosled ucitavanja i renderovanja kontrola se promeni, odnosno ovaj nas kod se izvrsi pre renderovanja liste, tako da se nista ne desi sa listom
bilo je potrebno samo poziv funkcije highlight pozvati na sledeci nacin:
Kôd:
function pageLoad(sender, args) { highlight('ul.token-input-list-facebook',['Ime i prezime','drugo ime','trece ime'],'token-input-list-facebook-red'); }
I ova funkcija pageLoad ce se postarati da se zavrse svi synchronous i asynchronous postback-ovi pa ce se tek na kraju ona izvrsiti....sada sve radi sjajno.
Hvala puno na pomoci svima. |
| Vreme je GMT +2. Trenutno vreme je 00:36. |
|
Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.
Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.
