JavaScript DHTML/SmartClient/Toolbar

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

Add tool bar to a form

   <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"},
   //----- button items -----\\
   {title:"button", type:"button"},
   {title:"submit", type:"submit"},
   {title:"reset", type:"reset"},
   
   {type:"toolbar", buttons:[
       {title:"toolbar 1", click:"alert(1)"},
       {title:"toolbar 2", click:"alert(2)"},
       {title:"toolbar 3", click:"alert(3)"}
   ]}
 
   ];

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>


Enable or disable the Toolbar

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

// this skin uses the thumb down state Scrollbar.setProperties({ 

   allowThumbDownState:true

}); Canvas.create({ 

   ID:"scrolledWidget",
   left:150,
   top:225,
   width:100,
   height:100,
   contents:Canvas.imgHTML("http://www.wbex.ru/style/logo.png", 200, 200),
   overflow:"hidden"

});

var scrollbarWidth = 32;

Scrollbar.create({ 

   ID:"hscrollbar",
   left:16,
   top:41,
   width:400,
   vertical:false,
   btnSize:scrollbarWidth,
   showCorner:true,
   imageType:"stretch",
   scrollTarget:scrolledWidget,
   autoEnable:false

});

Scrollbar.create({ 

   ID:"vscrollbar",
   left:hscrollbar.left + hscrollbar.width - scrollbarWidth,
   top:hscrollbar.top + scrollbarWidth - 2,
   height:400,
   btnSize:scrollbarWidth,
   imageType:"stretch",
   scrollTarget:scrolledWidget,
   autoEnable:false

});

Button.create({ 

   left:60,
   top:395,
   width:130,
   click:"hscrollbar.enable();vscrollbar.enable()",
   title:"Enable scrollbars"

});

Button.create({ 

   left:200,
   top:395,
   width:130,
   click:"hscrollbar.disable();vscrollbar.disable()",
   title:"Disable scrollbars"

}); Button.create({ 

   left:60,
   top:435,
   width:130,
   click:"scrolledWidget.scrollTo(50)",
   title:"Scroll horizontal to 50"

}); Button.create({ 

   left:200,
   top:435,
   width:130,
   click:"scrolledWidget.scrollTo(null,50)",
   title:"Scroll vertical to 50"

});

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

 </source>


Toolbar button and action event 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/SmartClient/load_skin.js></SCRIPT>

</HEAD><BODY> <SCRIPT> Img.create({ 

   ID:"widget",
   left:250,
   top:180,
   width:100,
   height:100,
   src:"http://www.wbex.ru/style/logo.png"

}); Toolbar.create({ 

   ID:"widgetToolbar",
   left:50,
   top:50,
   width:600,
   membersMargin:2,
   buttons:[
   // Note: both "click" and "doubleClick" events are defined here - double clicking will execute the click event
   // handler once, and the doubleClick event handler once.
   // The state of the checkbox button (checked vs unchecked) will be changed twice - once on each mouseUp event.
   {title:"Visible", actionType:"checkbox", selected:true, 
    click:"widget.isVisible() ? widget.hide() : widget.show()", 
    doubleClick:"widget.isVisible() ? widget.hide() : widget.show()", 
    extraSpace:10},
   {title:"Small", actionType:"radio", click:"widget.setWidth(50);widget.setHeight(50)"},
   {title:"Medium", actionType:"radio", selected:true, click:"widget.setWidth(100);widget.setHeight(100)"},
   {title:"Large", actionType:"radio", click:"widget.setWidth(200);widget.setHeight(200)", 
    extraSpace:10},
   {title:"Up", click:"widget.moveBy(0,-20)"},
   {title:"Right", click:"widget.moveBy(20,0)"},
   {title:"Down", click:"widget.moveBy(0,20)"},
   {title:"Left", click:"widget.moveBy(-20,0)", 
    extraSpace:10},
   {title:"Reset", click:"widget.setRect(250,180,100,100); widget.show(); this.parentElement.selectButton(0); this.parentElement.selectButton(2)", width:100}
   
   ]

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

 </source>


Toolbar demo

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

   ID: "fontSelector",
   showResizeBar:true,
   width:"*", minWidth:50,
   numCols:1,
   fields: [
       {name: "selectFont", showTitle: false, width:"*",
        valueMap: {
           "courier": "Courier",
           "verdana": "Verdana",
           "times": "Times"
        }, defaultValue:"courier" }
   ]

}); isc.DynamicForm.create({ 

   ID: "zoomSelector",
   width:"*", minWidth:50,
   numCols:1,
   fields: [
       {name: "selectZoom", showTitle: false, width:"*",
        valueMap: ["50%", "75%", "100%", "150%", "200%", "Fit"],
        defaultValue:"100%" }
   ]

}); isc.ToolStrip.create({ 

   width: 450, height:24, 
   members: [bold, italics, underlined, 
             "separator",
             alignLeft, alignRight, alignCenter,
             "separator",
             fontSelector, "resizer", zoomSelector]

});

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

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