Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JQ] Dynamiczna zmiana title a tooltip
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
markonix
Witam.

Korzystam z bardzo fajnego pluginu tooltip:
http://flowplayer.org/tools/demos/tooltip/form.htm

Kod wywołania wygląda mniej więcej tak:
  1. $("#myform").tooltip({
  2. // kustomizacja
  3. });


Tooltipy oparte są o atrybuty title.
Moje pytanie brzmi czy można jakoś odświeżyć wywołanie funkcji tooltip po zmianie (change) pewnego checkoxa.

  1. $("#checkbox").change(function(){
  2. if ($(this).is(':checked')) {
  3. $("input#input").attr('title','Nowy title');
  4. }
  5. else {
  6. $("input#input").attr('title','Stary title');
  7. }
  8. });


Problem w tym, że checkbox ten zmienia wartość atrybutu title, ale tooltip i tak opierać się będzie o DOM wczytany przy ładowaniu strony i zmiana tytułu inputa w żaden sposób nie wpłynie na działanie dymków (doprowadzi nawet do sytuacji wyświetlania dwóch dymków - systemowego i tego JS).

Korzystam z powodzeniem z "live" w JQ lecz nie jestem pewien czy dotyczy ono edycji DOMu czy tylko nowych elementów i nie mam pojęcia jak zastosować je w odniesieniu do .tooltip, bo edytowania pluginu i zmiany eventów na live chciałbym jednak uniknąć.
devnul
a nie możesz raz jeszcze zainicjalizować tooltipa na zmienianym elemencie?
[JAVASCRIPT] pobierz, plaintext
  1. $("#checkbox").change(function(){
  2. if ($(this).is(':checked')) {
  3. $("input#input").attr('title','Nowy title').tooltip({/*opcje*/});
  4. }
  5. else {
  6. $("input#input").attr('title','Stary title').tooltip({/*opcje*/});
  7. }
  8. });
[JAVASCRIPT] pobierz, plaintext
markonix
Niestety nie działa:

http://sejfik.com/pages/tooltip.php

Jakby tego wywołania nie było.

devnul
dobra przegooglałem się i jest coś takiego
markonix
Możesz mnie lekko naprowadzić na co mam zwrócić uwagę pod tym linkiem?
Chodzi o plugin dynamic?
devnul
masz ładnie pokazaną możliwość zmiany zawartości tooltipa poprzez podpięcie zdarzenia onBeforeShow przy inicjalizacji tooltipa i wykonanie this.getTip().text('nowy title') z tej metody
markonix
Może i ładnie ale niestety niezbyt banalnie bo totalnie nie wiem na co mam patrzeć (czy w ogóle pierwszy czy drugi przykład) szczególnie, że o zdarzeniu "onBeforeShow" w Google jak na lekarstwo. Czy ta funkcja jest w ogóle w jQuery w standardzie?
devnul
onBeforeShow jest zdarzeniem dla tooltipa tylko - podpinasz je przy konfiguracji tooltipa i tam możesz sobie zrobić warunek sprawdzający czy jest to tooltip dla pola które Cie interesuje i czy są odpowiednie warunki spełnione (checkbox zaznaczony) jeśli tak to ustawiasz w nim jakiś komunikat jeśli nie to ustawiasz inny komunikat - proste. Jeśli to do Ciebie nie przemawia to sugerowałbym zamiast podmiany tooltipa i zmiany typu pola zwyczajnie podmieniać pola, tzn na starcie miałbyś nie dwa a trzy pola. Checkbox i dwa pola tekstowe które by były wyświetlane w zależności od tego czy checkbox jest aktualnie zaznaczony czy nie.
markonix
Pomysł z dwoma inputami i ich ukrywanie/pokazywanie wpadł mi w momencie pisania tego tematu ale wydaje mi się to mało eleganckim pomysłem poza tym dynamiczne tooltipy prędzej czy później warto znać od praktycznej strony.

Teraz Twój post do mnie przemówił. Powiem więcej, zrozumiałem i zastosowałem lecz mam mały problem. Jak ograniczyć działanie ten funkcji tylko do jednego inputa?
Próbuje na różne sposoby np. dodać instrukcje warunkową z $(this).attr('id') do funkcji w onBeforeShow ale zwraca wartość undefined?
(skrypt pod linkiem, który podałem wcześniej).
devnul
wystarczy że rozgraniczysz dodawanie tooltipa na 2 przypadki. jeden
[JAVASCRIPT] pobierz, plaintext
  1. $("form input:not(.dynamic)").tooltip({
  2. //tutaj statyczny tooltip
  3. });
  4. $("form input.dynamic").tooltip({
  5. //tutaj dynamiczny tooltip
  6. });
[JAVASCRIPT] pobierz, plaintext
i oczywiście nadajesz odpowiednią klasę dla inputa który ma mieć dynamiczny tooltip
markonix
Ahh winksmiley.jpg Myślałem, że da radę w jednej funkcji choć z drugiej strony.. Aż tyle kodu to nie jest. Dzięki.
devnul
tak patrzę po dokumentacji i wychodzi na to że można się dobrać do elementu wywołującego zdarzenie (u Ciebie input) przez getTrigger() czyli żeby dobrać się do id trzeba by wykombinować coś takiego jak mniemam
[JAVASCRIPT] pobierz, plaintext
  1. jakiid=this.getTrigger().attr('id');
[JAVASCRIPT] pobierz, plaintext
markonix
Teraz widzę, że problem leżał po mojej stronie - nie sądziłem, że funkcja tooltip ma jakieś takie wymysły jak owe OnBeforeShow i nawet nie pomyślałem aby zajrzeć do tej dokumentacji.

  1.  
  2.  
  3. onBeforeShow: function() {
  4. var currentId = this.getTrigger().attr('id');
  5. if ($("#members_is").is(':checked') && currentId == 'username') {
  6. this.getTip().text('nowy title');
  7. }
  8. else if (currentId == 'username') {
  9. this.getTip().text('Pierwotny tytuł 2');
  10. }
  11. else {
  12. this.getTip().text();
  13. }
  14. }
  15.  


getTrigger spełnia zadanie.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.