Forum: PC-Programmierung HTML objekt einfügen


HTML objekt einfügen
von Jason (Gast)

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

Beitrag melden Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Markierten Text zitieren Antwort Antwort mit Zitat
Re: HTML objekt einfügen
von Daniel A. (daniel-a)

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.

Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
Re: HTML objekt einfügen
von Daniel A. (daniel-a)

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
});

Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
Thread beobachten | Seitenaufteilung abschalten
Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.