JavaScript DHTML/SmartClient/Button

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

Button event handler

   <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> <SCRIPT> Label.create({ 

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

}) function showClicked(name) { 

   results.setContents(name + " clicked");

}

Button.create({ 

   ID:"b1",
   left:20,
   top:45,
   height:50,
   title:"Button",
   click:"showClicked(this.title)"

});

Button.create({ 

   ID:"b2",
   left:140,
   top:45,
   height:50,
   title:"Disabled",
   click:"showClicked(this.title)",
   disabled:true

});

Button.create({ 

   ID:"cb1",
   left:20,
   top:125,
   height:50,
   title:"Checkbox 1",
   click:"showClicked(this.title);",
   selected:true,
   actionType:"checkbox"

});

Button.create({ 

   ID:"cb2",
   left:140,
   top:125,
   height:50,
   title:"Checkbox 2",
   click:"showClicked(this.title)",
   actionType:"checkbox"

});

Button.create({ 

   ID:"cb3",
   left:260,
   top:125,
   height:50,
   title:"Selected & Disabled",
   wrap:true,
   click:"showClicked(this.title)",
   disabled:true,
   selected:true,
   actionType:"checkbox"

});

Button.create({ 

   ID:"rb1",
   left:20,
   top:205,
   height:50,
   title:"Radio 1",
   click:"if (selectedButton != this) {selectedButton.deselect(); selectedButton=this}; showClicked(this.title)",
   selected:true,
   actionType:"radio"

});

Button.create({ 

   ID:"rb2",
   left:140,
   top:205,
   height:50,
   title:"Radio 2",
   click:"if (selectedButton != this) {selectedButton.deselect(); selectedButton=this}; showClicked(this.title)",
   actionType:"radio"

});

Button.create({ 

   ID:"rb3",
   left:260,
   top:205,
   height:50,
   title:"Radio 3",
   click:"if (selectedButton != this) {selectedButton.deselect(); selectedButton=this}; showClicked(this.title)",
   actionType:"radio"

});

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

 </source>


Button with icon

   <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>


Change button title

   <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.Button.create({ 

   ID: "button1",
   autoFit: true,
   autoDraw: false,
   title: "Find Related",

}); isc.IButton.create({ 

   ID: "button2",
   autoFit: true,
   autoDraw: false,
   title: "Search within results"

}); isc.HStack.create({ 

   membersMargin: 20,
   height: 24,
   border: "1px solid blue",
   members: [ button1, button2 ]

});

isc.Button.create({ 

   title: "Change Title",
   top: 45,
   left: 60,
   click : function () {
       // have buttons exchange their titles
       var title1 = button1.getTitle();
       button1.setTitle(button2.getTitle());
       button2.setTitle(title1);
   }

});


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

 </source>


Create Button with text label and icon

   <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.Canvas.create({ 

   ID: "cubeBin",
   top:40, 
   width:400, 
   height:300,
   showEdges: true

})

isc.IButton.create({ 

   title:"Create", icon:"http://www.wbex.ru/style/logo.png",
   mouseUp: function () {
       isc.Img.create({
           left: isc.Math.random(340),
           top: isc.Math.random(240),
           width:48, height:48,
           parentElement: cubeBin,
           src: "http://www.wbex.ru/style/logo.png",
           click: "this.destroy()"
       })
   }

})

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

 </source>


Disable and enable a 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: "findButton",
   width: 120,
   title: "Find Related",
   icon: "icons/16/find.png"

}); isc.Button.create({ 

   ID: "saveButton",
   title: "Save",
   left: 150,
   icon: "icons/16/icon_add_files.png",
   iconOrientation: "right",
   showDownIcon: true

}); isc.Button.create({ 

   title: "Disable Save",
   width: 120,
   left: 60,
   top: 45,
   click : function () {
       if (saveButton.isDisabled()) {
           saveButton.enable();
           this.setTitle("Disable Save");
       } else {
           saveButton.disable();
           this.setTitle("Enable Save");
       }
   }

});


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

 </source>


Set icon orientation

   <source lang="html4strict">


<HTML><HEAD> 

 <SCRIPT>var isomorphicDir=".";</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.IButton.create({ 

   title: "Hello",
   icon: "http://www.wbex.ru/style/logo.png",
   iconOrientation: "right",
   click: "isc.say("Hello world!")"

})

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

 </source>


Standard button and big 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/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver">


<style TYPE="text/css"> .bigButton { 

 font-family:Tahoma,Verdana,Helvetica,sans-serif;
 font-size:16px;
 font-weight:bold;
 color:black;
 border-left:2px solid #FFFFFF; border-top:2px solid #FFFFFF;
 border-right:2px solid #808080; border-bottom:2px solid #808080;
 background-color:#DDDDDD;

} .bigButtonOver { 

 font-family:Tahoma,Verdana,Helvetica,sans-serif;
 font-size:16px;
 font-weight:bold;
 color:black;
 border-left:2px solid #FFFFFF; border-top:2px solid #FFFFFF;
 border-right:2px solid #808080; border-bottom:2px solid #808080;
 background-color:#CCCCCC;

} .bigButtonSelected { 

 font-family:Tahoma,Verdana,Helvetica,sans-serif;
 font-size:16px;
 font-weight:bold;
 color:black;
 border-left:2px solid #808080; border-top:2px solid #808080;
 border-right:2px solid #FFFFFF; border-bottom:2px solid #FFFFFF;
 background-color:#DDDDDD;

} .bigButtonDown, .bigButtonSelectedOver, .bigButtonSelectedDown { 

 font-family:Tahoma,Verdana,Helvetica,sans-serif;
 font-size:16px;
 font-weight:bold;
 color:black;
 border-left:2px solid #808080; border-top:2px solid #808080;
 border-right:2px solid #FFFFFF; border-bottom:2px solid #FFFFFF;
 background-color:#CCCCCC;

} .bigButtonDisabled, .bigButtonSelectedDisabled { 

 font-family:Tahoma,Verdana,Helvetica,sans-serif;
 font-size:16px;
 font-weight:bold;
 color:#808080;
 border-left:2px solid #808080; border-top:2px solid #808080;
 border-right:2px solid #808080; border-bottom:2px solid #808080;
 background-color:#CCCCCC;

} </style> <SCRIPT>

// create a standard button for comparison Button.create({ 

 left:50, top:50,
 title:"standard button title"

});

// define a BigButton class (subclass of Button) ClassFactory.defineClass("BigButton", Button);

// change the settings of various Button properties, for BigButton instances BigButton.addProperties({ 

 height:50,
 overflow:"visible",
 baseStyle:"bigButton",
 wrap:true

});

// create a couple of BigButton instances BigButton.create({ 

 left:50, top:100,
 title:"big button title"

}); BigButton.create({ 

 left:200, top:100,
 title:"big button with a very very very long title"

});

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

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