в 10:00, 26 мая 2010

2010-05-26T10:00:24Z

Admin: 1 версия

2010-05-26T07:27:40Z

1 версия

Новая страница

==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": "<span style="font-family:courier">Courier</span>",
"verdana": "<span style="font-family:verdana">Verdana</span>",
"times": "<span style="font-family:times">Times</span>"
}, 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>

← Предыдущая	Версия 10:00, 26 мая 2010
(нет различий)

JavaScript DHTML/SmartClient/Toolbar - История изменений

в 10:00, 26 мая 2010

Admin: 1 версия