JavaScript DHTML/SmartClient/HTMLPane
Содержание
Add HTMLPane to tab Panel and load htmlfile
<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="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Dynamic Content Loading Example |
| <IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<SCRIPT>
isc.TabSet.create({
top:40, width:400, height:250,
tabs:[
{ title:"Tab1",
pane:isc.Canvas.create({ autoDraw:false, contents:"Contents of Tab1"} )
},
{ title:"Tab2",
pane:isc.HTMLPane.create({
autoDraw:false,
contentsURL:"loaded_content.html",
loadingMessage:"Loading HTML Content.."
})
}
]
}); </SCRIPT> </BODY> </HTML>
</source>
Load html content to HTMLPane
<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.HTMLPane.create({
width:230, height:150, showEdges:true, styleName:"exampleTextBlock", contents:"Ajax Asynchronous JavaScript And XML (AJAX) is a Web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user makes a change. This is meant to increase the Web page"s interactivity, speed, and usability. (Source: <a href="http://www.wikipedia.org" title="Wikipedia" target="_blank">Wikipedia</a>)"
})
</SCRIPT>
</BODY> </HTML>
</source>
Load page to HTMLPane
<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.VLayout.create({width:"100%", height:"100%", members:[
isc.HStack.create({height:50, layoutMargin:10, membersMargin:10, members:[
isc.IButton.create({title:"Yahoo", click:"myPane.setContentsURL("http://www.yahoo.ru")"}),
isc.IButton.create({title:"Google", click:"myPane.setContentsURL("http://www.google.ru")"}),
isc.IButton.create({title:"Wikipedia", click:"myPane.setContentsURL("http://www.wikipedia.org")"}),
isc.IButton.create({title:"Baidu", click:"myPane.setContentsURL("http://www.baidu.ru")"})
]}),
isc.HTMLPane.create({
ID:"myPane",
showEdges:true,
contentsURL:"http://www.google.ru/",
contentsType:"page"
})
]})
</SCRIPT>
</BODY> </HTML>
</source>
Set content to HTMLPane
<source lang="html4strict">
window.chunksPath = isc.Page.getIsomorphicDocsDir() + "inlineExamples/html/chunks/"; isc.HTMLFlow.create({
ID:"myTextBox", top:40, width:280, styleName:"exampleTextBlock", contentsURL:chunksPath + "ajax.html"
}) isc.HTMLPane.create({
left:300, top:40, width:280, height:200, showEdges:true, styleName:"exampleTextBlock", contentsURL:chunksPath + "glossary.html"
}) isc.IButton.create({
left:10, width:80, title:"Ajax", click:"myTextBox.setContentsURL(chunksPath + "ajax.html")"
}) isc.IButton.create({
left:100, width:80, title:"GUI", click:"myTextBox.setContentsURL(chunksPath + "gui.html")"
}) isc.IButton.create({
left:190, width:80, title:"RIA", click:"myTextBox.setContentsURL(chunksPath + "ria.html")"
})
</source>
Use Slider to resize HTMLPane
<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> exampleText = "Asynchronous J</b>avaScript And XML (AJAX) is a Web development technique for creating interactive web applications." isc.HTMLPane.create({
ID:"box1", left:20, top:100, contents: exampleText, overflow: "hidden", styleName: "padding5", showEdges: true
}); isc.HTMLPane.create({
ID: "box2", left:240, top:100, contents: exampleText, overflow: "hidden", styleName: "padding10border5"
}); isc.HTMLPane.create({
ID: "box3", left:460, top:100, contents: exampleText, overflow: "hidden", styleName: "padding5border5", showEdges: true
}); isc.Slider.create({
title: "Resize",
vertical: false,
value:140, minValue:140, maxValue:200, showRange:false,
valueChanged : function (value) {
box1.setWidth(value);
box1.setHeight(value);
box2.setWidth(value);
box2.setHeight(value);
box3.setWidth(value);
box3.setHeight(value);
}
}); </SCRIPT>
</BODY> </HTML>
</source>
