Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][SPOILER] i inne taki bbcode
Forum PHP.pl > Forum > Przedszkole
Maze123987
Czy jest możliwość stworzenia jakiegoś tagu w bbcoda'ch który dopiero po "rozwinięciu" pobierałby informacje (screeny) i wyświetlałby je, a w momencie, gdy byłyby one "zwinięte". Chodzi o forum vbulletin.
CuteOne
W programowaniu nie ma rzeczy nie możliwych są tylko trudne do wykonania..

- zastanów się czym jest bbcode a dojdziesz do wniosku, że pod nim możesz wstawiać nawet całe strony
- poczytaj o ajax
Maze123987
Dobrze wiem jak działa bbcode, ale chodzi mi głównie o stworzenie jednego [kod=nazwa]TREŚĆ,screeny, itp.[/kod]

Pod "nazwa" napis, który wyświetlany będzie na przycisku po którym kliknięciu rozwinie się treść zawarta w tym tagu. Z tym, że treść ma ładować się (pobierać dane) dopiero PO rozwinięciu.
peter13135
ale chcesz, żeby przeglądarka pobierała elementu (jak obrazki) dopiero po rozwinięciu, po to żeby zaoszczędzić transfer, czy chcesz, żeby po kliknięciu dopiero zasysała te dane z serwera ? Jeśli to drugie, to tak jak cuteOne napisał - użyj ajaxa
Maze123987
Aby zaoszczędzić transfer tzn. aby strona nie ładowała się długo. W jednym temacie jest dość dużo "iframe'ów", które przy ilości 20< ładują się bardzo długo dlatego chciałbym rozwiązać to w ten sposób.

jest jakiś sposób, aby to zrobić?
Rid
Tak,tworzyć elementy iframe dynamicznie.
by_ikar
Nie musi być ajax. W css nadajesz kontenerowi display:none; i jego treść nie będzie wczytywana a poprzez js nadajesz mu display:block; i wtedy się ta treść wczyta. Skopiuj sobie ten kod:

Kod
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style>
        body { margin: 0; padding: 0; text-align: center; background: #F2F2F2; font-family: Arial; font-size: 13px; line-height: 1.6; color: #444; }
        
        div#container { text-align: left; margin: 0 auto; width: 600px; margin: 30px auto; padding: 20px 20px; border: 1px solid #D2D2D2; -moz-box-shadow: 0 0 30px #CCC; }
        div#container { -webkit-box-shadow: 0 0 30px #CCC; box-shadow: 0 0 30px #CCC; background: #FFF;  background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 15px); }
        div#container { background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); }
        
        div#container h1 { margin: 0; font-size: 30px; font-weight: normal; font-family: "Museo 700", Arial; }
        h1 em { font-size: 50%; letter-spacing: -0.05em; }
        div#container hr { border: none; height: 1px; line-height: 1px; background: #D8D8D8; margin-bottom: 20px; padding: 0; }
        
        div.spoiler, div.quote, div.spoilerwraper { width: 580px; }
        div.spoiler div.quote { display:none; }
        div.quote, div.spoilerwraper { padding: 3px; border: 1px solid #D2D2D2;}
    </style>
</head>
<body>

<div id="container">
    <h1>spoiler</h1><hr>
    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    
    <div class="spoiler">
        <div class="spoilerwraper"><span>Spoiler:</span> <button onClick="spoiler(this);">Pokaż</button></div>
        <div class="quote">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    
    <div class="spoiler">
        <div class="spoilerwraper"><span>Spoiler:</span> <button onClick="spoiler(this);">Pokaż</button></div>
        <div class="quote">
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<script>
function spoiler(obj)
{
    if(obj.parentNode.parentNode.getElementsByTagName('div')[1].style.display != 'block')
    {
        obj.parentNode.parentNode.getElementsByTagName('div')[1].style.display = 'block';
        obj.innerText = '';
        obj.value = 'Ukryj';
    } else
    {
        obj.parentNode.parentNode.getElementsByTagName('div')[1].style.display = 'none';
        obj.innerText = '';
        obj.value = 'Pokaż';
    }
}
</script>
</body>
</html>


Zapisz jako html i otwórz w przeglądarce. Robione tak na szybkiego, więc pewnie jakieś błędy będą, nie mniej koncepcja powinna być dobra.
Rid
Ukrywanie diva ,nie będzie powodowały, że elementy nie będą zapisywane do drzewa DOM.
Dynamiczne tworzenie obiektów iframe, jest najbardziej optymalnym rozwiązaniem i jest odpowiedzią na:
Cytat
Aby zaoszczędzić transfer tzn. aby strona nie ładowała się długo. W jednym temacie jest dość dużo "iframe'ów", które przy ilości 20< ładują się bardzo długo dlatego chciałbym rozwiązać to w ten sposób.

by_ikar
Jak pisałem swojego posta to akurat jeszcze nie było mowy o iframe. Nie wrzucaj iframe na forum czy gdzieś, gdzie używasz bbcode, to jest kompletna porażka. A ukrycie samych obrazków które powiedzmy wczytują się dopiero po kliknięciu w spoiler, to najlepiej ukryć display:none. W przypadku iframów, to dynamiczne ich tworzenie jak najbardziej jest dobrym rozwiązaniem.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.