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

7901 байт добавлено ,  14 лет назад
нет описания правки
Нет описания правки
Нет описания правки
 
<h3><span>Button (Кнопка)</span></h3>
'''Создание элеменов типа "button":'''
<source lang="javascript">
<!-- секция "1" -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui/build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/element/element-beta.js"></script>
<script type="text/javascript" src="yui/build/button/button-beta.js"></script>
 
<!-- секция "1" -->
 
<!-- секция "2" -->
<script type="text/javascript">
 
YAHOO.example.init = function () {
function onButtonClick(p_oEvent) {
alert("click!");
}
// Статическое создание кнопок с использованием существующих элементов в элементе с id="pushbuttonsfrommarkup"
YAHOO.util.Event.onContentReady("pushbuttonsfrommarkup", function () {
var oPushButton1 = new YAHOO.widget.Button("pushbutton1");
oPushButton1.on("click", onButtonClick);// вызов ф-ии onButtonClick при событии "click" на кнопке
var oPushButton2 = new YAHOO.widget.Button("pushbutton2", { onclick: { fn: onButtonClick } });// вызов ф-ии onButtonClick при клике на кнопке
var oPushButton3 = new YAHOO.widget.Button("pushbutton3", { onclick: { fn: onButtonClick } });
});
// Динамическое создание кнопок с использованием javascript в элементе с id="pushbuttonsfromjavascript"
var oPushButton7 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton7", container:"pushbuttonsfromjavascript" });
oPushButton7.on("click", onButtonClick); // вызов ф-ии onButtonClick при событии "click" на кнопке
var oPushButton8 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton8", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } });
// вызов ф-ии onButtonClick при клике на кнопке
 
} ();
 
</script>
<form id="button-example-form" name="button-example-form" method="post" action="#">
<fieldset id="pushbuttons">
<legend>Push Buttons</legend>
<fieldset id="pushbuttonsfrommarkup">
<legend>From Markup</legend>
<div>
<button type="button" id="pushbutton1" name="button1" value="Add">Add</button>
<input type="button" id="pushbutton2" name="button2" value="Add">
<input type="button" id="pushbutton3" name="button3" value="Add">
</div>
</fieldset>
<fieldset id="pushbuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
</form>
<!-- секция "2" -->
</source>
'''Создание элеменов меню в виде кнопки:'''
<source lang="javascript">
<!-- секция "1" -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css1" />
<link rel="stylesheet" type="text/css" href="yui/build/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="yui/build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/container/container_core.js"></script>
<script type="text/javascript" src="yui/build/menu/menu.js"></script>
<script type="text/javascript" src="yui/build/element/element-beta.js"></script>
<script type="text/javascript" src="yui/build/button/button-beta.js"></script>
<style type="text/css">
#button-example-form fieldset {
border: 2px groove #ccc;
margin: .5em;
padding: .5em;
}
#menubutton3menu,
#menubutton5menu {
position: absolute;
visibility: hidden;
border: solid 1px #000;
padding: .5em;
background-color: #ccc;
}
#button-example-form-postdata {
border: dashed 1px #666;
background-color: #ccc;
padding: 1em;
}
#button-example-form-postdata h2 {
margin: 0 0 .5em 0;
padding: 0;
border: none;
}
</style>
 
<!-- секция "1" -->
 
<!-- секция "2" -->
<script type="text/javascript">
 
YAHOO.example.init = function () {
// Статическое создание кнопок с использованием существующих элементов в элементе с id="menubuttonsfrommarkup"
YAHOO.util.Event.onContentReady("menubuttonsfrommarkup", function () {
var oMenuButton1 = new YAHOO.widget.Button("menubutton1", { type: "menu", menu: "menubutton1select" });
var oMenuButton3 = new YAHOO.widget.Button("menubutton3", { type: "menu", menu: "menubutton3menu" });
});// при загрузке страницы вызывается эта ф-я
function onMenuItemClick(p_sType, p_aArgs, p_oItem) {
oMenuButton4.set("label", p_oItem.cfg.getProperty("text"));
}
// Динамическое создание кнопок с использованием javascript в элементе с id="menubuttonsfromjavascript"
var aMenuButton4Menu = [
 
{ text: "one", value: 1, onclick: { fn: onMenuItemClick } }, //вызов ф-ии onMenuItemClick при событии "onclick" на элементе меню
{ text: "two", value: 2, onclick: { fn: onMenuItemClick } },
{ text: "three", value: 3, onclick: { fn: onMenuItemClick } }
];
var oMenuButton4 = new YAHOO.widget.Button(
{ type: "menu", label: "one", name: "mymenubutton", menu: aMenuButton4Menu, container: "menubuttonsfromjavascript" }
);
YAHOO.util.Event.onContentReady("menubuttonsfromjavascript", function () {
var oOverlay = new YAHOO.widget.Overlay("menubutton5menu", { visible: false });
oOverlay.setBody("Menu Button 5 Menu");
var oMenuButton5 = new YAHOO.widget.Button({ type: "menu", label: "Menu Button 5", menu: oOverlay });
oMenuButton5.appendTo(this);
oOverlay.render(this);
});// при загрузке страницы вызывается эта ф-я
function onExampleSubmit(p_oEvent) {
var bSubmit = window.confirm("Are you sure you want to submit this form?");
if(!bSubmit) {
YAHOO.util.Event.preventDefault(p_oEvent);
}
}
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
// если произойдет событие "submit" в форме с id="button-example-form", то нужно вызвать ф-ию onExampleSubmit
} ();
 
</script>
<form id="button-example-form" name="button-example-form" method="post" action="#">
 
<fieldset id="menubuttons">
<legend>Menu Buttons</legend>
 
<fieldset id="menubuttonsfrommarkup">
<legend>From Markup</legend>
<input type="submit" id="menubutton1" name="menubutton1_button" value="Menu Button 1">
<select id="menubutton1select" name="menubutton1select">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
<input type="button" id="menubutton3" name="menubutton3_button" value="Menu Button 3">
<div id="menubutton3menu" class="yui-overlay">
<div class="bd">Menu Button 3 Menu</div>
</div>
</fieldset>
 
<fieldset id="menubuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
 
</form>
<!-- секция "2" -->
</source>
 
258

правок