<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="~/content/css/bootstrap-dialog.min.css" rel=stylesheet"></link> <script src="~/Scripts/bootstrap-dialog.min.js"></script>
var dialog=new BootstrapDialog(); dialog.Title="عنوان دیالوگ"; dialog.Message="متن پنجره"; //فعال سازی این خصوصیت باعث میشود یک دکمه بستن به //پنجره اضافه شده و همچنین توسط کلیک کاربر در خارج از صفحه //باعث بسته شدن پنجره شود یا استفاده از کلید //ESC dialog.Closable=false; //تغییر اندازه دیالوگ Dialog.Size=BootstrapDialogSize.SizeNormal; //رنگ بندی دیالوگ را تغییر میدهد.مقدار زیر باعث میشود //دیالوگ با رنگبندی قرمز نمایش داده شود تا برای نمایش خطاها مناسب باشد Dialog.Type=BootstrapDialogType.Danger; //برای اعمال کردن یک کلاس استابل دلخواه Dialog.CssClass=""; //آیکن برای دیالوگ-استفاده از نام کلاس آیکنهای بوت استراپ Dialog.SpinIcon=""; //یک توصیف است که فقط در کد صفحه نمایش داده میشود //استفاده خاصی ندارد Dialog.Description=""; //بعد از بستن دیالوگ ، کدهای آن در صفحه حذف خواهند شد //اگر میخواهید کد را بارها و بارها نمایش دهید //آن را با مقدار ناصحیح مقدار دهی کنید dialog.AutoDestory=false; //========== رویدادها ============= //این رویدا قبل از نمایش دیالوگ نمایش داده میشود dialog.OnShow="function(){alert('before Dialog');}"; //این رویداد بعد از نمایش دیالوگ اجرا میشود dialog.OnShown="function(){alert('after Dialog shown');}"; //موقع درخواست بستن دیالوگ قبل از بسته شدن اجرا میگردد dialog.OnHide="function(){alert('before Dialog close');}"; //بعد از بسته شدن دیالوگ اجرا میشود dialog.OnHidden="function(){alert('after Dialog close');}";
@{ var dialog=new BootstrapDialog(); dialog.... // ........ } @HTML.BootstrapDialog("example1",dialog)
var dialog=new BootstrapDialog(); var cancelButton=new BootstrapDialogButton("cancelButton"); //cancelButton.id="cancelButton"; cancelButton.label="Cancel"; cancelButton.Key=65; cancelButton.Action="function(){alert('You Clicked!');}"; dialog.AddButton(cancelButton);
dialog.RemoveButton("cancelButton");
داده ها
dialog.AddData("key","value");
dialog.RemoveData("key");
متدها
- دستی: که میتوانید اطلاعات متدها را در همان صفحه مثال و مستندات ببینید و از نامی که به دکمهها و پنجرهها میدهید آنها را اعمال کنید.
- با استفاده از کلاس: کلاس ما شامل دو متد دیگر برای کنترل متدها میباشد. حدود 13 متد در آن پشتیبانی میشود که باعث میشود در بسیاری از اوقات دیگری نیازی به دانستن نام متدها نداشته باشید. یکی از متدها برای استفاده در Helper طراحی شده است که خروجی آن از نوع MvcHtmlString است و متد دیگر خروجی string دارند که میتوانید در صورتیکه خواستید، در رویدادها و خارج از Html Helper از آن استفاده کنید.
$( "#btnshowpopup" ).click(function() { @HTML.RunBootstrapDialogMethod("example1",BootstrapDialogMethods.Open) });
$( "#btnshowpopup" ).click(function() { @HTML.RunBootstrapDialogMethod("example1",BootstrapDialogMethods.SetData,new{"key","value"}) });
cancelButton.Action="function(){{{0}}}"; cancelButton.Action=string.format(cancelButton.Action,RunBootstrapDialogMethod("example1",BootstrapDialogMethods.Close));
به عنوان یک مثال نهایی کد زیر را نوشته که نتیجه آن را در تصویر زیر میبینم:
@{ const string dialogName = "errorDialog"; var cancelButton = new BootstrapDialogButton(); cancelButton.Id = "btncancel"; cancelButton.Label = "بستن"; cancelButton.Action = "function(){{{0}}}"; cancelButton.Action = String.Format(cancelButton.Action, Dialogs.RunBootstrapDialogMethod(dialogName, BootstrapDialogMethods.Close)); var dialog = new BootstrapDialog(); dialog.AddButton(cancelButton); dialog.Title = "عنوان"; dialog.Message = "پیام هشدار"; dialog.DialogType=BootstrapDialogType.Warning; dialog.DialogSize=BootstrapDialogSize.SizeNormal; dialog.Closable = false; dialog.AddData("data1","5"); } @Html.BootstrapDialog(dialogName, dialog) @Html.RunBootstrapDialogMethod(dialogName,BootstrapDialogMethods.Open);