| MVC Classic ウィジェット > Wijdialog > wijdialog のアニメーション化 |
wijdialog ウィジェットはアニメーションをサポートします。 Web サイト ( http://demo.componentone.com/ASPNET/MVCExplorer/dialog/Animation) にアクセスし、コントロールエクスプローラの Dialog > Animation サンプルのライブデモをご覧ください。
| ソースビュー |
コードのコピー
|
|---|---|
<div>
<div id="dialog" title="ダイアログ">
<p>
ほら、すごいでしょう!</p>
</div>
</div>
|
|
| ソースビュー |
コードのコピー
|
|---|---|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
// $(":wijmo-wijdialog").wijdialog("destroy").remove();
$('#dialog').wijdialog({
autoOpen: true,
show: 'blind',
hide: 'explode',
collapsingAnimation: { animated: "puff", duration: 300, easing: "easeOutExpo" },
expandingAnimation: { animated: "bounce", duration: 300, easing: "easeOutExpo" },
width: 500
});
$('#expandEffectTypes').change(function () {
var ee = $("#expandEffectTypes option:selected").val(); $("#dialog").wijdialog("option", "expandingAnimation", { effect: ee, duration: 500 });
});
$('#collapseEffectTypes').change(function () {
var ce = $("#collapseEffectTypes option:selected").val();
$("#dialog").wijdialog("option", "collapsingAnimation", { effect: ce, duration: 500 });
})
$('#showEffectTypes').change(function () {
var ee = $("#showEffectTypes option:selected").val();
$("#dialog").wijdialog("option", "show", ee);
});
$('#hideEffectTypes').change(function () {
var ce = $("#hideEffectTypes option:selected").val();
$("#dialog").wijdialog("option", "hide", ce);
})
});
</script>
|
|