Difference between revisions of "Include JSXGraph together with jQuery"

From JSXGraph Wiki
Jump to: navigation, search
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
== Including JSXGraph into HTML ==
 
== Including JSXGraph into HTML ==
  
For including JSXGraph into HTML, three files are necessary:
+
For including JSXGraph into HTML, two files are necessary:
* jquery.min.js from [http://jquery.com http://jquery.com] or [http://jsxgraph.uni-bayreuth.de/distrib/jquery.min.js local copy]
 
 
* jsxgraphcore.js from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js]
 
* jsxgraphcore.js from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js]
 
* jsxgraph.css from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css]
 
* jsxgraph.css from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css]
Line 12: Line 11:
 
<head>
 
<head>
 
  <link rel="stylesheet" type="text/css" href="jsxgraph.css" />
 
  <link rel="stylesheet" type="text/css" href="jsxgraph.css" />
<script type="text/javascript" src="jquery.min.js"></script>
 
 
  <script type="text/javascript" src="jsxgraphcore.js"></script>
 
  <script type="text/javascript" src="jsxgraphcore.js"></script>
 
</head>
 
</head>
Line 22: Line 20:
 
<head>
 
<head>
 
  <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
 
  <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jquery.min.js"></script>
 
 
  <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
  <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
</head>
 
</head>
Line 35: Line 32:
 
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
 
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
 
<script type="text/javascript">
 
<script type="text/javascript">
  var board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 50, unitY: 50});
+
  var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 5, -5]});
 
</script>
 
</script>
 
</source>
 
</source>
Line 43: Line 40:
 
<html>
 
<html>
 
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
 
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jquery.min.js"></script>
 
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
 
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
 
<script language="JavaScript">
 
<script language="JavaScript">
  board = JXG.JSXGraph.initBoard('jsxgbox', {originX: 250, originY: 250, unitX: 50, unitY: 50});
+
  board = JXG.JSXGraph.initBoard('jsxgbox', {boundingbox: [-5, 5, 5, -5]});
 
  g1 = board.createElement('point', [1, -1], {style:6});
 
  g1 = board.createElement('point', [1, -1], {style:6});
 
  g2 = board.createElement('point', [2.5, -2], {style:6});
 
  g2 = board.createElement('point', [2.5, -2], {style:6});
Line 65: Line 61:
 
<source lang="xml">
 
<source lang="xml">
 
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
 
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jquery.min.js"></script>
 
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
 
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
 
<script language="JavaScript">
 
<script language="JavaScript">
  board = JXG.JSXGraph.initBoard('jsxgbox', {originX: 250, originY: 250, unitX: 50, unitY: 50});
+
  board = JXG.JSXGraph.initBoard('jsxgbox', {boundingbox: [-5, 5, 5, -5]});
 
  g1 = board.createElement('point', [1, -1], {style:6});
 
  g1 = board.createElement('point', [1, -1], {style:6});
 
  g2 = board.createElement('point', [2.5, -2], {style:6});
 
  g2 = board.createElement('point', [2.5, -2], {style:6});
Line 86: Line 81:
 
</source>
 
</source>
  
[[Category:Examples]]
+
===Further examples===
 +
[[Circles on circles]] contains an advanced example using the excellent package of widgets [http://jqueryui.com jQuery UI].
 +
 
 +
[[Category:Austragungsstueberl]]

Latest revision as of 12:36, 31 January 2013

Including JSXGraph into HTML

For including JSXGraph into HTML, two files are necessary:

You can either download these three files and use the local copy or you can use the online version.

Usage of a local copy

If you want to include a local copy of JSXGraph in your HTML file then you have to write the following lines into the document head:

<head>
 <link rel="stylesheet" type="text/css" href="jsxgraph.css" />
 <script type="text/javascript" src="jsxgraphcore.js"></script>
</head>

Usage of the online copy

If you want to include the online of JSXGraph in your HTML file then you have to write the following lines into the document head:

<head>
 <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
 <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
</head>

Include a drawing panel into the HTML

The geometric construction which is displayed by JSXGraph resides in an HTML element. Usually, a div-element is taken. This division needs an ID. Using this ID, we declare this element to be a drawing panel of JSXGraph.

The following code has to be placed into the body part of an HTML file:

<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
 var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 5, -5]});
</script>

We can use as many different drawing panels as we like in one HTML file.

Example

<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
<script language="JavaScript"> 			
 board = JXG.JSXGraph.initBoard('jsxgbox', {boundingbox: [-5, 5, 5, -5]});
 g1 = board.createElement('point', [1, -1], {style:6});
 g2 = board.createElement('point', [2.5, -2], {style:6});
 g3 = board.createElement('point', [1, -3], {style:5});
 g4 = board.createElement('point', [2.5, -4], {style:5});
 g5 = board.createElement('point', [-4, 1], {style:5,name:''});

 c1 = board.createElement('curve', [
       function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },
       function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },
       0,function(){ return Math.PI*7*Math.abs(g4.X());}],{
          strokeWidth:function(){return g5.Y()*3;},
          strokeOpacity:function(){return g5.Y()*0.6;}
         });
</script>

Further examples

Circles on circles contains an advanced example using the excellent package of widgets jQuery UI.