Dojo- Custom widget 1

Sample Employee data

by Lavakumar T

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/claro/claro.css">
<span data-dojo-type="BusinessCard" data-dojo-props="name:'John Smith', phone:'(800) 555-1212', desig:'SE'"></span>
<span data-dojo-type="BusinessCard" data-dojo-props="name:'Jack Bauer', nameClass:'specialEmployeeName', phone:'(800) CALL-CTU',Desig:'SSE'"></span>
<span data-dojo-type="BusinessCard" data-dojo-props="name:'Lava kumar', nameClass:'clsTitle', phone:'(800) CALL-CTU',Desig:'SSE'"></span>

CSS

.businessCard {
    border: 3px inset gray;
    margin: 1em;
    border-radius:5px;
    padding:5px;    
}
.employeeName {
    color: blue;
}
.specialEmployeeName {
    color: red;
}
.clsTitle {
    color: green;
}

JavaScript

dojoConfig = {parseOnLoad: false};
require([
     "dojo/_base/declare", "dojo/parser", "dojo/ready",
     "dijit/_WidgetBase", "dijit/_TemplatedMixin"
 ], function(declare, parser, ready, _WidgetBase, _TemplatedMixin){
     declare("BusinessCard", [_WidgetBase, _TemplatedMixin], {
     
         templateString:
             "<div class='businessCard'>" +
                 "<div>Name: <span data-dojo-attach-point='nameNode'></span></div>" +
                 "<div>Phone #: <span data-dojo-attach-point='phoneNode'></span></div>" +
                 "<div>Desug : <span data-dojo-attach-point='desigNode'></span></div>" + 
             "</div>",
         //name: "unknown1",
         _setNameAttr: { node: "nameNode", type: "innerHTML" },
         nameClass: "employeeName",
         _setNameClassAttr: { node: "nameNode", type: "class" },
        // phone: "unknown2",
         _setPhoneAttr: { node: "phoneNode", type: "innerHTML" },
        // title: "unknown3",
         _setDesigAttr: { node: "desigNode", type: "innerHTML" }
     });
     ready(function(){
         // Call the parser manually so it runs after our widget is defined, and page has finished loading
         parser.parse();
     });
 });