Webboard

Webboard > Wsparcie MyBB > Style, szablony i grafika > Dynamiczne ukrycie/rozwinięcie zakładki po kliknięciu
Pełna wersja: Dynamiczne ukrycie/rozwinięcie zakładki po kliknięciu
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.

P3neR

05.11.2018, 13:06
Adres forum:
[http://webmybb.ct8.pl/index.php]

Wersja silnika:
[1.8.19]

Opis problemu:
[Chciałbym dodać 3 zakladki w profilu Ogólne, Dodatkowe, Kontakt które po kliknieciu w która zakladke rozsuwa sie lub sie zmienia. W ogólnych Informacje o Nick, Dodatkowe informacje o Nick, i Kontakt] Tutaj proszę ssy gdzie ma sie to znajdować. [attachment=14291]

Ardex

05.11.2018, 13:16
Proste do zrobienia w jQuery, próbowałeś?
Wklej tu szablon member_profile i member_profile_contact_details

P3neR

05.11.2018, 13:20
Kod:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1804"></script>
</head>
<body>
{$header}
<section id="profile">
<div class="header">
<div class="upper">
<div class="row">
<h1>{$formattedname}</h1>
<h2>{$displaygroup['title']}</h2>
</div>
{$sendpm}
</div>
<div class="lower">
<div class="avatar">{$avatar}</div>
<div class="info">
<div class="row">
<h3>Zawartość</h3>
{$memprofile['postnum']}
</div>
<div class="row">
<h3>Rejestracja</h3>
{$memregdate}
</div>
<div class="row">
<h3>Ostatatnia wizyta</h3>
{$memlastvisitdate}
</div>
</div>
{$findposts}
</div>
</div>
<!-- Header/Main -->
<div class="main">
<div class="row left">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="pborder">
<tr>
<td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong></td>
</tr>
<tr>
<td class="trow1"><strong>Tytuł:</strong></td>
<td class="trow1">{$usertitle}</td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->joined}</strong></td>
<td class="trow1">{$memregdate}</td>
</tr>
{$reputation}
{$warning_level}
</table>
{$contact_details}
{$profilefields}
{$modoptions}
{$adminoptions}
</div>
<!-- Left/Right -->
<div class="row right">
{$lastpost}
</div>
</div>
</section>

{$footer}
</body>
</html>
Kod:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="pborder">
<tr>
<td colspan="2" class="thead"><strong>{$lang->users_contact_details} </strong></td>
</tr>
<colgroup>
<col style="width: 30%;" />
</colgroup>
{$website}
{$sendemail}
{$contact_fields['icq']}
{$contact_fields['aim']}
{$contact_fields['yahoo']}
{$contact_fields['skype']}
{$contact_fields['google']}
</table>

Ardex

05.11.2018, 13:56
member_profile zamień na to
Kod:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1804"></script>
</head>
<body>
{$header}
<section id="profile">
<div class="header">
<div class="upper">
<div class="row">
<h1>{$formattedname}</h1>
<h2>{$displaygroup['title']}</h2>
</div>
{$sendpm}
</div>
<div class="lower">
<div class="avatar">{$avatar}</div>
<div class="info">
<div class="row">
<h3>Zawartość</h3>
{$memprofile['postnum']}
</div>
<div class="row">
<h3>Rejestracja</h3>
{$memregdate}
</div>
<div class="row">
<h3>Ostatatnia wizyta</h3>
{$memlastvisitdate}
</div>
</div>
{$findposts}
</div>
</div>
<!-- Header/Main -->
<div class="main">
    <div class="nav_profile_info_links">
        <span class="member_profile_nav_link_1">Podstawowe</span>
        <span class="member_profile_nav_link_2">Dodatkowe</span>
        <span class="member_profile_nav_link_3">Kontakt</span>
    </div>
<div class="row left">
    <div class="member_profile_nav_content_1 member_profile_nav_content_2">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="pborder">
<tr>
<td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong></td>
</tr>
<tr>
<td class="trow1"><strong>Tytuł:</strong></td>
<td class="trow1">{$usertitle}</td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->joined}</strong></td>
<td class="trow1">{$memregdate}</td>
</tr>
{$reputation}
{$warning_level}
</table>
</div>
<div class="member_profile_nav_content_3">
{$contact_details}
</div>
{$profilefields}
{$modoptions}
{$adminoptions}
<script>
$(document).ready(function() {
    $(".nav_profile_links span").click(function() {
      var clickedElementClassName = $(this).attr("class");
      var numberOfClickedElement = clickedElementClassName.match(/\d/)
      
      $(".member_profile_active").removeClass("member_profile_active").fadeOut(500);
      
      $(".member_profile_nav_content_"+numberOfClickedElement).addClass("member_profile_active").slideDown(600)
    })
})
</script>
</div>
<!-- Left/Right -->
<div class="row right">
{$lastpost}
</div>
</div>
</section>

{$footer}
</body>
</html>
i do arkusz css
Kod:
.nav_profile_info_links {
    font-size: 30px;
}
.member_profile_nav_content_1, .member_profile_nav_content_2, .member_profile_nav_content_3 {
  display: none;
}

Przyciski Podstawowe i Dodatkowe pokazują to samo, bo nie wiem czym one się miały różnić. Buttony te wymagają ostylowania ale z tym sobie już chyba poradzisz.

edit, zjadłem parę rzeczy, teraz jest poprawny kod wrzucony

P3neR

05.11.2018, 14:15
Jest wszystko tak jak napisałeś lecz gdy klikam na podstawowe to nie ma zadnych informacji tak samo jak i w reszcie ;/

Ardex

05.11.2018, 14:23
Zobacz tak
Kod:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1804"></script>
</head>
<body>
{$header}
<section id="profile">
<div class="header">
<div class="upper">
<div class="row">
<h1>{$formattedname}</h1>
<h2>{$displaygroup['title']}</h2>
</div>
{$sendpm}
</div>
<div class="lower">
<div class="avatar">{$avatar}</div>
<div class="info">
<div class="row">
<h3>Zawartość</h3>
{$memprofile['postnum']}
</div>
<div class="row">
<h3>Rejestracja</h3>
{$memregdate}
</div>
<div class="row">
<h3>Ostatatnia wizyta</h3>
{$memlastvisitdate}
</div>
</div>
{$findposts}
</div>
</div>
<!-- Header/Main -->
<div class="main">
    <div class="nav_profile_info_links">
        <span class="member_profile_nav_link_1">Podstawowe</span>
        <span class="member_profile_nav_link_2">Dodatkowe</span>
        <span class="member_profile_nav_link_3">Kontakt</span>
    </div>
<div class="row left">
    <div class="member_profile_nav_content_1 member_profile_nav_content_2">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="pborder">
<tr>
<td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong></td>
</tr>
<tr>
<td class="trow1"><strong>Tytuł:</strong></td>
<td class="trow1">{$usertitle}</td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->joined}</strong></td>
<td class="trow1">{$memregdate}</td>
</tr>
{$reputation}
{$warning_level}
</table>
</div>
<div class="member_profile_nav_content_3">
{$contact_details}
</div>
{$profilefields}
{$modoptions}
{$adminoptions}
<script>
$(document).ready(function() {
    $(".nav_profile_info_links span").click(function() {
      var clickedElementClassName = $(this).attr("class");
      var numberOfClickedElement = clickedElementClassName.match(/\d/)
      
      $(".member_profile_active").removeClass("member_profile_active").fadeOut(500);
      
      $(".member_profile_nav_content_"+numberOfClickedElement).addClass("member_profile_active").slideDown(600)
    })
})
</script>
</div>
<!-- Left/Right -->
<div class="row right">
{$lastpost}
</div>
</div>
</section>

{$footer}
</body>
</html>

P3neR

05.11.2018, 14:30
Dziękuje dziala

P3neR

05.11.2018, 15:33
 Dałoby rade aby w ogolnych informacje wysuwały sie pod ogólnymi ?
Kod:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1804"></script>
</head>
<body>
{$header}
<section id="profile">
<div class="header">
<div class="upper">
<div class="row">
<h1>{$formattedname}</h1>
<h2>{$displaygroup['title']}</h2>
</div>
{$sendpm}
</div>
<div class="lower">
<div class="avatar">{$avatar}</div>
<div class="info">
<div class="row">
<h3>Zawartość</h3>
{$memprofile['postnum']}
</div>
<div class="row">
<h3>Rejestracja</h3>
{$memregdate}
</div>
<div class="row">
<h3>Ostatatnia wizyta</h3>
{$memlastvisitdate}
</div>
</div>
{$findposts}
</div>
</div>
<!-- Header/Main -->
<div class="main">
<div class="row left">
<div class="nav_profile_info_links">
      <a href="#stats" aria-controls="stats" role="tab" data-toggle="tab"><span class="member_profile_nav_link_1"><i class="fa fa-tasks"></i>&nbsp Ogólne</span>
       <a href="#overview" aria-controls="overview" role="tab" data-toggle="tab"><span class="member_profile_nav_link_2"><i class="fa fa-user"></i>&nbsp Dodatkowe</span>
       <a href="#contact" aria-controls="contact" role="tab" data-toggle="tab"><span class="member_profile_nav_link_3"><i class="fa fa-envelope"></i>&nbsp Kontakt</span>
   </div>
   <div class="member_profile_nav_content_1 member_profile_nav_content_2">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="pborder">
<tr>
<td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong></td>
</tr>
<tr>
<td class="trow1"><strong>Tytuł:</strong></td>
<td class="trow1">{$usertitle}</td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->joined}</strong></td>
<td class="trow1">{$memregdate}</td>
</tr>
{$reputation}
{$warning_level}
</table>
</div>
<div class="member_profile_nav_content_3">
{$contact_details}
</div>
{$profilefields}
{$modoptions}
{$adminoptions}
<script>
$(document).ready(function() {
   $(".nav_profile_info_links span").click(function() {
     var clickedElementClassName = $(this).attr("class");
     var numberOfClickedElement = clickedElementClassName.match(/\d/)
     
     $(".member_profile_active").removeClass("member_profile_active").fadeOut(500);
     
     $(".member_profile_nav_content_"+numberOfClickedElement).addClass("member_profile_active").slideDown(600)
   })
})
</script>
</div>
<!-- Left/Right -->
<div class="row right">
{$lastpost}
</div>
</div>
</section>

{$footer}
</body>
</html>

Ardex

05.11.2018, 17:59
Spróbuj tak
Kod PHP:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1804"></script>
</head>
<body>
{$header}
<section id="profile">
<div class="header">
<div class="upper">
<div class="row">
<h1>{$formattedname}</h1>
<h2>{$displaygroup['title']}</h2>
</div>
{$sendpm}
</div>
<div class="lower">
<div class="avatar">{$avatar}</div>
<div class="info">
<div class="row">
<h3>Zawartość</h3>
{$memprofile['postnum']}
</div>
<div class="row">
<h3>Rejestracja</h3>
{$memregdate}
</div>
<div class="row">
<h3>Ostatatnia wizyta</h3>
{$memlastvisitdate}
</div>
</div>
{$findposts}
</div>
</div>
<!-- Header/Main -->
<div class="main">
<div class="row left">
      <a href="#stats" aria-controls="stats" role="tab" data-toggle="tab"><span class="member_profile_nav_link_1"><i class="fa fa-tasks"></i>&nbsp Ogólne</span> 
        <div class="member_profile_nav_content_1 member_profile_nav_content_2">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="pborder">
<tr>
<td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong></td>
</tr>
<tr>
<td class="trow1"><strong>Tytuł:</strong></td>
<td class="trow1">{$usertitle}</td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->joined}</strong></td>
<td class="trow1">{$memregdate}</td>
</tr>
{$reputation}
{$warning_level}
</table> 
</div>
       <a href="#overview" aria-controls="overview" role="tab" data-toggle="tab"><span class="member_profile_nav_link_2"><i class="fa fa-user"></i>&nbsp Dodatkowe</span> 
       <a href="#contact" aria-controls="contact" role="tab" data-toggle="tab"><span class="member_profile_nav_link_3"><i class="fa fa-envelope"></i>&nbsp Kontakt</span>
        <div class="member_profile_nav_content_3">
{$contact_details}
</div>

   

{$profilefields} 
{$modoptions}
{$adminoptions}
<script>
$(document).ready(function() {
   $('[class^="member_profile_nav_link_"]').click(function() {
     var clickedElementClassName = $(this).attr("class");
     var numberOfClickedElement = clickedElementClassName.match(/\d/)
     
     $(".member_profile_active").removeClass("member_profile_active").fadeOut(500);
     
     $(".member_profile_nav_content_"+numberOfClickedElement).addClass("member_profile_active").slideDown(600)
   })
})
</script>
</div>
<!-- Left/Right -->
<div class="row right">
{$lastpost}
</div>
</div>
</section>

{$footer}
</body>
</html> 

P3neR

05.11.2018, 19:17
A z dodatkowymi aby w dół sie rozuswały to jak ? :C
Dobra zrobiłem sam dziękuje jeszcze raz za pomoc !!!
Webboard > Wsparcie MyBB > Style, szablony i grafika > Dynamiczne ukrycie/rozwinięcie zakładki po kliknięciu