tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von Quaese
ERLEDIGT
NEIN
ANTWORTEN
4
ZUGRIFFE
1104
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 29.03.10 12:31 #1
    walle_89 walle_89 ist offline Mitglied Silber
    Registriert seit
    Apr 2007
    Beiträge
    70
    Hallo!
    Ich habe hier ein kleines Problem mit jQuery, wobei manche Parameter nicht an die Methoden weitergegeben werden ...

    index.htm
    HTML-Code:
    [...]
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="settings.js"></script>
<script type="text/javascript" src="penalty.js"></script>
<script type="text/javascript">
<!--

var object = {
	"background": {"color": color.background, "format": format.background},
	"goal":	{"color": color.goal, "format": format.goal},
	"goalkeeper": {"color": color.goalkeeper, "format": format.goalkeeper},
	"ball":	{"color": color.ball, "format": format.ball}
};

try {
	$(document).ready(function(){
		$('#field').get(0).init(object);
	});
} catch(exception) {
  $.log(exception);
}

-->
</script>
<body>
<canvas id="field" width="500" height="500"></canvas>
[...]
    P.S. Das JSON-Object enhält noch Daten aus settings.js

    Meine Überlegung war, dass ich mit get(0) das Object <canvas> hole und gleichzeitig noch das Plugin init() mit dem Parameter object übergebe. Dazu die penalty.js.

    penalty.js
    HTML-Code:
    (function ($) {

$.fn.init = function (object) {
	if (this.getContext) {
		var ctx = this.getContext('2d');
		// Draw all the objects and check if the execution was successful.
		if (!draw(object)) {
			throw new Error("Objects could not be drawn!");
		}
	} else {
		throw new Error("Canvas could not get initialised!");
	}
};

$.log = function (message) {
  if (window.console) {
     console.debug(message);
  } else {
     alert(message);
  }
};

})(jQuery);
    Bei init() greife ich auf das HTML-Object <canvas> mit this zu und versuche zu prüfen, ob das Object richtig übergeben wurde und ob der Browser HTML5-Canvas überhaupt unterstützt. Ferner, wenn es klappt, wird die draw Methode auf die übergebene Objects angewendet.

    Aber dies will überhaupt nicht funktionieren - es wird die Fehlermeldung "Canvas could not get initialised!" ausgegeben und lässt darauf schließen, dass die Referenzen nicht stimmen ... aber was mache ich falsch? Wie macht man das denn richtig? Vielen Dank schonmal!
     
    Zitieren Zitieren
  2. 29.03.10 21:21 #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    versuch mal, das PlugIn ohne get(0) aufzurufen:
    Code :
    1
2
3

    $(document).ready(function(){
  $('#field').init(object);
});

    Das get(0) wird stattdessen innerhalb des PlugIns verwendet:
    Code :
    1
2
3
4
5
6
7
8
9
10
11

    $.fn.init = function (object) {
  if (this[B].get(0)[/B].getContext) {
    var ctx = this[B].get(0)[/B].getContext('2d');
    // Draw all the objects and check if the execution was successful.
    if (!draw(object)) {
      throw new Error("Objects could not be drawn!");
    }
  } else {
    throw new Error("Canvas could not get initialised!");
  }
};


    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  3. 29.03.10 22:09 #3
    walle_89 walle_89 ist offline Mitglied Silber
    Registriert seit
    Apr 2007
    Beiträge
    70
    Jetzt brummt der FireBug:
    "this.get is not a function
    if (this.get(0).getContext) { "

    Anscheinend wird die Referenz trotzdem falsch geliefert - oder sollte ich allgemein das Grundkonzept (=Vorgehensweise) anders gestalten? An sich habe ich mich mit meiner Ausführung an das folgende Tutorial gehalten => die externe JS-Datei wird genauso aufgebaut ... Hmm..
     
    Zitieren Zitieren
  4. 30.03.10 09:29 #4
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    hier eine Variante, die bei mir funktioniert.
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

    <html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
  <!--
(function($){
  $.fn.myInit = function(options) {
    // Closure - VORSICHT: this entspricht $(this)
    var _this = this;
 
    // Canvas-Objekt
    var cvs = this.get(0);
 
    // IE
    if ((!cvs.getContext) && (typeof G_vmlCanvasManager != "undefined"))
      cvs = G_vmlCanvasManager.initElement(cvs);
 
    // Optionen-Objekt erweitern
    var opts = jQuery.extend(opts, {
      ctx: null,
      h: 300,
      w: 300
      // weitere Default-Optionen
    }, options);
 
    var init = function(){
      if (cvs.getContext) {
        cvs.height = opts.h;
        cvs.width = opts.w;
        cvs.style.height = opts.h + "px";
        cvs.style.width = opts.w + "px";
        cvs.style.border = "1px solid #000";
 
        opts.ctx = cvs.getContext('2d');
        // Draw all the objects and check if the execution was successful.
        /*if (!draw(object)) {
          throw new Error("Objects could not be drawn!");
        }*/
      } else {
        throw new Error("Canvas could not get initialised!");
      }
    };
 
    // Public:
    this.drawIt = function(color){
      opts.ctx.fillStyle = color; //"#c00";
      opts.ctx.fillRect(10, 20, 100, 60);
 
      return this;
    };
 
    this.clear = function(){
      opts.ctx.clearRect(0, 0, opts.w, opts.h);
 
      return this;
    };
 
    // Canvas intitialisieren
    init();
 
    // ToDo: Sonstiger Code
 
    // Referenz zurückliefern, um die Kette nicht zu unterbrechen
    return this;
  };
})(jQuery);
 
 
$(function(){
  oCvs = $('#cvs_id').myInit({
    w: 400,
    h: 200
  });
  // Zeitverzögert aufrufen wg. IE
  window.setTimeout(function(){oCvs.drawIt('#c00');}, 10);
});
 //-->
</script>
 
</head>
<body>
<button onclick="oCvs.clear().drawIt('#0c0');">drawIt</button>
<canvas id="cvs_id"></canvas>
</body>
</html>

    Ciao
    Quaese
    walle_89 bedankt sich. 
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  5. 30.03.10 09:54 #5
    walle_89 walle_89 ist offline Mitglied Silber
    Registriert seit
    Apr 2007
    Beiträge
    70
    Vielen vielen Dank! Habe zwar jetzt keine Zeit, werde mir das im Laufe des Tages aber ganz genau anschauen. Ich danke dir erstmal!
     
    Zitieren Zitieren
« Ladestatus einer JavaScript-Datei ermitteln | CSS bei onclick ändern »

Ähnliche Themen

  1. Jquery Parameter über <a href=""> übergeben...
    Von SonMiko im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 07.12.10, 12:20
  2. Google Maps - schmeißt jQuery Plugins raus ****
    Von Herr_M im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 08.10.10, 11:23
  3. [jQuery] Facebook-Social Plugins mit Sidebar-Button sichtbar machen
    Von GangXtaBoiii im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 29.06.10, 14:58
  4. jQuery noConflict Mode & jQuery Plugins?
    Von josDesign im Forum Javascript & Ajax
    Antworten: 6
    Letzter Beitrag: 27.05.10, 22:10