HTML objekt einfügen

Jason Gast #4974140
Lesenswert?
• ▲
▼ 
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 Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Daniel A. #4974211
Lesenswert?
• ▲
▼ 
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 Beitrag melden
Daniel A. #4974788
Lesenswert?
• ▲
▼ 
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 Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren