AcasaCalendarFAQCautareMembriGrupuriInregistrareConectare




Distribuiţi|

Adaugarea mai multor instrumente!

Vezi subiectul anterior Vezi subiectul urmator In jos
AutorMesaj
Membru Inregistrat
avatar


Rank: Membru Inregistrat
Mesaje : 31
Cash : 63
Membru din : 25/01/2014
Varsta : 19
Localizare : Buzau/Berca
Joburi/Distractii : Forumu:)
MesajSubiect: Adaugarea mai multor instrumente! Sam Ian 25, 2014 4:38 pm

Salutare tuturor,
In tutorialul de astazi am sa va arat cum puteti adauga mai multe instrumente pentru editorul de mesaje. Pentru adauga un nou instrument, trebuie sa urmati 3 pasi simpli. In cazul in care doriti mai multe instrumente, va trebui sa repetati pasii de mai jos de cate ori doriti.

Demonstratie:


Alegeti una din cele trei variante propuse:
1. un instrument nou cu icon
2. un instrument nou cu text
3. mai multe instrumente adaugate tip "drop down"

Daca doriti un instrument cu icon urmati pasii de mai jos:
1. Adaugati urmatorul cod in:
Panou de administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript ~> Creati un nou cod JavaScript
COD: SELECTATI CONTINUTUL
$(function(){
$(function(){
$('

').insertBefore('.sceditor-button-size').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText("Continut")})
})
});

Inlocuiti "LINK ICON" cu adresa URL a unei imagini de dimenxiunea 16x16 pixeli.
Inlocuiti "Continut" cu continutul dorit.
Exemplu de continut pe care il puteti adauga:
COD: SELECTATI CONTINUTUL
Text-ul dorit

Inlocuiti "Denumire buton" cu denumirea instrumentului dvs. Acest lucru va fi afisat atunci cand pozitionati cursorul pe buton.

In continutul instrumentului puteti adauga si balize BBCode, in cazul in care nu doriti un simplu text. Daca nu stiti ce sunt balizele BBCode, puteti citi acest tutorial.

2. Daca nu ati facut deja acest lucru, activati gestiunea codurilor JavaScript.


3. Odata ce am terminat modificarile, setati vizualizarea scriptului pentru toate paginile si apasati pe .

Daca doriti un instrument fara icon, urmati pasii de mai jos:
1. Adaugati urmatorul cod in:
Panou de administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript ~> Creati un nou cod JavaScript
COD: SELECTATI CONTINUTUL
$(function(){
$(function(){
$('Buton
').insertBefore('.sceditor-button-size').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText("Continut")})
})
});

Inlocuiti "Buton" cu numele butonului dvs.
Inlocuiti "Continut" cu continutul dorit.
Exemplu de continut pe care il puteti adauga:
COD: SELECTATI CONTINUTUL
Text-ul dorit

Inlocuiti "Denumire buton" cu denumirea instrumentului dvs. Acest lucru va fi afisat atunci cand pozitionati cursorul pe buton.


2. Daca nu ati facut deja acest lucru, activati gestiunea codurilor JavaScript.


3. Odata ce am terminat modificarile, setati vizualizarea scriptului pentru toate paginile si apasati pe .

4. Adaugati urmatorul cod in:
Panou de administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS
COD: SELECTATI CONTINUTUL
.sceditor-button {
font-size: 11px !important;
color: #777777 !important;
width: auto !important;
text-indent: 0px !important;
}

.sceditor-button b{
position: relative;
top: 10px;
}

In codul CSS de mai sus inlocuiti #777777 cu culoarea dorita. Puteti accesa acest ghid pentru o gama variata de culori.

Daca doriti mai multe instrumente adaugate tip "drop down" urmati pasii de mai jos:
1. Adaugati urmatorul cod in:
Panou de administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript ~> Creati un nou cod JavaScript
COD: SELECTATI CONTINUTUL
$(function(){
$(function(){
$('
[Trebuie sa fiti inscris si conectat pentru a vedea acest link]
').insertBefore('.sceditor-button-size');
$('.buton2').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText("Continut Buton")});
});
});

Cautati:
  • [Trebuie sa fiti inscris si conectat pentru a vedea acest link]








  • Adaugati imediat dupa:
  • [Trebuie sa fiti inscris si conectat pentru a vedea acest link]



  • Unde scrie buton2 inlocuiti cu buton3.
    Unde scrie Denumire Buton inlocuiti cu denumirea dorita.
    Unde scrie Buton inlocuiti cu numele butonului.

    Cautati:
    $('.buton2').click(function(){
    $('#text_editor_textarea').sceditor("instance").insertText("Continut Buton")});
    });
    Adaugati imediat dupa:
    $('.buton2').click(function(){
    $('#text_editor_textarea').sceditor("instance").insertText("Continut Buton")});
    });

    Unde scrie buton2 inlocuiti cu buton3.
    Continut Buton reprezinta continutul care va fi inserat in editor.


    Pentru a va iesi codul trebuie sa numerotati butoanele cu buton3, buton4, buton5 pentru a nu va incurca in coduri.

    Pentru a-i adauga icon instrumentului tip drop down, cautati:
    COD: SELECTATI CONTINUTUL
    Nume Buton
    Inlocuiti cu:
    COD: SELECTATI CONTINUTUL
    [Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

    2. Daca nu ati facut deja acest lucru, activati gestiunea codurilor JavaScript.


    3. Odata ce am terminat modificarile, setati vizualizarea scriptului pentru toate paginile si apasati pe .

    4. Adaugati urmatorul cod in:
    Panou de administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS
    COD: SELECTATI CONTINUTUL
    .sceditor-button {
    font-size: 11px !important;
    color: #777 !important;
    width: auto !important;
    text-indent: 0px !important;
    }

    .sceditor-button b{position: relative;top: 10px;}

    .instrumente ul{
    display: none;background: white;
    position: absolute;
    margin-top: 24px;
    box-shadow: 0px 0px 5px #adadad;
    padding: 5px;
    }
    .instrumente:hover > ul {
    display: block;
    }

    Si asta a fost tot!
    Sus In jos
    Vezi profilul utilizatorului

    Adaugarea mai multor instrumente!

    Vezi subiectul anterior Vezi subiectul urmator Sus
    Pagina 1 din 1

    Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum
     :: Suport C4Strike :: Suport Forum Gratuit :: Tutoriale Panoul Administrare-