JavaScript DHTML/SmartClient/ImageButton

Материал из Web эксперт
Перейти к: навигация, поиск

Disable image button

   <source lang="html4strict">


<HTML><HEAD> 

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.IButton.create({ 

   ID: "stretchButton",
   width: 150,
   showRollOver: true,
   showDisabled: true,
   showDown: true,
   title: "Stretch Button",
   titleStyle: "stretchTitle",
   icon: "icons/16/find.png"

}); isc.Button.create({ 

   ID: "cssButton",
   baseStyle: "cssButton",
   left: 200,
   showRollOver: true,
   showDisabled: true,
   showDown: true,
   title: "CSS Button",
   icon: "icons/16/icon_add_files.png"

}); isc.ImgButton.create({ 

   ID: "imgButton",
   left: 400,
   width:18,        
 height:18,
   showRollOver: true,
   showDisabled: true,
   showDown: true

}); isc.Button.create({ 

   title: "Disable All",
   width: 120,
   left: 190,
   top: 45,
   click : function () {
       if (cssButton.isDisabled()) {
           cssButton.enable();
           stretchButton.enable();
           imgButton.enable();
           this.setTitle("Disable All");
       } else {
           cssButton.disable();
           stretchButton.disable();
           imgButton.disable();
           this.setTitle("Enable All");
       }
   }

});

</SCRIPT> </BODY> </HTML> 

 </source>


Image button creation

   <source lang="html4strict">


<HTML><HEAD> 

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0> 

 ImgButton selection example

 Isomorphic SmartClient SDK
<IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4>


<SCRIPT> Label.create({ 

   ID:"results",
   height:20,
   width:200,
   top:350,
   left:35

}) function showClicked(name) { 

   results.setContents(name + " clicked");

} // Labels Label.create({ 

 left:20,
 top:50,
 width:300,
 height:20,
 align:"Canvas.RIGHT",
 contents:"Buttons (Normal/Disabled):"

}); Label.create({ 

 left:20,
 top:150,
 width:400,
 height:20,
 align:"Canvas.RIGHT",
 contents:"Checkboxes (Selected/Unselected/Selected and Disabled):"

}); Label.create({ 

 left:20,
 top:250,
 width:300,
 height:20,
 align:"Canvas.RIGHT",
 contents:"Radio Buttons:"

}); // Buttons ImgButton.create({ 

   ID:"b1",
   left:20,
   top:80,
   width:33,
   height:33,
   src:"http://www.wbex.ru/style/logo.png",
   click:"showClicked(this.getID())"

});

ImgButton.create({ 

   ID:"b2",
   left:140,
   top:80,
   width:33,
   height:33,
   src:"http://www.wbex.ru/style/logo.png",
   click:"showClicked(this.getID())",
   disabled:true

});

ImgButton.create({ 

   ID:"cb1",
   left:20,
   top:180,
   width:33,
   height:33,
   src:"http://www.wbex.ru/style/logo.png",
   click:"showClicked(this.getID())",
   selected:true,
   actionType:"checkbox"

});

ImgButton.create({ 

   ID:"cb2",
   left:140,
   top:180,
   width:33,
   height:33,
   src:"http://www.wbex.ru/style/logo.png",
   click:"showClicked(this.getID())",
   actionType:"checkbox"

});

ImgButton.create({ 

   ID:"cb3",
   left:260,
   top:180,
   width:33,
   height:33,
   src:"http://www.wbex.ru/style/logo.png",
   click:"showClicked(this.getID())",
   disabled:true,
   selected:true,
   actionType:"checkbox"

});

ImgButton.create({ 

   ID:"rb1",
   left:20,
   top:280,
   width:33,
   height:33,
   src:"http://www.wbex.ru/style/logo.png",
   click:"if (selectedImgButton != this) {selectedImgButton.deselect(); selectedImgButton=this}; showClicked(this.getID())",
   selected:true,
   actionType:"radio"

});

ImgButton.create({ 

   ID:"rb2",
   left:140,
   top:280,
   width:33,
   height:33,
   src:"http://www.wbex.ru/style/logo.png",
   click:"if (selectedImgButton != this) {selectedImgButton.deselect(); selectedImgButton=this}; showClicked(this.getID())",
   actionType:"radio"

});

ImgButton.create({ 

   ID:"rb3",
   left:260,
   top:280,
   width:33,
   height:33,
   src:"http://www.wbex.ru/style/logo.png",
   click:"if (selectedImgButton != this) {selectedImgButton.deselect(); selectedImgButton=this}; showClicked(this.getID())",
   actionType:"radio"

});

var selectedImgButton = rb1; </SCRIPT> </BODY> </HTML> 

 </source>


ImgButton and action listener

   <source lang="html4strict">


<HTML><HEAD> 

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.ListGrid.create({ 

   fields:[
       {type:"text", title:"System", name:"system"},
       {type:"text", title:"Monitor Name", name:"monitor"}
   ],
   ID:"listGrid",
   canEdit:true, editEvent:"click",
   autoDraw:false

}) isc.HTMLFlow.create({ 

   ID:"statusReport",
   padding:5, border:"1px solid #808080",
   setNewStatus : function (system) {
       this.setContents(system +
           ": Normal
"); 
   }

}) isc.ImgButton.create({ 

   ID:"addButton",
   autoDraw:false,
   src:"[SKIN]actions/add.png", size:16,
   showFocused:false, showRollOver:false, showDown:false,
   click : "listGrid.startEditingNew()"

}); isc.ImgButton.create({ 

   ID:"removeButton",
   autoDraw:false,
   src:"[SKIN]actions/remove.png", size:16,
   showFocused:false, showRollOver:false, showDown:false,
   click : "listGrid.removeSelectedData()"

}); isc.DynamicForm.create({ 

   ID: "systemSelector",
   height:1,
   width:75, numCols:1,
   fields: [
       {name: "system", type: "select", width:120, showTitle: false,
        valueMap: ["Development", "Staging", "Production"],
        defaultValue:"Development",
        change : "statusReport.setNewStatus(value)"
       }
   ]

}); isc.SectionStack.create({ 

   sections:[
       { items:listGrid, title:"Monitors", controls:[addButton, removeButton], expanded:true },
       { items:statusReport, title:"Status", controls:systemSelector, expanded:true }
   ],
   visibilityMode:"multiple",
   animateSections:true,
   height:400,
   width:300,
   overflow:"hidden"

}) statusReport.setNewStatus(systemSelector.getValue("system"));

</SCRIPT> </BODY> </HTML> 

 </source>


Use ImageButton

   <source lang="html4strict">


<HTML><HEAD> 

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.IButton.create({ 

   title: "Stretch Button",
   width: 150,
   icon: "find.png"

}); isc.Button.create({ 

   left: 200,
   title: "CSS Button",
   icon: "yourFile.png"

}); isc.ImgButton.create({ 

   left: 400,
   width:18,        
 height:18,
 src:"button.png"

});

</SCRIPT> </BODY> </HTML> 

 </source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/SmartClient/ImageButton&oldid=3843»