ilch Forum » Ilch Clan 1.1 » Module und Modifikationen » Progressbar / Statusbar BBcode 2.0

Geschlossen
  1. #1
    User Pic
    Unknown|User gelöschter User
    Hallo,
    hier möchte ich kurz erklären, wie ihr eine Progressbar, wie die auf der unten angegebenen Seite, als BBcode in eure Seite einfügen könnt.

    Vorraussetzungen:
    • BBcode 2.0
    • jQuery UI Theme
    • jQuery (optimal)
    • jQuery UI (optimal)


    Öffne die include/includes/class/bbcode.php nd suche nach:
    //> Darf BB Code [S] dekodiert werden?
    if($this->permitted['s'] == true) {
        //> Format: [s]xxx[/s]
        $this->pattern[] = "%\[s\](.+)\[\/s\]%Uis";
        $this->replace[] = "<strike>\$1</strike>";
    }


    Füge danach folgendes ein:
    //> Format: [s]xxx[/s]
    $this->pattern[] = "%\[progress=([0-9]+)\](.*?)\[/progress\]%Uis";
    $this->replace[] = "
    <div aria-valuenow=\"$1\" aria-valuemax=\"100\" aria-valuemin=\"0\" role=\"progressbar\" class=\"ui-progressbar ui-widget-content ui-corner-all\" style=\"width: 250px; height:20px;\%\">
        <div style=\"width: $1\%; max-width: 100%; height: 20px;\" class=\"ui-progressbar-value ui-widget-header ui-corner-left\"></div><div style=\"text-align: center; margin-top: -19px;\">$2</div>
    </div>";


    Speiche die Datei und lade sie auf deinen FTP.


    Benutze folgenden BBcode für die Progressbar:
    [progress=PROZENT]BESCHRIFTUNG[/progress]

    Beispiel:
    [progress=65]65% Prozessbar zwinker[/progress]



    betroffene Homepage: www.cnagames.de/


    Zuletzt modifiziert von Unknown|User am 15.06.2010 - 12:22:38
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Akira Mitglied
    Registriert seit
    25.01.2007
    Beiträge
    1.369
    Beitragswertungen
    1 Beitragspunkte
    nice gimmic ^^

    thx
    externer Link Visit Us zwinker
    Neue Scripte: JQuery Login usw... Turnier(externer Link Multi-Bewertung, Refferer, Forum Upload, E-Mail login
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Akira Mitglied
    Registriert seit
    25.01.2007
    Beiträge
    1.369
    Beitragswertungen
    1 Beitragspunkte
    habs mal editiert so das mal die JQuery's nciht benutzen muss
    			//> Format: [progress]xxx[/progress] 
    			$this->pattern[] = "%\[progress=([0-9]+)\](.*?)\[/progress\]%Uis"; 
    			$this->replace[] = "$2<table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">
      <tr>
        <td align=\"left\"><table width=\"$1\%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" bgcolor=\"#0066FF\">
          <tr>
            <td>&nbsp;</td>
          </tr>
        </table></td>
      </tr>
    </table>";
    		}
    externer Link Visit Us zwinker
    Neue Scripte: JQuery Login usw... Turnier(externer Link Multi-Bewertung, Refferer, Forum Upload, E-Mail login
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Unknown|User gelöschter User
    Sieht aber weniger schön aus lachen
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Akira Mitglied
    Registriert seit
    25.01.2007
    Beiträge
    1.369
    Beitragswertungen
    1 Beitragspunkte
    ha ja auch keine divs ^^
    externer Link Visit Us zwinker
    Neue Scripte: JQuery Login usw... Turnier(externer Link Multi-Bewertung, Refferer, Forum Upload, E-Mail login
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    StyLe Mitglied
    Registriert seit
    07.09.2009
    Beiträge
    276
    Beitragswertungen
    4 Beitragspunkte
    bei mir geht das nicht zunge
    mache ich irgend was falsch oder so?
    Visit! / Gaming Community - TeamSpeak, WebSpace & Gameserver Sponsoring!
    www.Die-chillout-Lounge.de
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    Unknown|User gelöschter User
    ZitatZitat geschrieben von StyLe

    mache ich irgend was falsch oder so?

    Ich würde jetzt mal so sagen: JA.
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    StyLe Mitglied
    Registriert seit
    07.09.2009
    Beiträge
    276
    Beitragswertungen
    4 Beitragspunkte
    Ja hmmm....
    Habe das gemacht was du gesagt hast bzw. geschrieben hast zwinker
    Visit! / Gaming Community - TeamSpeak, WebSpace & Gameserver Sponsoring!
    www.Die-chillout-Lounge.de
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    Akira Mitglied
    Registriert seit
    25.01.2007
    Beiträge
    1.369
    Beitragswertungen
    1 Beitragspunkte
    ZitatZitat geschrieben von StyLe

    Ja hmmm....
    Habe das gemacht was du gesagt hast bzw. geschrieben hast zwinker


    haste auch Jquery installiert? ^^
    externer Link Visit Us zwinker
    Neue Scripte: JQuery Login usw... Turnier(externer Link Multi-Bewertung, Refferer, Forum Upload, E-Mail login
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    StyLe Mitglied
    Registriert seit
    07.09.2009
    Beiträge
    276
    Beitragswertungen
    4 Beitragspunkte
    Neee
    Download Link pls ^^
    Visit! / Gaming Community - TeamSpeak, WebSpace & Gameserver Sponsoring!
    www.Die-chillout-Lounge.de
    0 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    Unknown|User gelöschter User
    www.jquery.com
    www.jqueryui.com

    // Eigentlich brauchst du nur ein Theme von jQueryUI


    Zuletzt modifiziert von Unknown|User am 17.06.2010 - 20:40:11
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    StyLe Mitglied
    Registriert seit
    07.09.2009
    Beiträge
    276
    Beitragswertungen
    4 Beitragspunkte
    Was muss ich den mit dem Ding machen
    weiß nicht mal was des ist!
    Visit! / Gaming Community - TeamSpeak, WebSpace & Gameserver Sponsoring!
    www.Die-chillout-Lounge.de
    0 Mitglieder finden den Beitrag gut.
  13. #13
    User Pic
    Akira Mitglied
    Registriert seit
    25.01.2007
    Beiträge
    1.369
    Beitragswertungen
    1 Beitragspunkte
    ^^

    dann benutz halt meine lösung ^^
    externer Link Visit Us zwinker
    Neue Scripte: JQuery Login usw... Turnier(externer Link Multi-Bewertung, Refferer, Forum Upload, E-Mail login
    0 Mitglieder finden den Beitrag gut.
  14. #14
    User Pic
    StyLe Mitglied
    Registriert seit
    07.09.2009
    Beiträge
    276
    Beitragswertungen
    4 Beitragspunkte
    // Edit

    Ah okai jetzt zwinker



    Zuletzt modifiziert von StyLe am 18.06.2010 - 12:35:40
    Visit! / Gaming Community - TeamSpeak, WebSpace & Gameserver Sponsoring!
    www.Die-chillout-Lounge.de
    0 Mitglieder finden den Beitrag gut.
  15. #15
    User Pic
    soulreafer Mitglied
    Registriert seit
    26.01.2010
    Beiträge
    42
    Beitragswertungen
    0 Beitragspunkte
    kann man in der version mit iquery auch die farbe ändern? die farbe passt weniger gut in mein forum^^
    ansonsten top erweiterung. 10/10
    Kopf Zu!
    0 Mitglieder finden den Beitrag gut.
  16. #16
    User Pic
    Unknown|User gelöschter User
    Einfach beim unterladen von jQuery UI ein anderes Theme wählen oder ein eigenes zusammenstellen.
    0 Mitglieder finden den Beitrag gut.
  17. #17
    User Pic
    Sunshine Live Mitglied
    Registriert seit
    03.06.2009
    Beiträge
    1.029
    Beitragswertungen
    109 Beitragspunkte
    Hay, ich hab hier zu noch ne frage und zwar wie kann man anzeigen lassen viel prozent es sind den bei uns sieht es so aus..
    beta.warriorofheaven.de/index.php?forum-showposts-191-p1#1533
    WÄre cool wenn da bsp 50% steht oder was man halt eingeben tut
    0 Mitglieder finden den Beitrag gut.
  18. #18
    User Pic
    whazza Mitglied
    Registriert seit
    18.10.2009
    Beiträge
    1.160
    Beitragswertungen
    35 Beitragspunkte
    Ich habe auch mal eine Frage dazu kann es sein das es nur richtig mit Apache läuft und mit Fastcgi nicht.

    Weil auf der Homepage die mit Fastcgi läuft, ist der Balken immer Komplett voll obwohl 50% nur angegeben sind.

    Und auf meinen PC wo ich mit xampp teste was mit Apache läuft funktioniert es richtig.

    Das von Akira funktioniert mit beiden, aber sieht nicht so schön aus.

    mfg
    whazza
    ez-skinz.com
    Unmögliches wird sofort erledigt, auf Wunsch wird auch gehext. Nur Wunder dauern etwas länger.
    0 Mitglieder finden den Beitrag gut.
  19. #19
    User Pic
    entopia Mitglied
    Registriert seit
    27.01.2009
    Beiträge
    17
    Beitragswertungen
    3 Beitragspunkte
    Ist das nicht mehr mit dem Aktuellem Ilch Kompatibel?
    0 Mitglieder finden den Beitrag gut.
  20. #20
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.622
    Beitragswertungen
    1192 Beitragspunkte
    Dies ist nicht abhängig vom Ilch Script, sondern muss in das Modul BBCode 2.0 eingearbeitet werden!
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  21. #21
    User Pic
    entopia Mitglied
    Registriert seit
    27.01.2009
    Beiträge
    17
    Beitragswertungen
    3 Beitragspunkte
    ich hab das in die php eingearbeitet wie es hier steht

    die bar wird angezeigt aber fehlerhaft!


    vorschau:
    guildquest.de/index.php?forum-showposts-59


    Zuletzt modifiziert von entopia am 05.01.2015 - 17:32:53
    0 Mitglieder finden den Beitrag gut.
  22. #22
    User Pic
    Wizzard26 Mitglied
    Registriert seit
    05.03.2009
    Beiträge
    259
    Beitragswertungen
    33 Beitragspunkte
    Das sollte vll mal ein findiger Coder hier sauber schreiben, im Quellcode sieht man das die slashes mit an die style anweisungen übergeben werden.
    0 Mitglieder finden den Beitrag gut.
  23. #23
    User Pic
    entopia Mitglied
    Registriert seit
    27.01.2009
    Beiträge
    17
    Beitragswertungen
    3 Beitragspunkte
    ich habe mal bissel google angeschmissen und in der design index.htm folgendes eingefügt:
    <style type="text/css">
        .ui-progressbar { height:2em; text-align: left; overflow: hidden; }
        .ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
        #progressbar { float: right; margin-right: 100px; width: 120px; margin-top: -30px }
        #progress { position: relative}
    </style>

    Seit dem wird der Erste Balken nun komplett angezeigt,
    jedoch fehlt der balken der die Prozente anzeigen soll völlig und ich vermute das die funktion dafür noch fehlt.
    0 Mitglieder finden den Beitrag gut.
  24. #24
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.622
    Beitragswertungen
    1192 Beitragspunkte
    Ich mache heute oder morgen ein Tutorial (auf CCS Basis) zur Einbindung in BBCode 2.0.
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  25. #25
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.622
    Beitragswertungen
    1192 Beitragspunkte
    So hier mal die Umsetzung für das Einfügen einer Statusbar / Progressbar im BBCode 2.0 auf reiner CSS Basis.

    Format: [status=XX]YY[/status] (XX = Zahl von 0-100 ohne Prozentzeichen / YY = Bescheibung)

    Beispiel: [status=75]Ich habe zwei Drittel schon erreicht[/status]

    Bilder: +


    Folgenden Code (Zeile 728-730) in include/includes/class/bbcode.php einfügen:

            //> Darf BB Code [S] dekodiert werden?
            if($this->permitted['s'] == true) {
                //> Format: [s]xxx[/s]
                $this->pattern[] = "%\[s\](.+)\[\/s\]%Uis";
                $this->replace[] = "<strike>\$1</strike>";
            }
    		
    		//> Format: [status=XX]YYY[/status] (XX = Zahl von 0-100 / YYY Bescheibung)
    		$this->pattern[] = "%\[status=([0-9]|[1-9][0-9]|100)\](.+)\[\/status\]%Uis";
    		$this->replace[] = "<div class=\"status\"><div class=\"status-desc\">$2</div><div class=\"status-stat\">$1%</div><div class=\"status-bar\" style=\"width:$1%\"></div></div>";
    
            ###############################################
    
    
            //> Darf BB Code [LEFT] dekodiert werden?
            if($this->permitted['left'] == true) {
                //> Format: [left]xxx[/left]
                $this->pattern[] = "%\[left\](.+)\[\/left\]%Uis";
                $this->replace[] = "<div align=\"left\">\$1</div>";
            }


    Nun noch in deine style.css (im Ordner include/designs/) die CSS-Formatierung des Balkens einfügen. Diese kann dann in Form und Farbe angepasst werden.

    .status {
    	font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
    	line-height: 15px;
    	color: #fff;
    	text-align: left;
    	width: 90%;
    	padding: 4px;
    	background: rgba(0, 0, 0, 0.25);
    	border-radius: 6px;
    	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    }
    		
    .status-stat {
    	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
    	float: right;
    	padding-right: 5px;
    	text-align: right;
    }
    
    .status-desc {
    	text-shadow: 0 0 2px rgba(0, 0, 0, 1);
    	font-style: italic;
    	position: absolute;
    	margin-top:-15px;
    	text-align: left;
    }
    
    .status-bar {
    	height: 16px;
    	border-radius: 4px;
    	background-image: -webkit-linear-gradient( top, rgba(255, 255, 255, .25), rgba(0,0,0,.2)), -webkit-linear-gradient( left, #900, #090);
    	background-image: -moz-linear-gradient( top, rgba(255, 255, 255, .25), rgba(0,0,0,.2)), -moz-linear-gradient( left, #900, #090);
    	background-image: -ms-linear-gradient( top, rgba(255, 255, 255, .25), rgba(0,0,0,.2)), -ms-linear-gradient( left, #900, #090);
    	background-image: -o-linear-gradient( top, rgba(255, 255, 255, .25), rgba(0,0,0,.2)), -o-linear-gradient( left, #900, #090);
    	background-image: linear-gradient( top, rgba(255, 255, 255, .25), rgba(0,0,0,.2)), linear-gradient( left, #900, #090);
    	-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
    	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
    }


    FERTIG!
    rules :: doku :: faq :: linkus
    1 Mitglieder finden den Beitrag gut.
  26. #26
    User Pic
    Maretz Hall Of Fame
    Registriert seit
    28.02.2009
    Beiträge
    740
    Beitragswertungen
    74 Beitragspunkte
    Hier eine komplette Lösung :

    github.com/Maretz/Erweiterung-Ilch-BBCode-2.0

    Lokal läuft es mal gut.... lächeln
    Allerdings in einfacher Form mit der Progressbar


    Zuletzt modifiziert von Maretz am 06.01.2015 - 21:56:36
    0 Mitglieder finden den Beitrag gut.
  27. #27
    User Pic
    entopia Mitglied
    Registriert seit
    27.01.2009
    Beiträge
    17
    Beitragswertungen
    3 Beitragspunkte
    Tausend dank!

    Funktioniert!
    jedoch ein kleiner bug;

    man kann bis 99% anzeigen lassen und 100% dann nicht mehr!


    Zuletzt modifiziert von entopia am 07.01.2015 - 04:31:56
    0 Mitglieder finden den Beitrag gut.
  28. #28
    User Pic
    Maretz Hall Of Fame
    Registriert seit
    28.02.2009
    Beiträge
    740
    Beitragswertungen
    74 Beitragspunkte
    Ok. Dann schaut man nochmals.Es kommen ja noch ein, zwei Funktionen dazu... lächeln

    Das von Lord|Schirmer sieht zwar stylischer aus, nur lässt sich dies so schwer einbauen,zumindest mit dem Background.Da wäre das Einrichten der Farbauswahl in den Einstellungen ein Graus... lächeln


    Zuletzt modifiziert von Maretz am 07.01.2015 - 18:41:34
    0 Mitglieder finden den Beitrag gut.
  29. #29
    User Pic
    Bigboss079 Mitglied
    Registriert seit
    03.04.2015
    Beiträge
    13
    Beitragswertungen
    0 Beitragspunkte
    Hallo zusammen ,
    Habe es genau so wie hier beschrieben gemacht!
    geht auch alle super nur,
    mir fehlt das icon in der bbcode leiste, wie hier wenn man zb: ein Beitrag schreiben will.
    wie gesagt der code an sich geht alles nur kein drück Bild :D^^sorry
    was müsste ich machen damit in der "bbleiste" ein shortcut bild für Progressbar drin ist?


    Zuletzt modifiziert von Bigboss079 am 12.04.2015 - 12:42:59
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Module und Modifikationen

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten