Top subiecte apreciate

Optiuni experimentale
  • Foloseste AJAX in formulare ori de cate ori este posibil

Navigare rapidă

Ultimele subiecte
» Serie Tutoriale CSS
Scris de Hachiy Dum 15 Ian - 16:59
» Wireless ipb theme [punBB]
Scris de vi01239984564 Mar 10 Ian - 11:50
» Summer v1.1 theme
Scris de vi01239984564 Mar 10 Ian - 9:57
» Va place acest forum? [Subiect Unic]
Scris de Andrei34 Vin 6 Ian - 0:21
Cuvinte-cheie

edit  animate  subiecte  reclama  legenda  avatar  Metin2  banner  tema  subforumuri  punbb  Statistici  navigare  tutorial  ultimele  Mesaje  html  meniu  chenar  drop  radio  cautare  profil  menu  Bara  phpBB2  

JQUERY - Schimbare iconuri la butoanele BBCode


Buna ziua tuturor,

In tutorialul de astazi am sa va arat cum puteti schimba un icon anume de la butoanele BBCode. Mai jos se afla o imagine pentru a va da seama despre ce este vorba.
[Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine]
Imaginile de mai jos pot fi schimbate foarte usor. Pentru a inlocui imaginea trebuie sa adaugati un alt icon (16x16px) in locul celei existente.
Iconuri actuale:
[Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine][Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine]
Link-uri imaginia actuale:
Cod:
http://illiweb.com/fa/wysiwyg/text_bold.png
http://illiweb.com/fa/wysiwyg/text_italic.png
http://illiweb.com/fa/wysiwyg/text_underline.png
http://illiweb.com/fa/wysiwyg/text_strikethrough.png
http://illiweb.com/fa/wysiwyg/text_align_center.png
http://illiweb.com/fa/wysiwyg/text_align_left.png
http://illiweb.com/fa/wysiwyg/text_align_right.png
http://illiweb.com/fa/wysiwyg/page_white_code.png
http://illiweb.com/fa/i/smiles/icon_smile.gif
http://illiweb.com/fa/wysiwyg/color_swatch.png
http://illiweb.com/fa/wysiwyg/help.png
http://illiweb.com/fa/wysiwyg/link.png
http://illiweb.com/fa/wysiwyg/film.png
http://illiweb.com/fa/wysiwyg/text_list_numbers.png
http://illiweb.com/fa/wysiwyg/picture.png
http://illiweb.com/fa/wysiwyg/comments.png
http://illiweb.com/fa/wysiwyg/text_list_bullets.png
http://illiweb.com/fa/wysiwyg/text_align_justify.png
http://illiweb.com/fa/wysiwyg/text_horizontalrule.png
http://illiweb.com/fa/wysiwyg/table.png
http://illiweb.com/fa/wysiwyg/picture_save.png
http://illiweb.com/fa/wysiwyg/page_white_flash.png
http://illiweb.com/fa/wysiwyg/style.png
http://illiweb.com/fa/wysiwyg/font.png
http://illiweb.com/fa/wysiwyg/separator.png
Pentru a schima un icon adaugati in felul urmator.

P.A=>Module=>Portal & Widget-uri=>Gestionarea Widget-urilor forumului=>Creati un widget personalizat
Adaugati acest cod pentru al putea edita:
Cod:
<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('button img').each(function() {
/*------------CODURI ICONURI------------------*/
        if(jQuery(this).attr('src') == 'IMAGINE ACTUALA') jQuery(this).attr('src', 'IMAGINE NOUA');
/*------------CODURI ICONURI TERMINAT------------------*/
    });
})
</script>

Unde este notat IMAGINE ACTUALA stergeti si adaugati una din iconurile de mai sus. Pentru IMAGINE NOUA adaugati dupa propriile preferinte un icon de 16x16pixeli.

Daca doriti sa schimbati mai multe iconuri adaugati deasupra /*------------CODURI ICONURI TERMINAT------------------*/ urmatorul cod:
Cod:
        if(jQuery(this).attr('src') == 'IMAGINE ACTUALA') jQuery(this).attr('src', 'IMAGINE NOUA');
Daca doriti de exemplu sa modificati 6 iconuri atunci adaugati acest cod de 6 ori. Dar nu uitati ca trebuie sa modificati spatiile "IMAGINE ACTUALA" si "IMAGINE NOUA".
Sper ca veti reusi sa realizati ceea ce am prezentat in acest tutorial.

Comentariile utilizatorilor
Membru dedicat
la data de Joi 6 Oct - 9:05
Mitză Membru dedicat
Conectat
Mersi mult Stefan, cat am cautat ca sa pot face asta la phpBB3 !
Membru dedicat
la data de Joi 6 Oct - 12:58
Paul Membru dedicat
Conectat
Multumim mult pentru acest cod..
chiar il cautam de mult timp
Membru ET
la data de Dum 9 Oct - 15:05
[x]sTyL[e] Membru ET
Conectat
Frumos tutorial , multumim de coduri.
Vizitator
la data de Vin 14 Oct - 23:30
Vizitato Vizitator
Conectat
Adevarul e ca multi cautam candva acest cod, forumurile ce aveau alte similies nu stiau cum sa isi schimbe iconita de butonul BB.
Membru ET
la data de Sam 22 Oct - 19:09
denisdeni22 Membru ET
Conectat
Multumes Stefan.Este foarte folositor codul.
Membru ET
la data de Lun 24 Oct - 19:42
daniel_clv97 Membru ET
Conectat
multumesc pentru cod
Vizitator
la data de Dum 27 Noi - 19:21
Vizitato Vizitator
Conectat
Chiar cautam acest cod..vazuzem imaginile schimbate pe multe forumuri..
Membru nou
la data de Sam 31 Dec - 13:25
Banjo Membru nou
Conectat
Bun Tutorial dar mie numi iese
Membru ET
la data de Joi 5 Ian - 16:18
Emanuel Membru ET
Conectat
JQUERY - Schimbare iconuri la butoanele BBCode
Defapt nu functioneaza doar sa schimbi iconitele bbcode , merge sa schimbi ori ce fel de imagini.
Administrator
la data de Joi 5 Ian - 17:15
Zeus Administrator
Conectat
[Trebuie sa fiti inscris si conectat pentru a vedea acest link] a scris:
JQUERY - Schimbare iconuri la butoanele BBCode
Defapt nu functioneaza doar sa schimbi iconitele bbcode , merge sa schimbi ori ce fel de imagini.

Fiecare face ce vrea cu codul.
Vizitator
la data de Joi 5 Ian - 22:01
Vizitato Vizitator
Conectat
Totul depinde de selectori... jQuery('button img')
Membru activ
la data de Vin 6 Ian - 16:24
Mr.Crazy Membru activ
Conectat
Foarte folositor...aveam nevoie