스킨 변경 및 향후 새로운 skins_javascript 기술 개발을 지원하는 아름다운 위젯

저자: ucren
시연 효과: http://ucren.com/ucren-examples/widgets.html

알려진 결함:
1. 이미지 변화 비교 용량이 커서 로딩이 좀 느립니다.
2. 위젯은 다형성을 지원하지 않습니다.

향후 고려해야 할 문제:
1. 이미지 사전 로드
2. 프레임워크 vjbox와 통합

향후 고려할 새로운 컨트롤:
1 . 슬라이더 조절기(Windows 볼륨 조절기와 유사)
2. 진행률 표시줄
3. Outlook 메뉴

widgets.js

코드 복사 코드는 다음과 같습니다.

/*
* Ucren 예시
* 작성자:Dron
* 날짜:2007-3-31
* 연락처:ucren.com
*/

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

/* - - - - - - - - - - - 버튼 정의 - - - - - - - - - - */
var testbtn = new Ucren.Button({ caption: "예제 버튼 1", width: 80, handler: function (){ Ucren.alert("Hello world!", "예제 버튼 1"); } });
testbtn.applyTo("test-btn");

var testbtn2 = new Ucren.Button({ caption: "예제 버튼 2", 너비: 80, 비활성화: 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 스타일", 너비: 74, 핸들러: 함수( ){ Ucren.useSkin("xp"); } });
xpbtn.applyTo("xp-btn");

var xpbtn = new Ucren.Button({ 캡션: "QQ 스타일" , 너비: 74, 핸들러: function (){ Ucren.useSkin("qq"); } });
xpbtn.applyTo("qq-btn")

var vistabtn = new Ucren. Button( { 캡션: "Vista 스타일", 너비: 74, 핸들러: function (){ Ucren.useSkin("vista"); } })
vistabtn.applyTo("vista-btn");
var examplebtn = new Ucren.Button({ caption: "예제 양식 표시", 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 프롬프트btn = new Ucren.Button({ caption: "Prompt", width: 60, handler: function (){ Ucren.prompt ( "이름을 입력하세요:", "Anonymous", returnValue);} });
프롬프트btn.applyTo("prompt-btn")

var verifybtn = new Ucren.Button({ caption : "확인", 너비: 60, 핸들러: function (){ Ucren.confirm("정말 이 작업을 하시겠습니까?", "확인하세요:", returnValue);} });
verifybtn.applyTo("confirm-btn");

var ewin2btn = new Ucren.Button({ caption: "예제 양식 2 ", 너비: 80, 비활성화: true, 핸들러: function (){ win2.show(); } });
ewin2btn.applyTo("ewin2-btn");

var ewin3btn = new Ucren.Button({ 캡션: "예제 양식 3", 너비: 80, 비활성화: true, 핸들러: function (){ win3.show(); } })
ewin3btn.applyTo("ewin3-btn ") ;

var cboxvaluebtn = new Ucren.Button({ caption: "value", width: 40, handler: function (){ Ucren.alert(testckbox.getValue(), "다중 선택 값 box is"); } });
cboxvaluebtn.applyTo("cbox-value");

var rdvaluebtn = new Ucren.Button({ caption: "value", width: 40, handler: function (){ Ucren.alert(testradio.getValue(), "라디오 버튼의 값은") } })
rdvaluebtn.applyTo("radio-value"); cbvaluebtn = new Ucren.Button({ caption: "value", width: 40, handler: function (){ Ucren.alert(testcombo.getValue(), "드롭다운 상자의 값은"); } }) ;
cbvaluebtn.applyTo("combobox-value")


/* - - - - - - - - - - 양식 정의 - - - - - - - - - */
var win1 = new Ucren.Window({
왼쪽: 100, 위쪽: 100, 너비: 430, 높이: 350,
minWidth: 430, minHeight: 350,
패널: " example-panel",
캡션 : "샘플 양식",
아이콘 : "images/ico.gif",
minButton : true, maxButton : true, cloButton : true, resizeAble : true,
onOpen : 함수(){ example.setDisplay(false) },
onClose : 함수(){ example.setDisplay(true) },
onResize : 함수(){ },
onMove : 함수 (){ },
onFocus: 함수(){},
onBlur: 함수(){}
})

var win2 = new Ucren.Window({
왼쪽: 260, 위쪽: 30, 너비: 300, 높이: 250,
minWidth: 300, minHeight: 250,
패널: "example-panel2",
caption: "예제 형식 2",
icon : "images/ico.gif",
minButton : true, maxButton : true, cloButton : true, resizeAble : true,
onOpen : function (){ ewin2btn.setDisabled(true) },
onClose : 함수(){ ewin2btn.setDisabled(false) },
onResize : 함수(){ },
onMove : 함수(){ },
onFocus : 함수(){ },
onBlur : function (){ }
});

var win3 = new Ucren.Window({
왼쪽: 290, 위쪽: 210, 너비: 380, 높이: 150,
minWidth : 380, minHeight : 150,
패널 : "example-panel3",
캡션 : "예제 형식 3",
아이콘 : "images/ico.gif",
minButton : true, maxButton : false, cloButton : true, resizeAble : false,
onOpen : function (){ ewin3btn.setDisabled(true) },
onClose : 함수(){ ewin3btn.setDisabled(false) },
onResize : 함수(){ },
onMove : 함수(){ },
onFocus : 함수() { },
onBlur : function (){ }
})

win2.show()
win3.show()
win1.show(); win1을 쇼 끝에 놓으면 초기화 후 win1이 맨 위에 배치될 수 있습니다.

/* - - - - - - - - - - - - 샘플 텍스트 상자 정의 - - - - - - - - - - - */
var testtxf1 = new Ucren.TextField({ text: "Test!", width: 120 })
testtxf1.applyTo("test-txf1")

var testtxf2 = new Ucren.TextField({ text: "Test!", width: 120, 비활성화: true })
testtxf2.applyTo("test-txf2")/* - - - - - - - - - - - 여러 체크박스 정의 - - - - - - - - - - */
var testckbox = new Ucren.CheckBox([
{ 컨테이너: "test-cbox1", value: " 1", lable: "옵션 1", 확인됨: true },
{ 컨테이너: "test-cbox2", 값: "2", lable: "옵션 2" },
{ 컨테이너: "test- cbox3", 값: "3", lable: "옵션 3", 비활성화: true },
{ 컨테이너: "test-cbox4", 값: "4", lable: "옵션 4", 선택됨: true, 비활성화: true }
])

/* - - - - - - - - - - 라디오 버튼 정의 - - - - - - - - - - */
var testradio = new Ucren.Radio( [
{ 컨테이너: "test-radio1", 값: "1", lable: "옵션 1" },
{ 컨테이너: "test-radio2", 값: "2" , lable: "옵션 2", 확인됨: true },
{ 컨테이너: "test-radio3", 값: "3", lable: "옵션 3" },
{ 컨테이너: "test-radio4" , 값: "4" , lable: "옵션 4", 비활성화됨: true }
])

/* - - - - - - - - - - - 드롭다운 상자 정의 - - - - - - - - - - * /
varombodatas = new Ucren.DataVess({
필드: ["text", "value"],
데이터: [
["option1" , "옵션-1"],
["옵션 2" , "옵션-2" ],
["옵션 3" , "옵션-3" ],
["옵션 4" , " 옵션-4" ],
                                                                                                                                      '옵션 8', '옵션-8'을 통해 ],                                    > ],
["옵션-13", "옵션-13"],
["옵션-14" , "옵션-14"]
]
})
var testcombo = new Ucren.ComboBox({width: 120, value: "option-2", 비활성화: false, 데이터: 콤보데이터 });
testcombo.applyTo("test-combobox");

/* - - - - - - - - - - 기능 - - - - - - - - - - */
function returnValue(v) { Ucren.alert(v "", "return value") }

로컬 다운로드