mozilla

Revision 165336 of Example Sticky Notes

  • Revision slug: XBL/XBL_1.0_Reference/Example_Sticky_Notes
  • Revision title: Example Sticky Notes
  • Revision id: 165336
  • Created:
  • Creator: V K
  • Is current revision? No
  • Comment /* notes.html */

Revision Content

notes.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
 "http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>XBL Demo : Sticky Notes</title>
<meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
 background-color: #FFFFFF;
 color: #000000;
 font: 1em Verdana, sans-serif;
}
h1 {
 font-size: 1.5em;
}
h2 {
 font-size: 1.2em;
}
/* Binding: */
.sticker {
 -moz-binding: url(notes.xml#default);
}
</style> 
</head>

<body>

<h1><a href="http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference">XBL</a> Demo :
    Sticky Notes</h1>


<div class="sticker"><p>ACME, Inc. fax - respond today.</p></div>

<div class="sticker"><p>Don't forget the eggs!</p></div>

<div class="sticker"><p>The new project - who's on charge?</p></div>

<div class="sticker"><p>Learn more about XBL.</p></div>


<p style="clear: left"><a 
  href="http://validator.w3.org/check?uri=referer"><img 
  src="http://www.w3.org/Icons/valid-html401"
  width="88" height="31"
  alt="Valid HTML 4.01"
  style="border: 1px none"></a></p>

</body>
</html>

notes.xml

<?xml version="1.0"?>  
<?xml-stylesheet href="notes.css"?>  
<bindings xmlns="http://www.mozilla.org/xbl"
  xmlns:html="http://www.w3.org/1999/xhtml">  
  <binding id="board" styleexplicitcontent="true"> 
    <implementation>
      <property name="dragging">
        null
      </property> 
      <property name="currX">
        0
      </property> 
      <property name="currY">
        0
      </property> 
    </implementation>
    <handlers>
      <handler event="mousedown">
        if (event.originalTarget.parentNode.className == 'caption') {
          this.dragging = event.originalTarget.parentNode.parentNode;
          this.currX = event.clientX;
          this.currY = event.clientY;
        }
    </handler> 
    <handler event="mouseup"> 
      this.dragging = null;
    </handler> 
    <handler event="mousemove"> 
      if (!this.dragging)
        return;

      deltaX = event.clientX - this.currX;
      deltaY = event.clientY - this.currY;
      leftV = parseInt(this.dragging.style.left);
      topV = parseInt(this.dragging.style.top);
      leftV += deltaX; topV += deltaY; if (leftV < 0) leftV = 0; 
      if (topV < 0) topV = 0;
      if (leftV > 390) leftV = 390;
      if (topV > 390) topV = 390;
      this.dragging.style.left = leftV;
      this.dragging.style.top = topV;
      this.currX = event.clientX;
      this.currY = event.clientY;
    </handler> 
  </handlers> 
</binding>  

notes.css

.board {
  background-color: #808080;
  position: relative;
}

.note {
  background-color      : #FFFFCC;
  border                : 1px outset #FFFFCC;
  color                 : #000000;
  font                  : smaller;
  padding               : 3px;
  width: 200px;
  height: 200px;
  position: absolute;
}

.caption {
  cursor: pointer; 
  font-weight: bold;
  background-color: #ccccaa;
}

View this example.

Revision Source

<p>
</p>
<h2 name="notes.html">notes.html</h2>
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
 "http://www.w3.org/TR/html401/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;XBL Demo : Sticky Notes&lt;/title&gt;
&lt;meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1"&gt;
&lt;style type="text/css"&gt;
body {
 background-color: #FFFFFF;
 color: #000000;
 font: 1em Verdana, sans-serif;
}
h1 {
 font-size: 1.5em;
}
h2 {
 font-size: 1.2em;
}
/* Binding: */
.sticker {
 -moz-binding: url(notes.xml#default);
}
&lt;/style&gt; 
&lt;/head&gt;

&lt;body&gt;

&lt;h1&gt;&lt;a href="http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference"&gt;XBL&lt;/a&gt; Demo :
    Sticky Notes&lt;/h1&gt;


&lt;div class="sticker"&gt;&lt;p&gt;ACME, Inc. fax - respond today.&lt;/p&gt;&lt;/div&gt;

&lt;div class="sticker"&gt;&lt;p&gt;Don't forget the eggs!&lt;/p&gt;&lt;/div&gt;

&lt;div class="sticker"&gt;&lt;p&gt;The new project - who's on charge?&lt;/p&gt;&lt;/div&gt;

&lt;div class="sticker"&gt;&lt;p&gt;Learn more about XBL.&lt;/p&gt;&lt;/div&gt;


&lt;p style="clear: left"&gt;&lt;a 
  href="http://validator.w3.org/check?uri=referer"&gt;&lt;img 
  src="http://www.w3.org/Icons/valid-html401"
  width="88" height="31"
  alt="Valid HTML 4.01"
  style="border: 1px none"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<h2 name="notes.xml">notes.xml</h2>
<pre>&lt;?xml version="1.0"?&gt;  
&lt;?xml-stylesheet href="notes.css"?&gt;  
&lt;bindings xmlns="http://www.mozilla.org/xbl"
  xmlns:html="http://www.w3.org/1999/xhtml"&gt;  
  &lt;binding id="board" styleexplicitcontent="true"&gt; 
    &lt;implementation&gt;
      &lt;property name="dragging"&gt;
        null
      &lt;/property&gt; 
      &lt;property name="currX"&gt;
        0
      &lt;/property&gt; 
      &lt;property name="currY"&gt;
        0
      &lt;/property&gt; 
    &lt;/implementation&gt;
    &lt;handlers&gt;
      &lt;handler event="mousedown"&gt;
        if (event.originalTarget.parentNode.className == 'caption') {
          this.dragging = event.originalTarget.parentNode.parentNode;
          this.currX = event.clientX;
          this.currY = event.clientY;
        }
    &lt;/handler&gt; 
    &lt;handler event="mouseup"&gt; 
      this.dragging = null;
    &lt;/handler&gt; 
    &lt;handler event="mousemove"&gt; 
      if (!this.dragging)
        return;

      deltaX = event.clientX - this.currX;
      deltaY = event.clientY - this.currY;
      leftV = parseInt(this.dragging.style.left);
      topV = parseInt(this.dragging.style.top);
      leftV += deltaX; topV += deltaY; if (leftV &lt; 0) leftV = 0; 
      if (topV &lt; 0) topV = 0;
      if (leftV &gt; 390) leftV = 390;
      if (topV &gt; 390) topV = 390;
      this.dragging.style.left = leftV;
      this.dragging.style.top = topV;
      this.currX = event.clientX;
      this.currY = event.clientY;
    &lt;/handler&gt; 
  &lt;/handlers&gt; 
&lt;/binding&gt;  
</pre>
<h2 name="notes.css">notes.css</h2>
<pre>.board {
  background-color: #808080;
  position: relative;
}

.note {
  background-color      : #FFFFCC;
  border                : 1px outset #FFFFCC;
  color                 : #000000;
  font                  : smaller;
  padding               : 3px;
  width: 200px;
  height: 200px;
  position: absolute;
}

.caption {
  cursor: pointer; 
  font-weight: bold;
  background-color: #ccccaa;
}
</pre>
<p><a class="external" href="http://www.shadowland.org/xbl/test5/test.html">View this example</a>.
</p>
Revert to this revision