mozilla
Your Search Results

    Example Sticky Notes

    notes.html

    All parts are made and commented by VK [schools_ring@yahoo.com]. All rights are given to the world.

    この例を見る

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//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;
    }
    /* 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,&nbsp;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"?>
    
    <bindings
     xmlns="http://www.mozilla.org/xbl"
     xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    
    <!--
     In above only XBL namespace declaration is mandatory.
     The others are only needed if you plan to handle
     XUL (XML User Interface Language) or/and
     SVG (Scalable Vector Graphics) in your bindings;
     xlink in XML also may come useful sometimes.
     All namespaces above are supported by default and they
     do not require any additional downloads or initializations.
    -->
    
    
    
    <binding id="default">
    <!--
     A separate binding. You add a binding file using -moz-binding
     style rule and you address a particular binding by its ID:
        -moz-binding: url(notes.xml#default)
     This ID is local within the binding file (not visible in the
     target document DOM tree).
    -->
    
    
    <resources>
    <!--
     Obtaining the stylesheet we'll use
     to (re)style the bound element.
    -->
     <stylesheet src="notes.css"/>
    </resources>
    
    
    
    <content>
    <!--
     This SVG graphics will be added automatically around each bound element.
     The position of the original content is indicated by <children/> tag.
    -->
     <svg:svg width="60px" height="60px">
      <svg:g fill-opacity="0.6" stroke="#FFFFFF" stroke-width="1px">
       <svg:circle cx="25px" cy="12px" r="12" fill="#FF0000" transform="translate(0,0)"/>
       <svg:circle cx="25px" cy="12px" r="12" fill="#00FF00" transform="translate(7,12)"/>
       <svg:circle cx="25px" cy="12px" r="12" fill="#0000FF" transform="translate(-7,12)"/>
      </svg:g>
     </svg:svg>
     <children/>
    </content>
    
    
    
    <implementation>
    <!--
     Here and futher CDATA wrappers around JavaScript code
     are not mandatory but recommended. This way you protect
     yourselve from < and > signs breaking your XML layout.
     It also speeds up the parsing as the engine doesn't go
     through CDATA sections but simply skip on them.
    -->
    
    
    
    <constructor><![CDATA[
    /**
     * The code below will be called one time only after
     * the binding is successfully prepared and bound.
     * "this" in this context refers to the bound element.
     */
    
     // your code goes here
    
    ]]></constructor>
    
    
    
    <destructor><![CDATA[
    /**
     * The code below will be called one time only before
     * binding is unbound. You cannot cancel this event,
     * but you may accomplish some last minute clean up.
     * "this" in this context refers to the bound element.
     */
    
     // your code goes here
    
    ]]></destructor>
    
    
    
    <field name="priority"><![CDATA[
    /**
     * New "real" property for the bound element.
     * Within this block the content is interpreted
     * as JavaScript code. The result of this code
     * evaluation (if any) will be used as initial value.
     */
    
     "normal";
    
    ]]></field>
    
    
    
    <property name="innerText">
    <!--
     New "virtual" property for the bound element.
     Unlike <field> these are really two functions
     (getter and setter). Within the virtual properties
     you cannot set or get the named property itself.
     Say an attempt to assign this.innerText='something'
     will lead to circular setter call and stack overflow.
    -->
    
    <getter><![CDATA[
     var st = this.innerHTML || '';
     if (st != '') {
      var re = /<\/?[^>]+>/gi;
      return st.replace(re,'');
     }
     else {
      return '';
     }
    ]]></getter>
    
    <setter><![CDATA[
     // "val" in setter contains the assignment value.
     // Here we simply echoing it back:
     return val;
    ]]></setter>
    
    </property>
    
    
    
    <method name="setBorder">
    <!--
     New method for the bound element.
     Unlike virtual property it is called in
     function context: this.setBorder(arg)
     You also may define any amount of named arguments
     using <parameter name="argumentName"/>
    -->
     <parameter name="arg"/>
     <body><![CDATA[
    
     this.style.border = arg;
    
     ]]></body>
    </method>
    
    
    
    </implementation>
    
    
    
    <handlers>
    <!--
     Event handlers.
     Mouse events sent to bindings are refactored, so
     event.target / event.relatedTarget always points
     to the bound element, even if it was originated
     to/from a child.
    -->
    
    
    
    <handler event="click"><![CDATA[
     if (this.priority == 'normal') {
      this.priority = 'high';
      this.setBorder('2px solid red');
     }
     else {
      this.priority = 'normal';
      this.setBorder('2px solid blue');
     }
     var str = this.innerText + '\n\n';
     str+= ('On ' + event.type + ' priority set to: ' + this.priority);
     window.alert(str);
    ]]></handler>
    
    
    
    <handler event="mouseover"><![CDATA[
     this.$bg = this.style.backgroundColor || '#FFFF00';
     this.style.backgroundColor = '#FFCC00';
    ]]></handler>
    
    
    
    <handler event="mouseout"><![CDATA[
     this.style.backgroundColor = this.$bg;
    ]]></handler>
    
    
    </handlers>
    
    
    
     </binding>
    </bindings>
    

    notes.css

    .sticker {
     position: relative;
     left: 0px;
     right: 0px;
     float: left;
     clear: none;
     width: 10em;
     height: 10em;
     overflow: visible;
     margin: 1em 1em;
     padding: 0.5em 0.5em;
     border: 2px solid blue;
     background-color: yellow;
     font: 1em normal "Times New Roman",serif;
     font-style: italic;
     cursor: default;
    }
    

    この例を見る

    ドキュメントのタグと貢献者

    タグ: 
    Contributors to this page: kohei.yoshino
    最終更新者: kohei.yoshino,