Beautiful widgets, supports skin replacement and subsequent development of new skins _ javascript skills

Source: Internet
Author: User
Beautiful widgets, supports skin replacement and later development of new skin Author: ucren
Demo: http://ucren.com/ucren-examples/widgets.html

Known defects:
1. The skin swap function is slow due to the large amount of image changes.
2. widgets does not support polymorphism.

Problems to be Solved in the future:
1. Pre-upload images
2. integrate with the framework vjbox

New controls to be developed in the future:
1. Slider regulator (similar to windows volume regulator)
2. progress bar
3. outlook menu
4. Tree
Widgets. js

The Code is as follows:


/*
* Ucren example.
* Author: Dron
* Date: 2007-3-31
* Contact: ucren.com
*/

Var example = Ucren. getElement ("example ");

/*---Define button ----------*/
Var testbtn = new Ucren. Button ({caption: "example Button 1", width: 80, handler: function () {Ucren. alert ("Hello world! "," Example button 1 ");}});
Testbtn. applyTo ("test-btn ");

Var testbtn2 = new Ucren. Button ({caption: "example Button 2", width: 80, disabled: true });
Testbtn2.applyTo ("test-btn2 ");

Var defaultbtn = new Ucren. Button ({caption: "classic style", width: 74, handler: function () {Ucren. useSkin ("default ");}});
Defaultbtn. applyTo ("default-btn ");

Var xpbtn = new Ucren. Button ({caption: "XP style", width: 74, handler: function () {Ucren. useSkin ("xp ");}});
Xpbtn. applyTo ("xp-btn ");

Var xpbtn = new Ucren. Button ({caption: "QQ style", width: 74, handler: function () {Ucren. useSkin ("qq ");}});
Xpbtn. applyTo ("qq-btn ");

Var vistabtn = new Ucren. Button ({caption: "Vista style", width: 74, handler: function () {Ucren. useSkin ("vista ");}});
Vistabtn. applyTo ("vista-btn ");

Var examplebtn = new Ucren. Button ({caption: "display example form", width: 100, handler: function () {win1.show ();}});
Examplebtn. applyTo ("example ");

Var alertbtn = new Ucren. Button ({caption: "Alert", width: 60, handler: function () {Ucren. alert ("Test! "," Simulate Alert ");}});
Alertbtn. applyTo ("alert-btn ");

Var promptbtn = new Ucren. button ({caption: "Prompt", width: 60, handler: function () {Ucren. prompt ("enter your name:", "anonymous", returnValue );}});
Promptbtn. applyTo ("prompt-btn ");

Var confirmbtn = new Ucren. Button ({caption: "Confirm", width: 60, handler: function () {Ucren. confirm ("Do you really want to do this? "," Please confirm: ", returnValue );}});
Confirmbtn. applyTo ("confirm-btn ");

Var ewin2btn = new Ucren. Button ({caption: "example form 2", width: 80, disabled: true, handler: function () {win2.show ();}});
Ewin2btn. applyTo ("ewin2-btn ");

Var ewin3btn = new Ucren. Button ({caption: "example form 3", width: 80, disabled: true, handler: function () {win3.show ();}});
Ewin3btn. applyTo ("ewin3-btn ");

Var cboxvaluebtn = new Ucren. button ({caption: "value", width: 40, handler: function () {Ucren. alert (testckbox. getValue (), "the value of the multiple choice box is ");}});
Cboxvaluebtn. applyTo ("cbox-value ");

Var rdvaluebtn = new Ucren. button ({caption: "value", width: 40, handler: function () {Ucren. alert (testradio. getValue (), "the value of a single sequence is ");}});
Rdvaluebtn. applyTo ("radio-value ");

Var cbvaluebtn = new Ucren. button ({caption: "value", width: 40, handler: function () {Ucren. alert (testcombo. getValue (), "the value of the drop-down list is ");}});
Cbvaluebtn. applyTo ("combobox-value ");


/*---Define the form ----------*/
Var win1 = new Ucren. Window ({
Left: 100, top: 100, width: 430, height: 350,
MinWidth: 430, minHeight: 350,
Panel: "example-panel ",
Caption: "example form ",
Icon: "images/ico.gif ",
MinButton: true, maxButton: true, cloButton: true, resizeAble: true,
OnOpen: function () {example. setDisplay (false );},
OnClose: function () {example. setDisplay (true );},
OnResize: function (){},
OnMove: function (){},
OnFocus: function (){},
OnBlur: function (){}
});

Var win2 = new Ucren. Window ({
Left: 260, top: 30, width: 300, height: 250,
MinWidth: 300, minHeight: 250,
Panel: "example-panel2 ",
Caption: "example form 2 ",
Icon: "images/ico.gif ",
MinButton: true, maxButton: true, cloButton: true, resizeAble: true,
OnOpen: function () {ewin2btn. setDisabled (true );},
OnClose: function () {ewin2btn. setDisabled (false );},
OnResize: function (){},
OnMove: function (){},
OnFocus: function (){},
OnBlur: function (){}
});

Var win3 = new Ucren. Window ({
Left: 290, top: 210, width: 380, height: 150,
MinWidth: 380, minHeight: 150,
Panel: "example-panel3 ",
Caption: "example form 3 ",
Icon: "images/ico.gif ",
MinButton: true, maxButton: false, cloButton: true, resizeAble: false,
OnOpen: function () {ewin3btn. setDisabled (true );},
OnClose: function () {ewin3btn. setDisabled (false );},
OnResize: function (){},
OnMove: function (){},
OnFocus: function (){},
OnBlur: function (){}
});

Win2.show ();
Win3.show ();
Win1.show (); // put win1 at the end of show, so that win1 can be initialized and placed at the top layer.

/*---Define the sample text box ----------*/
Var testtxf1 = new Ucren. TextField ({text: "Test! ", Width: 120 });
Testtxf1.applyTo ("test-txf1 ");

Var testtxf2 = new Ucren. TextField ({text: "Test! ", Width: 120, disabled: true });
Testtxf2.applyTo ("test-txf2 ");

/*---Define the multiple choice box ----------*/
Var testckbox = new Ucren. CheckBox ([
{Container: "test-cbox1", value: "1", lable: "option 1", checked: true },
{Container: "test-cbox2", value: "2", lable: "option 2 "},
{Container: "test-cbox3", value: "3", lable: "option 3", disabled: true },
{Container: "test-cbox4", value: "4", lable: "option 4", checked: true, disabled: true}
]);

/*--Define a single sequence ----------*/
Var testradio = new Ucren. Radio ([
{Container: "test-radio1", value: "1", lable: "option 1 "},
{Container: "test-radio2", value: "2", lable: "option 2", checked: true },
{Container: "test-radio3", value: "3", lable: "option 3 "},
{Container: "test-radio4", value: "4", lable: "option 4", disabled: true}
]);

/*---Define the drop-down box ----------*/
Var combodatas = new Ucren. DataVess ({
Fields: ["text", "value"],
Data :[
["Option 1", "option-1"],
["Option 2", "option-2"],
["Option 3", "option-3"],
["Option 4", "option-4"],
["Option 5", "option-5"],
["Option 6", "option-6"],
["Option 7", "option-7"],
["Option 8", "option-8"],
["Option 9", "option-9"],
["Option 10", "option-10"],
["Option 11", "option-11"],
["Option 12", "option-12"],
["Option 13", "option-13"],
["Option 14", "option-14"]
]
});
Var testcombo = new Ucren. ComboBox ({width: 120, value: "option-2", disabled: false, data: combodatas });
Testcombo. applyTo ("test-combobox ");

/*--Functions ----------*/
Function returnValue (v) {Ucren. alert (v + "", "Return Value ");}


Local download
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.