Statistici sub forma de tab-uri

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Statistici sub forma de tab-uri

Mesaj Scris de Cassius Dio la data de Sam 9 Feb - 21:20

Statistici sub forma de tab-uri (PunBB)

Cu ajutorul acestui tutorial puteti realiza un efect interesant pentru statisiticile dumneavoastra. Previzualizare:

Exclamare Urmati acesti pasi daca folositi versiunea PunBB.

1. Mergeti catre:
Panou de Administrare ~> Afisare ~> Template-uri ~> General ~> index_body ~>

2. Identificati acest fragment de cod:
Cod:
<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
   <div class="main-content">
      <div id="stats">
         <p class="right">{TOTAL_POSTS}</p>
         <p>{TOTAL_USERS}</p>
         <p>{NEWEST_USER}</p>
      </div>
      <div id="onlinelist">
         <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
         <p class="right">
            <!-- BEGIN switch_viewonline_link -->
            <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
         </p>
         <p>{TOTAL_USERS_ONLINE}<br />
         {RECORD_USERS}

         <br />
         {LOGGED_IN_USER_LIST}

         {L_ONLINE_USERS}
         {L_CONNECTED_MEMBERS}<br />
         {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
         <div class="clear"></div>

         <p>{LEGEND} : {GROUP_LEGEND}</p>

      </div>
      <!-- BEGIN switch_chatbox_activate -->
      <div id="onlinechat">
         <p class="page-bottom">
         {TOTAL_CHATTERS_ONLINE} :
         {CHATTERS_LIST}<br />
         <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
               insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            </script>
         <!-- END switch_chatbox_popup -->
         </p>
      </div>
      <!-- END switch_chatbox_activate -->
   </div>
</div>
<!-- END disable_viewonline -->
si inlocuiti-l cu:
Cod:
<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
  
        <ul id="explore-nav" style="list-style: none;">
                <li id="ex-featured"><a rel="featured" href="#" class="current">Statistici forum</a></li>
                <li id="ex-core"><a rel="core" href="#">Cine este conectat ? </a></li>
                <li id="ex-jquery"><a rel="jquerytuts" href="#">Legenda</a></li>
                <li id="ex-classics" class="last"><a rel="classics" href="#">Tab4</a></li>
        </ul>
  
          <div id="all-list-wrap">
  
            <ul id="featured" style="list-style: none;">
                <li style="display: block; padding: 0px; color:black;"><div class="main-content">
      <div id="stats">
         <p>{TOTAL_POSTS}</p>
         <p>{TOTAL_USERS}</p>
         <p>{NEWEST_USER}</p>
                  </div> </div> </li>

            </ul>
      
              <ul id="core" style="list-style: none;">
                  <li style="display: block; padding: 0px; color:black;">
                <div id="statistici">
         <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
         <p class="right">
            <!-- BEGIN switch_viewonline_link -->
            <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
         </p>
         <p>{TOTAL_USERS_ONLINE}<br />
         {RECORD_USERS}

         <br />
         {LOGGED_IN_USER_LIST}

         {L_ONLINE_USERS}
         {L_CONNECTED_MEMBERS}<br />
         {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
         <div class="clear"></div>

        

      </div></li>
        
              </ul>
      
              <ul id="jquerytuts" style="list-style: none;">
  <li style="display: block; padding: 0px; color:black;"><div id="tab3"><p>{LEGEND} : {GROUP_LEGEND}</p></div> </li>

              </ul>
      
              <ul id="classics" style="list-style: none;">
                <li style="display: block; padding: 0px; color:black;"><div id="tab4">Aici puteti adauga orice alt continut</div> </li>

              </ul>

                </div>
<br>
      
      <!-- BEGIN switch_chatbox_activate -->
      <div id="onlinechat">
         <p class="page-bottom">
         {TOTAL_CHATTERS_ONLINE} :
         {CHATTERS_LIST}<br />
         <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
               insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            </script>
         <!-- END switch_chatbox_popup -->
         </p>
      </div>
      <!-- END switch_chatbox_activate -->
  

<!-- END disable_viewonline -->
3. Faceti click pe butonul Inregistrare pentru a inregistra modificarile efectuate.

4. Mergeti catre:
Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS

5. Adaugati acest cod:
Cod:
 #organic-tabs { background: #253d5a; padding: 2px; margin: 0 0 15px 0; }

    #explore-nav { overflow: hidden; margin: 0 0 10px 0; }
    #explore-nav li {
   width: 151px;
   float: left;
   margin: 0 10px 0 0;
   font-size: 24px;
}
    #explore-nav li.last { margin-right: 0; }
    #explore-nav li a {
   display: block;
   padding: 5px;
   background: #f4f4f4;
   color: black;
   font-size: 10px;
   text-align: center;
   border: 1px solid #ddd;
     font-size:13px;
}
    #explore-nav li a:hover { background-color:#f4f4f4; }
    #jquerytuts, #core, #classics { display: none; }

    #explore-nav li#ex-featured a.current, ul#featured li a:hover {  color: black; }
    #explore-nav li#ex-core a.current, ul#core li a:hover {color: black; }
    #explore-nav li#ex-jquery a.current, ul#jquerytuts li a:hover { color: black; }
    #explore-nav li#ex-classics a.current, ul#classics li a:hover { color: black; }  


#statistici {
background-color: #f4f4f4;
border: 1px solid #ccc;
padding: .6em 1em;
}

#tab3, #tab4 {
border: 1px solid #ddd;
width: 100%;
min-height: 100px;
padding-top: 4px;
padding-left: 4px;
background: #f4f4f4;
}
6. Pentru a salva modificarile efectuate, faceti click pe butonul Valideaza.

7. Mergeti catre:
Panou de Administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript ~>

8. Adaugati urmatorul cod:
Cod:
$(function() {

    $("#explore-nav li a").click(function() {
        
        // Figure out current list via CSS class
        var curList = $("#explore-nav li a.current").attr("rel");
        
        // List moving to
        var $newList = $(this);
        
        // Set outer wrapper height to height of current inner list
        var curListHeight = $("#all-list-wrap").height();
        $("#all-list-wrap").height(curListHeight);
        
        // Remove highlighting - Add to just-clicked tab
        $("#explore-nav li a").removeClass("current");
        $newList.addClass("current");
        
        // Figure out ID of new list
        var listID = $newList.attr("rel");
        
        if (listID != curList) {
            
            // Fade out current list
            $("#"+curList).fadeOut(300, function() {
                
                // Fade in new list on callback
                $("#"+listID).fadeIn();
                
                // Adjust outer wrapper to fit new list snuggly
                var newHeight = $("#"+listID).height();
                $("#all-list-wrap").animate({
                    height: newHeight
                });
            
            });
            
        }        
        
        // Don't behave like a regular link
        return false;
    });

});
La rubrica Amplasare alegeti Indexul forumului.

9. Faceti click pe butonul Valideaza.

Succes! sunny

Tutorial scris de .razvan

Copyright ˆ Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.

Cassius Dio
Membru onorific
Membru onorific

masculin

Mesaje : 11025
Varsta : 18
Localizare : Strawberry Fields
Data de inscriere : 13/07/2012
Multumiri : 78
Niciun avertisment

http://beatles.forummo.com/

Sus In jos

Tutorial Re: Statistici sub forma de tab-uri

Mesaj Scris de Cassius Dio la data de Dum 10 Feb - 21:20

Statistici sub forma de tab-uri (phpBB2)

Exclamare Urmati acesti pasi daca folositi versiunea phpBB2.

1. Mergeti catre:
Panou de Administrare ~> Afisare ~> Template-uri ~> General ~> index_body ~>

2. Identificati acest fragment de cod:
Cod:
<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="catHead" colspan="2" height="28">
      <!-- BEGIN switch_viewonline_link -->
      <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle">{L_WHO_IS_ONLINE}</span>
      <!-- END switch_viewonline_nolink -->
      </td>
   </tr>
   <tr>
      <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
      <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span></td>
   </tr>
   <tr>
      <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}</span></td>
   </tr>
   {L_CONNECTED_MEMBERS}
   {L_WHOSBIRTHDAY_TODAY}
   {L_WHOSBIRTHDAY_WEEK}
   <tr>
      <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
   </tr>
   <!-- BEGIN switch_chatbox_activate -->
   <tr>
      <td class="row1">
         <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
            //<![CDATA[
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup -->
         </span>
      </td>
   </tr>
   <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->
si inlocuiti-l cu:
Cod:
<!-- BEGIN disable_viewonline -->

     <ul id="explore-nav" style="list-style: none;">
                <li id="ex-featured"><a rel="featured" href="#" class="current">Statistici forum</a></li>
                <li id="ex-core"><a rel="core" href="#">Cine este conectat ? </a></li>
                <li id="ex-jquery"><a rel="jquerytuts" href="#">Legenda</a></li>
                <li id="ex-classics" class="last"><a rel="classics" href="#">Tab4</a></li>
        </ul>
 
          <div id="all-list-wrap">
 
            <ul id="featured" style="list-style: none;">
                <li style="display: block; padding: 0px; color:black;"> </li>
<div class="tab1">
      <div id="statistici">
         <p>{TOTAL_POSTS}</p>
         <p>{TOTAL_USERS}</p>
         <p>{NEWEST_USER}</p>
                  </div> </div>
            </ul>
     
              <ul id="core" style="list-style: none;">
                <li style="display: block; padding: 0px; color:black;"><div class="tab2"><table class="forum" width="100%" border="0" cellspacing="1" cellpadding="0">
   
   <tr>
      <td class="row1"><span class="gensmall1">{TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}</span></td>
   </tr>
   {L_CONNECTED_MEMBERS}
   {L_WHOSBIRTHDAY_TODAY}
   {L_WHOSBIRTHDAY_WEEK}

   
   
</table>
      </div>
                </li></ul>
             
     
              <ul id="jquerytuts" style="list-style: none;">
  <li style="display: block; padding: 0px; color:black;"><div class="tab3">   
    <p><span class="legenda">{LEGEND} : {GROUP_LEGEND}</span></p></div> </li>
              </ul>
     
              <ul id="classics" style="list-style: none;">
                <li style="display: block; padding: 0px; color:black;"><div class="tab4"><p>Aici puteti adauga orice alt continut</p></div> </li>

              </ul>
             
            </div> 

<br> <br>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <!-- BEGIN switch_chatbox_activate -->             
  <tr>
      <td class="row1">
         <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
            //<![CDATA[
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup -->
         </span>
      </td>
   </tr>
   <!-- END switch_chatbox_activate -->
</table>
   

<!-- END disable_viewonline -->
3. Faceti click pe butonul Inregistrare pentru a inregistra modificarile efectuate.

4. Mergeti catre:
Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS

5. Adaugati acest cod:
Cod:
 #organic-tabs { background: #253d5a; padding: 2px; margin: 0 0 15px 0; }

    #explore-nav { overflow: hidden; margin: 0 0 10px 0; }
    #explore-nav li {
  width: 151px;
  float: left;
  margin: 0 10px 0 0;
  font-size: 24px;
}
    #explore-nav li.last { margin-right: 0; }
    #explore-nav li a {
  display: block;
  padding: 5px;
  background: #f4f4f4;
  color: black;
  font-size: 10px;
  text-align: center;
  border: 1px solid #ddd;
    font-size:13px;
}
    #explore-nav li a:hover { background-color:#f4f4f4; }
    #jquerytuts, #core, #classics { display: none; }

    #explore-nav li#ex-featured a.current, ul#featured li a:hover {  color: black; }
    #explore-nav li#ex-core a.current, ul#core li a:hover {color: black; }
    #explore-nav li#ex-jquery a.current, ul#jquerytuts li a:hover { color: black; }
    #explore-nav li#ex-classics a.current, ul#classics li a:hover { color: black; } 




.tab1, .tab2, .tab3, .tab4 {
border: 1px solid #ddd;
width: 100%;
padding-top: 0px;
padding-left: 4px;
background: #f4f4f4;
font-size: 12px !important;
}

.tab2, .tab2 span.gensmall, #statistici{
  font-size: 12px !important;
}
6. Pentru a salva modificarile efectuate, faceti click pe butonul Valideaza.

7. Mergeti catre:
Panou de Administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript ~>

8. Adaugati urmatorul cod:
Cod:
$(function() {

    $("#explore-nav li a").click(function() {
       
        // Figure out current list via CSS class
        var curList = $("#explore-nav li a.current").attr("rel");
       
        // List moving to
        var $newList = $(this);
       
        // Set outer wrapper height to height of current inner list
        var curListHeight = $("#all-list-wrap").height();
        $("#all-list-wrap").height(curListHeight);
       
        // Remove highlighting - Add to just-clicked tab
        $("#explore-nav li a").removeClass("current");
        $newList.addClass("current");
       
        // Figure out ID of new list
        var listID = $newList.attr("rel");
       
        if (listID != curList) {
           
            // Fade out current list
            $("#"+curList).fadeOut(300, function() {
               
                // Fade in new list on callback
                $("#"+listID).fadeIn();
               
                // Adjust outer wrapper to fit new list snuggly
                var newHeight = $("#"+listID).height();
                $("#all-list-wrap").animate({
                    height: newHeight
                });
           
            });
           
        }       
       
        // Don't behave like a regular link
        return false;
    });

});
La rubrica Amplasare alegeti Indexul forumului.

9. Faceti click pe butonul Valideaza.

Succes! sunny

Tutorial scris de .razvan

Copyright ˆ Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.

Cassius Dio
Membru onorific
Membru onorific

masculin

Mesaje : 11025
Varsta : 18
Localizare : Strawberry Fields
Data de inscriere : 13/07/2012
Multumiri : 78
Niciun avertisment

http://beatles.forummo.com/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum