It is currently Wed Sep 20, 2017 11:03 am

News News of CrossUI Code Snaps

Site map of CrossUI Code Snaps » Forum : CrossUI Code Snaps

Find code here before you post.

Several ways to show UI Control

Class('App.tech_UI_showUI', 'xui.Com',{
Instance:{
events:{onReady:'_onready'},
iniComponents:function(){
// [[code created by CrossUI RAD Tools
var host=this, children=, append=function(child){children.push(child.get(0))};

append((new xui.UI.ComboInput)
.setHost(host,"ciMethods")
.setLeft(140)
.setTop(110)
.setWidth(470)
.setHeight(120)
.setType("helpinput")
.setMultiLines(true)
.setItems()
);

append((new xui.UI.Div)
.setHost(host,"divLabel")
.setLeft(140)
.setTop(10)
.setWidth(470)
.setHeight(40)
.setHtml('How to show xui.UI components to DOM?')
);

append((new xui.UI.Pane)
.setHost(host,"pane")
.setLeft(140)
.setTop(40)
.setWidth(470)
.setHeight(40)
.setCustomStyle({"KEY":"border:solid 1px #ccc"})
);

append((new xui.UI.Button)
.setHost(host,"button5")
.setLeft(330)
.setTop(360)
.setCaption("To show widget")
.onClick("_clk")
);

return children;
// ]]code created by CrossUI RAD Tools
},
_onready:function(){
SPA=this; ...
Read more : Several ways to show UI Control | Views : 2708 | Replies : 0


Several ways to create UI Control

Class('App.tech_UI_createUI', 'xui.Com',{
Instance:{
events:{onReady:'_onready'},
iniComponents:function(){
// [[code created by CrossUI RAD Tools
var host=this, children=, append=function(child){children.push(child.get(0))};

append((new xui.UI.ComboInput)
.setHost(host,"ciMethods")
.setLeft(140)
.setTop(110)
.setWidth(470)
.setHeight(160)
.setType("helpinput")
.setMultiLines(true)
.setItems()
);

append((new xui.UI.Div)
.setHost(host,"divLabel")
.setLeft(140)
.setTop(10)
.setWidth(470)
.setHeight(40)
.setHtml('How to create xui.UI components?')
);

append((new xui.UI.Pane)
.setHost(host,"pane")
.setLeft(140)
.setTop(40)
.setWidth(470)
.setHeight(40)
.setCustomStyle({"KEY":"border:solid 1px #ccc"})
);

append((new xui.UI.Button)
.setHost(host,"button5")
.setLeft(330)
.setTop(360)
.setCaption("Create Widget")
.onClick("_clk")
); ...
Read more : Several ways to create UI Control | Views : 1809 | Replies : 0


xui.UI.TimeLine & xui.UI.Calendar

Class('App', 'xui.Com',{
Instance:{
iniComponents:function(){
// [[code created by CrossUI RAD Tools
var host=this, children=, append=function(child){children.push(child.get(0))};

append((new xui.UI.Button)
.setHost(host,"button3")
.setLeft(310)
.setTop(30)
.setWidth(140)
.setCaption("drag me to calendar")
.setImage("img/task.gif")
.onRender("_button3_aftercreated")
);

append((new xui.UI.Pane)
.setHost(host,"pane55")
.setDock("center")
.setLeft(40)
.setTop(60)
.setWidth(798)
.setHeight(480)
);

host.pane55.append((new xui.UI.Tabs)
.setHost(host,"tabs12")
.setItems()
.setLeft(0)
.setTop(0)
.setValue("timeline")
);

host.tabs12.append((new xui.UI.Calendar)
.setHost(host,"calendar1")
.setLeft(10)
.setTop(40)
.setDropKeys("iEvent")
.onDrop("_calendar1_ondrop")
, 'calendar');

host.tabs12.append((new xui.UI.TimeLine)
.setHost(host,"timeline1")
.setDock("fill")
.setLeft(70)
.setTop(120)
.setUnitPixs(30)
.setIncrement(30)
.setTimeSpanKey("2 h")
.setMultiTasks(true)
.setDropKeys("iEvent")
.setWidth(796)
.beforeNewTask("_timeline1_beforeNewTask")
, 'timeline');

append((new xui.UI.Button) ...
Read more : xui.UI.TimeLine & xui.UI.Calendar | Views : 1768 | Replies : 0


xui.UI.FoldingList

Class('App.xui_UI_FoldingList', 'xui.Com',{
Instance:{
iniComponents:function(){
// [[code created by CrossUI RAD Tools
var host=this, children=, append=function(child){children.push(child.get(0))};

append((new xui.UI.FoldingList)
.setHost(host,"FoldingList1")
.setItems()
.setLeft(50)
.setTop(40)
.setWidth(280)
.setHeight(110)
.setCmds()
);

append((new xui.UI.FoldingList)
.setHost(host,"foldinglist2")
.setItems()
.setLeft(390)
.setTop(40)
.setWidth(280)
.setHeight(110)
.setCmds()
.setActiveLast(true)
.onClickButton("_foldinglist2_oncommand")
.onShowOptions("_foldinglist2_onshowoptions")
);

return children;
// ]]code created by ...
Read more : xui.UI.FoldingList | Views : 1281 | Replies : 0


xui.UI.Poll

Class('App.xui_UI_Poll', 'xui.Com',{
Instance:{
iniComponents:function(){
// [[code created by CrossUI RAD Tools
var host=this, children=, append=function(child){children.push(child.get(0))};

append((new xui.UI.Block)
.setHost(host,"block1")
.setLeft(60)
.setTop(20)
.setWidth(553)
.setHeight(600)
.setBorder(true)
.setResizer(true)
.setBackground("#fff")
);

host.block1.append((new xui.UI.Poll)
.setHost(host,"poll05")
.setItems()
.setDisabled(true)
.setLeft(null)
.setTop(null)
.setWidth("auto")
.setHeight("auto")
.setPosition("relative")
.setTitle("5. single select (disabled)")
.setValue("")
);

host.block1.append((new xui.UI.Poll)
.setHost(host,"poll02")
.setItems()
.setLeft(null)
.setTop(null)
.setWidth("auto")
.setHeight("auto")
.setPosition("relative")
.setSelMode("multi")
.setTitle("2. multi select ")
.setValue("") ...
Read more : xui.UI.Poll | Views : 1695 | Replies : 0


xui.UI.Range

   
Class('App.xui_UI_Range', 'xui.Com',{
Instance:{
iniComponents:function(){
// [[code created by CrossUI RAD Tools
var host = this,
children = ,
append = function(child){
children.push(child.get(0))
};

append((new xui.UI.Range)
.setHost(host,"range2")
.setLeft(40)
.setTop(144)
.setUnit("%")
.setSingleValue(true)
.setValue("0:70")
);

append((new xui.UI.Range)
.setHost(host,"range1")
.setLeft(40)
.setTop(40)
.setMin(1000)
.setMax(3000)
.setValue("1000:2000")
.setUnit("$")
);

return children;
// ]]code created by CrossUI RAD Tools
}
}
});
   
Read more : xui.UI.Range | Views : 1306 | Replies : 0


xui.UI.TextEditor

Class('App.xui_UI_TextEditor', 'xui.Com',{
Instance:{
iniComponents:function(){
// [[code created by CrossUI RAD Tools
var host=this, children=, append=function(child){children.push(child.get(0))};

append((new xui.UI.TextEditor)
.setHost(host,"texteditor3")
.setLeft(70)
.setTop(60)
.setWidth(228)
.setHeight(206)
.setBorder(true)
.setValue("//tab: add 4 space\n//shift+tab: remove 4 space\n//enter: auto head spaces\n// { + enter: auto head spaces(add 4 more)\n// } : remove 4 spaces\n\nvar function(){\n var a=2;\n}")
.onChange("_texteditor3_onchange")
);

append((new xui.UI.TextEditor)
.setHost(host,"texteditor4")
.setLeft(368)
.setTop(60)
.setWidth(228)
.setHeight(206)
.setBorder(true)
.setReadonly(true)
.setValue("var function(){\n //readonly\n}")
);

return children;
// ]]code created by CrossUI RAD Tools
},
_texteditor3_onchange:function ...
Read more : xui.UI.TextEditor | Views : 1259 | Replies : 0


xui.UI.ThreeView

// The default code is a com class (inherited from xui.Com)
Class('App.xui_UI_TreeView', 'xui.Com',{
// Ensure that all the value of "key/value pair" does not refer to external variables
Instance:{
// To initialize instance(e.g. properties)
initialize : function(){
this.autoDestroy = true;
},
// To initialize internal components (mostly UI controls)
// *** If you're not a skilled, dont modify this function manually ***
iniComponents : function(){
// [[code created by CrossUI RAD Tools
var host=this, children=, ...
Read more : xui.UI.ThreeView | Views : 1313 | Replies : 0


xui.UI.ThreeBar

Class('App.linb_UI_TreeBar', 'xui.Com',{
Instance:{
_treebar1_onitemselected:function (profile, item, src) {
var value=profile.boxing().getUIValue();
//for selMode='none'
if(!value)value=item.id;
xui.message(value + ' selected');
},
iniComponents:function(){
// [[code created by CrossUI RAD Tools
var host=this, children=, append=function(child){children.push(child.get(0))};

append((new xui.UI.Block)
.setHost(host,"block1")
.setLeft(410)
.setTop(20)
.setWidth(250)
.setHeight(140)
.setBorder(true)
.setResizer(true)
);

host.block1.append((new xui.UI.TreeBar)
.setHost(host,"treebar2")
.setItems([{"id":"a", "caption":"itema", "tips":"item a", "sub":}, {"id":"b", "caption":"itemb", "tips":"item b"}, {"id":"c", "caption":"itemc", "tips":"item c"}])
.setGroup(true)
.onItemSelected("_treebar1_onitemselected")
);

append((new xui.UI.Pane)
.setHost(host,"panel2")
.setLeft(70)
.setTop(180)
.setWidth(250)
.setHeight(140)
);

host.panel2.append((new xui.UI.TreeBar)
.setHost(host,"treebar3")
.setItems([{"id":"a", "caption":"itema", ...
Read more : xui.UI.ThreeBar | Views : 1272 | Replies : 0


xui.UI.Gallery

Class('App.xui_UI_Gallery', 'xui.Com',{
Instance:{
//base Class for xui.Com
base:,
//requried class for the App
iniComponents:function(){
// [[code created by CrossUI RAD Tools
var host = this,
children = ,
append = function(child){
children.push(child.get(0))
};

append((new xui.UI.Gallery)
.setHost(host,"gallery2")
.setLeft(434)
.setTop(95)
.setWidth(270)
.setHeight(270)
.setItems()
.setItemWidth("120")
.setItemHeight("80")
.onItemSelected("_gallery2_onitemselected")
);

append((new xui.UI.Gallery)
.setHost(host,"gallery4")
.setLeft(70)
.setTop(120)
.setWidth(284)
.setHeight(167)
.setItems()
.setItemWidth("64")
.setItemHeight("64")
.onItemSelected("_gallery2_onitemselected")
);

return children;
// ...
Read more : xui.UI.Gallery | Views : 2657 | Replies : 0


 

Login  •  Register


Statistics

Total posts 986 • Total topics 327 • Total members 35

cron