It is currently Mon Aug 21, 2017 7:55 pm

News News of CrossUI Code Snaps

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

Find code here before you post.

Form validator dynamically

Class('App.tech_form_v3', '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.Div)
.setHost(host,"div13")
.setLeft(60)
.setTop(70)
.setWidth(130)
.setHeight(20)
.setHtml("Using ValueFormat")
);

append((new xui.UI.Div)
.setHost(host,"div12")
.setLeft(170)
.setTop(30)
.setWidth(420)
.setHeight(20)
.setHtml("Format Validator (example : only number) -- check dynamically")
);

append((new xui.UI.Input)
.setHost(host,"input2")
.setLeft(210)
.setTop(70)
.setWidth(260)
.setValueFormat("^-?(\\d\\d*\\.\\d*$)|(^-?\\d\\d*$)|(^-?\\.\\d\\d*$)")
.setTips("Input number please")
.setTipsErr(": (")
.setTipsOK(": )")
.setTipsBinder("divB1")
.setDynCheck(true)
);

append((new xui.UI.Div)
.setHost(host,"divB1")
.setLeft(490)
.setTop(70)
.setWidth(230)
.setHeight(20)
.setHtml("Using ValueFormat")
);

return children;
// ]]code created by ...
Read more : Form validator dynamically | Views : 2262 | Replies : 0


Form validator with tips binder

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

append((new xui.UI.Input)
.setHost(host,"input2")
.setLeft(210)
.setTop(70)
.setWidth(260)
.setValueFormat("^-?(\\d\\d*\\.\\d*$)|(^-?\\d\\d*$)|(^-?\\.\\d\\d*$)")
.setTips("Input number please")
.setTipsErr(": (")
.setTipsOK(": )")
.setTipsBinder("divB1")
);

append((new xui.UI.Div)
.setHost(host,"div12")
.setLeft(170)
.setTop(30)
.setWidth(430)
.setHeight(20)
.setHtml("Format Validator (example : only number) -- binder tips info to a Div")
);

append((new xui.UI.Div)
.setHost(host,"div13")
.setLeft(60)
.setTop(70)
.setWidth(130)
.setHeight(20)
.setHtml("Using ValueFormat")
);

append((new xui.UI.Div)
.setHost(host,"divB1")
.setLeft(490)
.setTop(70)
.setWidth(230)
.setHeight(20)
.setHtml("Using ValueFormat")
);

return children;
// ...
Read more : Form validator with tips binder | Views : 3733 | Replies : 0


Simple Form validator

Class('App.tech_form_v1', '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.Input)
.setHost(host,"input2")
.setLeft(210)
.setTop(70)
.setWidth(260)
.setValueFormat("^-?(\\d\\d*\\.\\d*$)|(^-?\\d\\d*$)|(^-?\\.\\d\\d*$)")
.setTips("Input number please")
.setTipsErr(": (")
.setTipsOK(": )")
);

append((new xui.UI.Div)
.setHost(host,"div12")
.setLeft(170)
.setTop(30)
.setWidth(300)
.setHeight(20)
.setHtml("Format Validator (example : only number)")
);

append((new xui.UI.Div)
.setHost(host,"div13")
.setLeft(60)
.setTop(70)
.setWidth(130)
.setHeight(20)
.setHtml("Using ValueFormat")
);

append((new xui.UI.Input)
.setHost(host,"input9")
.setLeft(210)
.setTop(110)
.setWidth(260)
.setTips("Input number please")
.setTipsErr(": (")
.setTipsOK(": )")
.beforeFormatCheck("_input9_beforeFormatCheck")
);

append((new xui.UI.Div)
.setHost(host,"div18")
.setLeft(60)
.setTop(110)
.setWidth(130) ...
Read more : Simple Form validator | Views : 2280 | Replies : 0


Several ways to customize event functions

   
Class('App.tech_UI_cf', 'xui.Com',{
Instance:{
_button21_onclick:function (profile, e, value) {
if(profile.CF.click){
_.tryF(profile.CF.click);
}else
xui.message('click fired in normal onclick event')
},
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,"button21")
.setLeft(110)
.setTop(100)
.setCaption("button21")
.onClick("_button21_onclick")
);

append((new xui.UI.Button)
.setHost(host,"button24")
.setLeft(270)
.setTop(100)
.setCaption("button21")
.onClick("_button21_onclick")
.setCustomFunction({"click":function () {
xui.message("click fired in Custom Functions");
}})
);

return children;
// ]]code created by CrossUI RAD Tools
}
}
});
   
Read more : Several ways to customize event functions | Views : 2089 | Replies : 0


Several ways to customize Appearances by CSS class

   
Class('App.tech_UI_cc', '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.List)
.setHost(host,"list3")
.setItems()
.setLeft(170)
.setTop(70)
);

append((new xui.UI.List)
.setHost(host,"list4")
.setItems()
.setLeft(330)
.setTop(70)
.setCustomClass({"ITEMS":"css-class-a", "ITEM":"css-class-b"})
);

return children;
// ]]code created by CrossUI RAD Tools
},
_onready:function () {
xui.CSS.addStyleSheet(".css-class-a{border:dashed 2px #00ff00} .css-class-b{font-size:14px; border:solid 1px #ccc; margin: 4px;}", '__class_added')
}
}
});
   
Read more : Several ways to customize Appearances by CSS class | Views : 2254 | Replies : 0


Several ways to customize Behaviors

   
Class('App.tech_UI_cb', 'xui.Com',{
Instance:{
_button21_onclick:function (profile, e, value) {
xui.message('click fired in normal onclick event')
},
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,"button21")
.setLeft(110)
.setTop(100)
.setCaption("button21")
.onClick("_button21_onclick")
);

append((new xui.UI.Button)
.setHost(host,"button24")
.setLeft(270)
.setTop(100)
.setCaption("button21")
.onClick("_button21_onclick")
.setCustomBehavior({"onClick":function () {
xui.message("click fired in Custom Behaviors");
}})
);

return children;
// ]]code created by CrossUI RAD Tools
}
}
});
   
Read more : Several ways to customize Behaviors | Views : 2112 | Replies : 0


Several ways to customize Appearances

   
Class('App.tech_UI_ca', '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.List)
.setHost(host,"list3")
.setItems()
.setLeft(170)
.setTop(70)
);

append((new xui.UI.List)
.setHost(host,"list4")
.setItems()
.setLeft(330)
.setTop(70)
.setCustomStyle({"ITEMS":"border:dashed 2px #00ff00", "ITEM":"font-size:14px; border:solid 1px #ccc; margin: 4px;"})
);

append((new xui.UI.List)
.setHost(host,"list5")
.setItems()
.setLeft(490)
.setTop(70)
);

return children;
// ]]code created by CrossUI RAD Tools
}
}
});
   
Read more : Several ways to customize Appearances | Views : 1694 | Replies : 0


UI Event Tester

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

append((new xui.UI.Input)
.setHost(host,"input1")
.setLeft(100)
.setTop(40)
.setWidth(278)
.beforeValueSet("_traceEvent")
.afterValueSet("_traceEvent")
.beforeUIValueSet("_traceEvent")
.afterUIValueSet("_traceEvent")
.beforeHoverEffect("_traceEvent")
.onRender("_traceEvent")
.onLayout("_traceEvent")
.onDestroy("_traceEvent")
.onHotKeydown("_traceEvent")
.onHotKeypress("_traceEvent")
.onHotKeyup("_traceEvent")
.onShowTips("_traceEvent")
.onFocus("_traceEvent")
.onBlur("_traceEvent")
.beforeDirtyMark("_traceEvent")
.beforeFormatCheck("_traceEvent")
.beforeFormatMark("_traceEvent")
);

append((new xui.UI.Panel)
.setHost(host,"panelbar2")
.setDock("none")
.setLeft(100)
.setTop(70)
.setWidth(278)
.setHeight(298)
.setZIndex(1)
.setCaption("Event Tracer")
.setCustomStyle({"KEY":"border:solid 1px #ccc"})
);

append((new xui.UI.Button)
.setHost(host,"button3")
.setLeft(100)
.setTop(390)
.setCaption("Clear")
.setWidth(278)
.onClick("_button3_onclick")
);

return children;
// ]]code created by CrossUI RAD Tools
},
_traceEvent:function(p) ...
Read more : UI Event Tester | Views : 1662 | Replies : 0


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 : 2670 | 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 : 1775 | Replies : 0


 

Login  •  Register


Statistics

Total posts 983 • Total topics 324 • Total members 35

cron