Script pentru afisarea/ascunderea widget-urilor

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Script pentru afisarea/ascunderea widget-urilor

Mesaj Scris de Luky la data de Joi 30 Sept - 20:00

Script pentru afisarea/ascunderea widget-urilor




  1. Definire:
    Daca urmariti pasii prezentati in acest tutorial veti putea adauga un script pe forumul dumneavoastra care va permite fiecarui utilizator sa afiseze/ascunda widget-urile de pe forum dupa cum doreste. Puteti testa acest script chiar pe acest forum dand click stanga pe sagetiile din partea dreapta sus deasupra primului widget dupa cum este prezentat si in imaginea de mai jos :  


     


  2. Cum functioneaza :
    Acest script nu necesita editarea de template-uri si prin urmare functioneaza pe toate versiunile de forumuri. Totusi, depinzand de locul unde aveti amplasate widget-urile pe forum (pe partea stanga sau pe partea dreapta) script-ul este un pic diferit dar modul de adaugare este identic. O sa va dau script-ul atat pentru partea stanga cat si partea dreapta astfel incat il veti putea adauga pe cel care se potriveste forumului dumneavoastra.
    Script-ul va "retine" optiunea care ati ales-o chiar daca reincarcati pagina sau mergeti pe o alta pagina a forumului. Optiunea pe care a ales-o fiecare utilizator se va pastra pana cand vor da click din nou pe sageata sau pana cand vor curata cache-ul browser-ului de internet.



  3. Instalarea script-ului :  
    Pentru a il instala trebuie sa creati doua module personalizate.
    Puteti fac acest lucru mergand in Panou de Administrare -> Module -> Portal & Widget-uri -> Gestiunea widget-urilor forumului. Pe aceasta pagina dati click pe butonul "Creati un widget personalizat" ca in imaginea de mai jos :



    Va trebuii sa adaugati un widget deasupra si unul dupa celelalte widget-uri care le aveti deja instalate pe forum.


    Dupa ce dati click pe butonul "Creati un widget personalizat" veti ajunge pe aceasta pagina :



    Acestea sunt informatiile care trebuie sa le adaugati :
    Nume widget - Puteti pune orice nume doriti insa pentru a simplifica lucrurile in acest tutorial eu voi numii widget-ul care va fi deasupra - "Widget-ul de deasupra"
    Utilizati un tablou tip - Alegeti Nu la aceasta optiune.
    Titlul widget - Lasati gol acest camp
    Sursa widget - In acest camp veti adauga codul propriu-zis. Asigurati-va ca alegeti script-ul pentru partea stanga sau pentru partea dreapta.  


  4. Script-ul :


    • Pentru partea stanga :  

      Aduagati acest cod in campul "Sursa widget" pentru widget-ul de deasupra :
      <div id="forum-widget" style="height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; position: absolute; background: #f5ebf7 url(http://i42.tinypic.com/vg54yu.png) no-repeat 0 -13px;" onClick="jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); } else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); }"></div>


      Partile colorate in rosu si albastru reprezinta ceea ce puteti personaliza din cod.
      Partea cu rosu este culoarea de fundal a imaginii si partea in albastru este link-ul direct catre imaginea pe care veti da click ca sa afisati/ascundeti widget-urile, in cazul nostru sagetile.  


      Acum creati un nou widget si adaugati urmatorul cod pentru widget-ul de jos :

      <script type="text/javascript"> jQuery('#forum-widget').insertBefore('#left'); if(my_getcookie('forum-widget')=='0') {jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); } </script>



    • Pentru partea dreapta :  

      Adaugati acest cod in campul "Sursa widget" pentru widget-ul de deasupra :  


      <div id="forum-widget" style="cursor: pointer; height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: relative; bottom: -15px; float: right; background: #f5ebf7 url(http://i42.tinypic.com/vg54yu.png) no-repeat 0 -13px;" onClick="jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px');  jQuery('#content-container div#content').css('margin-right','189px');} else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px'); }"></div>


      Dupa cum am explicat si mai sus, partile in rosu si albastru pot fi personalizate dupa cum doriti.

      Creati un widget nou folosind codul de mai jos pentru widget-ul de jos :

      <script type="text/javascript"> jQuery('#forum-widget').insertBefore('#right'); if(my_getcookie('forum-widget')=='0') {jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px');  jQuery('#content-container div#content').css('margin-right','0px');} </script>






  • 5. Adaugarea widget-urilor :

    Dupa ce ati creat widget-urile trebuie sa le adaugati pe forum. Daca nu stiti deja cum puteti face acest lucru atunci va voi spune cum :
    Mergeti in Panou de Administrare -> Module -> Portal & Widget-uri -> Gestiunea widget-urilor forumului
    Pe aceea pagina dati click pe sectiunea "Widget-uri personale". De acolo tineti apasat pe click stanga si mutati widget-ul de deasupra, deasupra tuturor widget-urilor care le aveti instalate deja in sectiunea "Gestiunea widget-urilor forumului" si apoi mutati widget-ul de jos sub celelalte widget-uri care le aveti instalate deja. Nu uitati sa dati click pe "Inregistrare" pentru a va salva modificarile.

    Un alt mod de a adauga widget-uri este prin sectiunea "Adaugare/stergere de widget-uri personale" aflata la sfarsitul paginii. Din meniul "Widget-uri" alegeti widget-ul de deasupra si adaugati-l fie in coloana 1(partea stanga) fie in coloana 3(partea dreapta) si dati click pe butonul "Adaugare widget".
    Chiar daca le veti adauga asa insa tot va trebuii sa le rearangati ordinea si sa puneti widgetul de deasupra sus si widget-ul de jos in partea de jos folosind metoda explicata mai sus.

    Indiferent de optiunea care ati ales-o pentru a adauga widget-urile asa trebuie sa arate la final :




    Asta a fost tot Foarte fericit





  • Echipa Forumgratuit
    Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.
    avatar
    Luky
    Membru onorific
    Membru onorific

    masculin

    Mesaje : 3556
    Varsta : 28
    Localizare : Bucuresti
    Data înscrierii : 27/12/2007
    Multumiri : 22
    Niciun avertisment

    Sus In jos

    Vezi subiectul anterior Vezi subiectul urmator Sus

    - Subiecte similare

    Permisiunile acestui forum:
    Nu puteti raspunde la subiectele acestui forum