JavaScript DHTML/SmartClient/RadioButton

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

Radiobutton and Checkbox

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

   ID: "alignLeft",
   size: 24,
   src: "icons/24/text_align_left.png",
   showRollOver: false,
   showFocused: false,
   actionType: "radio",
   radioGroup: "textAlign"

}); isc.ImgButton.create({ 

   ID: "alignRight",
   size: 24,
   src: "icons/24/text_align_right.png",
   showRollOver: false,
   showFocused: false,
   actionType: "radio",
   radioGroup: "textAlign"

}); isc.ImgButton.create({ 

   ID: "alignCenter",
   size: 24,
   src: "icons/24/text_align_center.png",
   showRollOver: false,
   showFocused: false,
   actionType: "radio",
   radioGroup: "textAlign"

}); isc.ImgButton.create({ 

   ID: "bold",
   size: 24,
   src: "icons/24/text_bold.png",
   showRollOver: false,
   showFocused: false,
   actionType: "checkbox"

}); isc.ImgButton.create({ 

   ID: "italics",
   size: 24,
   src: "icons/24/text_italics.png",
   showRollOver: false,
   showFocused: false,
   actionType: "checkbox"

}); isc.ImgButton.create({ 

   ID: "underlined",
   size: 24,
   src: "icons/24/text_underlined.png",
   showRollOver: false,
   showFocused: false,
   actionType: "checkbox"

});

isc.ToolStrip.create({ 

   width: 140,
   members: [bold, italics, underlined, alignLeft, alignRight, alignCenter]

});

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

 </source>


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


Use radiobutton

   <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> var abcdArray = ["a", "b", "c", "d"], 

   abcdList = {a:"option a", b:"option b", c:"option c", d:"option d"},

   formItems = [
   
   {name:"item1", type:"header", defaultValue:"header value"},
   {name:"item2", type:"blurb", defaultValue:"blurb value"},
   {type:"rowSpacer"},
   {name:"item3", title:"staticText", type:"staticText", defaultValue:"staticText value"},
   
   //----- data items -----\\
   {name:"item4", title:"text", type:"text", defaultValue:"text value"},
   {name:"item9", title:"radioGroup", type:"radioGroup", valueMap:abcdList, defaultValue:"a"},
 
   ];

DynamicForm.create({ 

   ID:"itemsForm",
   left:20,
   top:40,
   width:400,
   items:formItems,
   canSubmit:true  // Required for the submit button to be operative

}); </SCRIPT> </BODY> </HTML> 

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