유이 3 기초.
5868 단어 JavaScript응용 서버cssYahooyui
1.Getting Started( http://developer.yahoo.com/yui/3/ ): (1).실천에서 유이백이 제공한 예를 검증하다.기본 YUI 모듈(YUI module)에서 시작하여 노드(Node)로 천천히 이동하는 것을 권장합니다.다른 실용 프로그램(예를 들어 IO와 Drag, Drop)은 응용 프로그램 개발에 하이라이트를 더했다. (2).기억해 주십시오: Yui의 사이트에는 모든 구성 요소에 대해 Yui 라이브러리 작성자가 작성한 완전한 사용자 가이드북이 있습니다. 이것은 가장 좋은 자원입니다.또한 문제가 발생할 경우 API 문서를 보고 도움을 요청할 수 있습니다. (3).Visit the Gallery.YUI3 Gallery는 수백 명의 사용자가 제공하는 YUI3을 기반으로 하는 모듈(modules)을 포함하고 있으며, YUI()를 통과할 수 있습니다.use () 방법은 직접 인용합니다. (4).Start building (구축 시작) 은 Yui Confiigurator를 사용하여 Yui3 패키지가 아닌 페이지를 설정하거나 자체 개발을 기반으로 합니다. (5).유이 카페의 일원이 되다.
2. JS와 Yui의 DOM JS에서 DOM:
<script type="text/javascript">
function tdom () {
var dom = document.getElementById("other");
dom.setAttribute("width",100);
}
</script>
유이 조작 DOM: 유이 안에 DOM이 봉인되어 있고 DOM의 조작 방법을 모두 다시 했습니다. 만약에 위의 조작을 똑같이 실현한다면 유이 3에 이렇게 써야 합니다.
<script type="text/javascript" src="yui-min.js"></script>
<script type="text/javascript">
YUI().use("node", function(Y){
var dom = Y.one("#other");
//var dom = Y.one(document.getElementById("other"));
dom.setStyle("width",100);
});
</script>
YUI () 함수는 YUI 실례를 생성하고 되돌려줍니다. 매개 변수에 debug 같은 설정 항목을 설정할 수 있습니다. 여기는 아무것도 설정하지 않았습니다. 'node '매개 변수는 불러올 모듈을 가리킨다. 컨트롤러를 통해 페이지에서 node 모듈에 필요한 모든 js 파일을 불러올 수 있습니다.
YUI().use () 방법의 매개 변수는'node','이벤트','json'등이 있는데 이것은 모두 Yui의 moudle이다.마지막 매개 변수는 리셋 함수입니다. 이 함수는 모든 지정한 모듈의 불러오기를 끝낸 후에 호출됩니다. 호출할 때 매개 변수를 전달합니다: YUI의 실례입니다.
：
YUI().use("node", function(Y) {
//......
});
YUI().use("node", "resize", function(Y) {
//......
}); 3.yui모듈
4. 유이를 뛰게 하기
YUI ：
<html>
<head>
<script type="text/javascript" src="yui-min.js"></script>
<script type="text/javascript">
YUI().use("node",function(Y){
var but = Y.one("#id_but");
but.on("click",function(e){
alert(e.target.get('tagName')); //INPUT
var div = Y.one("#other");
alert(div.getX() + ":" +div.getStyle("width")); //60 200
div.setStyle('backgroundColor', '#D00050');
div.set("innerHTML", "Welcome");
});
});
</script>
</head>
<body>
<input type="button" nam="n_but" id="id_but" value="click"/>
<div id="other" style="position:absolute;border:2px solid skyblue;width:200px;height:200px;background-color:yellow;top:100px;left:60px;"></div>
</body>
</html> YUI ：
<html>
<head>
<script type="text/javascript" src="yui-min.js"></script>
<script type="text/javascript">
YUI().use("resize",function(Y){
var resize = new Y.Resize({
node: '#other'
});
});
</script>
</head>
<body>
<div id="other" style="position:relative;border:2px solid skyblue;width:200px;height:200px;background-color:yellow;top:100px;left:60px"></div>
</body>
</html> YUI ：
<html>
<head>
<script type="text/javascript" src="yui-min.js"></script>
<script type="text/javascript">
YUI().use("resize", "node",function(Y){
var but = Y.one("#id_but");
but.on("click",function(e){
alert(e.target.get('tagName')); //INPUT
var div = Y.one("#other");
alert(div.getX() + ":" +div.getStyle("width")); //60 200
div.setStyle('backgroundColor', '#D00050');
div.set("innerHTML", "Welcome");
var resize = new Y.Resize({
node: '#other'
});
});
});
</script>
</head>
<body>
<input type="button" nam="n_but" id="id_but" value="click"/>
<div id="other" style="position:relative;border:2px solid skyblue;width:200px;height:200px;background-color:yellow;top:100px;left:60px"></div>
</body>
</html>설명:
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
