HTML objekt einfügen

Jason Gast #4974140 
Hi,

ich bin neuling in HTML und wollte gerade eine Anzeige auf meiner 
Webseite einfügen.

Hier gibt es ein beispiel wie es funktioniert (recht simpel):
https://www.jqwidgets.com/jseditor/?key=jqwidgets-gauge-template

1
<HTML>

2
  <HEAD>

3
  </HEAD>

4
  <BODY>

5
        <div id="gauge"></div>

6
  </BODY>

7
</HTML>


Aber wie mache ich es nun, wenn ich eine zweite Anzeige einfügen will, 
die id muss dabei ja unique sein (?).

Grüße
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Langsamer Modus Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Melden Danke
Daniel A. #4974211 
Gib allen Elementen die gleiche Klasse, und nutze js seitig ne Schleife 
um aus jedem ne Anzeige zu machen. Als nächstes wirst du dann 
hoffentlich merken, wie unpraktisch es ist immer zahlreiche Elemente im 
code Anzusprechen, wenn man nur einen Wert updaten will, und den Nutzen 
von jQuery in frage stellen.
Antwort Zitieren Bearbeiten Löschen Melden Danke
Daniel A. #4974788 
Hier mal ein Beispiel.

HTML:
1
<!doctype html>

2
<html>

3
  <head>

4
    <title>Gauge Template</title>

5
  </head>

6
  <body>

7
    <div class="gauge" id="a"></div>

8
    <div class="gauge" id="b"></div>

9
    <div class="gauge" id="c"></div>

10
  </body>

11
</html>


JS:
1
$(document).ready(function () {

2
    Array.prototype.slice.call($('.gauge')).map($).forEach(function(e){

3
        e.jqxGauge({

4
            ranges: [{ startValue: 0, endValue: 130, style: { fill: '#4cb848', stroke: '#4cb848' }, startDistance: 0, endDistance: 0 },

5
                     { startValue: 130, endValue: 180, style: { fill: '#fad00b', stroke: '#fad00b' }, startDistance: 0, endDistance: 0 },

6
                     { startValue: 180, endValue: 220, style: { fill: '#e53d37', stroke: '#e53d37' }, startDistance: 0, endDistance: 0}],

7
            cap: { size: '5%', style: { fill: '#2e79bb', stroke: '#2e79bb'} },

8
            border: { style: { fill: '#8e9495', stroke: '#7b8384', 'stroke-width': 1 } },

9
            ticksMinor: { interval: 5, size: '5%' },

10
            ticksMajor: { interval: 20, size: '10%' },       

11
            labels: { position: 'outside', interval: 20 },

12
            pointer: { style: { fill: '#2e79bb' }, width: 5 },

13
            animationDuration: 1500

14
        });

15
    });

16
    setTimeout(function(){

17
      $('#a').jqxGauge('value',60);

18
    },1000);

19
    setTimeout(function(){

20
      $('#b').jqxGauge('value',160);

21
    },2000);

22
    setTimeout(function(){

23
      $('#c').jqxGauge('value',200);

24
    },3000);

25
});
Antwort Zitieren Bearbeiten Löschen Melden Danke
Thread beobachten

Antwort schreiben

Eine eigene Frage? Dieser Thread ist über 9 Jahre alt. Stell sie in einem eigenen Thread – dort lesen mehr Leute mit, und sie wird öfter und schneller beantwortet.

Neuen Thread starten

Eine Lösung, Ergänzung oder Rückmeldung zu diesem Thread? Dann antworte hier.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Dein Name und deine E-Mail-Adresse

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.