آموزش ساخت Window
آموزش ساخت پنجره (Window) در Kendo UI
متد ()kendoWindow
با استفاده از متد ()kendoWindow در Kendo UI، می توانید یک پنجره (Window) بسازید.
پیکربندی (Configuration)
| نام | توضیحات |
|---|---|
| actions | ("default: "Close) دکمه هایی را برای تعامل بیشتر با پنجره نمایش می دهد. ("Close", "Refresh", "Minimize", "Maximize") |
| animation | با استفاده از این خصوصیت می توانید، نحوه ی باز و بسته شدن پنجره را تغییر دهید. اگر آنرا با مقدار false تنظیم کنید، متحرک سازی لغو خواهد شد. |
| appendTo | (default: document.body) عنصری از پنجره که محتوای مورد نظر شما در آن افزوده (append) می شود. |
| content | یک URL یا گزینه هایی درخواستی که محتوای پنجره از طریق آن بارگذاری می شود. برای URLهای خارجی، یک عنصر iframe بصورت اتوماتیک ایجاد می شود. |
| contentObject | یک URL یا گزینه هایی درخواستی که محتوای پنجره از طریق آن بارگذاری می شود. برای URLهای خارجی، یک عنصر iframe بصورت اتوماتیک ایجاد می شود. |
| contentString | یک URL یا گزینه هایی درخواستی که محتوای پنجره از طریق آن بارگذاری می شود. برای URLهای خارجی، یک عنصر iframe بصورت اتوماتیک ایجاد می شود. |
| draggable | (default: true) قابلیت حرکت دادن پنجره وجود داشته باشد یا خیر. |
| iframe | بطور صریح بیان می کند که آیا محتوی درون iframe باید ایجاد شود. |
| maxHeight | (default: Infinity) حداکثر ارتفاع پنجره به پیکسل. |
| maxWidth | (default: Infinity) حداکثر عرض پنجره به پیکسل. |
| minHeight | (default: 50) حداکثر ارتفاع پنجره به پیکسل. |
| minWidth | (default: 50) حداقل ارتفاع پنجره به پیکسل. |
| modal | (default: false) مشخص می کند که آیا پنجره بصورتی روی صفحه اصلی نمایش داده شود که صفحه زیری کمی تار شود. (modal overlay) |
| resizable | (default: true) قابلیت تغییر اندازه پنجره. |
| title | یک متن را در نوار بالایی پنجره نمایش می دهد. |
| visible | (default: true) مشخص می کند که پنجره از ابتدا قابل رویت باشد یا خیر. |
در مثال زیر، نحوه ساخت پنجره (Window)، با استفاده از متد ()kendoWindow و تنظیم پارامترهای مختلف آن نشان داده شده است:
مثال (RTL)
<!DOCTYPE html>
<html>
<head>
<title>RTL support</title>
<meta charset="utf-8">
<link href="/../../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="/../../../styles/kendo.common.min.css" rel="stylesheet">
<link href="/../../../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="/../../../styles/kendo.default.min.css" rel="stylesheet">
<script src="/../../../js/jquery.min.js"></script>
<script src="/../../../js/kendo.web.min.js"></script>
<script src="/../../content/shared/js/console.js"></script>
<script>
</script>
</head>
<body>
<div id="example" class="k-content">
<div id="window" class="k-rtl">
<div class="armchair"><img src="/../../content/web/window/armchair-402.png" alt="Artek Alvar Aalto - Armchair 402" /> Artek Alvar Aalto - Armchair 402</div>
<p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p>
<p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p>
<p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p>
<p>Source: <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a></p>
</div>
<span id="undo" style="display:none" class="k-button">Click here to open the window.</span>
<script>
$(document).ready(function() {
var window = $("#window"),
undo = $("#undo")
.bind("click", function() {
window.data("kendoWindow").open();
undo.hide();
});
var onClose = function() {
undo.show();
}
if (!window.data("kendoWindow")) {
window.kendoWindow({
width: "600px",
title: "About Alvar Aalto",
close: onClose
});
}
});
</script>
</div>
</body>
</html>
رویدادهای Window در Kendo UI
| نام | توضیحات |
|---|---|
| activate | زمانی که متحرک سازی پنجره برای نمایش آن به پایان رسید، اتفاق می افتد. |
| close | زمانی که پنجره توسط کاربر یا اجرای متد ()close بسته شود، اتفاق می افتد. |
| deactivate | زمانی که متحرک سازی پنجره برای بسته شده آن به پایان رسید، اتفاق می افتد. |
| dragend | زمانی که پنجره حرکت داده شده توسط کاربر، رها شود، اتفاق می افتد. |
| dragstart | زمانی که پنجره توسط کاربر شروع به حرکت داده می شود، اتفاق می افتد. |
| error | زمانی که یک درخواست آجاکسی با error مواجه می شود، اتفاق می افتد. |
| open | زمانی که پنجره توسط کاربر یا اجرای متد ()open باز شود، اتفاق می افتد. |
| refresh | زمانی که محتوای پنجره از طریق AJAX مجدد بارگذاری شود، اتفاق می افتد. |
| resize | زمانی که اندازه پنجره توسط کاربر تغییر کند، اتفاق می افتد. |
در مثال زیر، هر تغییری که در پنجره (Window) صورت گیرد، یک پیغام چاپ می شود:
مثال (Event)
<div id="window"></div>
<span id="undo" style="display:none" class="k-group">Click here to open the window.</span>
<script>
function onOpen(e) {
kendoConsole.log("event :: open");
}
function onClose(e) {
$("#undo").show();
kendoConsole.log("event :: close");
}
function onActivate(e) {
kendoConsole.log("event :: activate");
}
function onDeactivate(e) {
kendoConsole.log("event :: deactivate");
}
function onRefresh(e) {
kendoConsole.log("event :: refresh");
}
function onResize(e) {
kendoConsole.log("event :: resize");
}
function onDragStart(e) {
kendoConsole.log("event :: dragstart");
}
function onDragEnd(e) {
kendoConsole.log("event :: dragend");
}
$("#undo")
.bind("click", function() {
$("#window").data("kendoWindow").open();
$("#undo").hide();
});
$(document).ready(function() {
if (!$("#window").data("kendoWindow")) {
$("#window").kendoWindow({
width: "630px",
height: "315px",
title: "Rams's Ten Principles of Good Design",
actions: ["Refresh", "Close"],
content: "../../content/web/window/ajax/ajaxContent1.html",
visible: false,
open: onOpen,
activate: onActivate,
close: onClose,
deactivate: onDeactivate,
refresh: onRefresh,
resize: onResize,
dragstart: onDragStart,
dragend: onDragEnd
}).data("kendoWindow").open();
}
});
</script>
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 10836
