Yui: различия между версиями

2850 байт добавлено ,  14 лет назад
нет описания правки
Нет описания правки
Нет описания правки
// подсказка взятая из 'title'
</script>
<!-- 2 -->
</source>
'''Создание простой панели:'''
<source lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/container/assets/container.css" />
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui/build/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="yui/build/container/container.js"></script>
<!-- 1 -->
 
<!-- 2 -->
<div id="container"></div>
<script>
YAHOO.namespace("example.container");
 
function init() {
// статическое создание панели
YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { width:"300px", visible:false, constraintoviewport:true } );
YAHOO.example.container.panel1.render();
// динамическое создание панели
YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2", { width:"300px", visible:false, constraintoviewport:true } );
YAHOO.example.container.panel2.setHeader("<div class='tl'></div><span>Panel #2 from Script</span><div class='tr'></div>");
YAHOO.example.container.panel2.setBody("This is a dynamically generated Panel.");
YAHOO.example.container.panel2.setFooter("<span>End of Panel #2</span>");
YAHOO.example.container.panel2.render("container");
 
YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.panel1.show, YAHOO.example.container.panel1, true);
YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.panel1.hide, YAHOO.example.container.panel1, true);
//назначение вызовов ф-ий для событий над элементами для статически созданной панели
YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.panel2.show, YAHOO.example.container.panel2, true);
YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.panel2.hide, YAHOO.example.container.panel2, true);
//назначение вызовов ф-ий для событий над элементами для динамически созданной панели
}
 
YAHOO.util.Event.addListener(window, "load", init);
</script>
 
<div>
<button id="show1">Show panel1</button>
<button id="hide1">Hide panel1</button>
</div>
 
<div id="panel1">
<div class="hd"><div class="tl"></div><span>Panel #1 from Markup</span><div class="tr"></div></div>
<div class="bd">This is a Panel that was marked up in the document.</div>
<div class="ft"><div class="bl"></div><span>End of Panel #1</span><div class="br"></div></div>
</div>
 
<div>
<button id="show2">Show panel2</button>
<button id="hide2">Hide panel2</button>
</div>
<!-- 2 -->
</source>
258

правок