javascript - Using a Dialog in Metro UI -
hi have question metro ui (http://metroui.org.ua/dialog.html)
i'm using dialog this:
<div id="testdialog" data-role="dialog" class="dialog"> <h1>simple dialog</h1> <p> dialog :: metro ui css - front-end framework developing projects on web in windows metro style. </p> </div> <script type="text/javascript"> var x_dialog = $("#" + dialogid).data("dialog"); x_dialog.options = { width: width, height: height, closebutton: true } x_dialog.open(); </script> but dialog isn't showing close button or desired width / height.
are there useful examples metro ui dialogs? haven't found , api metro ui seems nice, if you're searching javascript dialogs wont find any...
first of metro 3.0 till in beta still improved. contrast 2.0 relies heavily on html5 data attributes , hence can specified on html code can still modified in javascript using methods .attr('data-*','') . here working code:
<script> function showdialog(id){ var dialog = $("#"+id).data('dialog'); if (!dialog.element.data('opened')) { dialog.open(); } else { dialog.close(); } } </script> </head> <body onload="init()"> <div class="container page-content"> <div class="padding20 no-padding-right no-padding-left no-padding-top"> <button class="button" onclick="showdialog('dialog')">show dialog</button> </div> <div data-role="dialog" id="dialog" class="padding20" data-close-button="true" data-width="200" data-height="200"> <h1>simple dialog</h1> <p> test </div> </div> </body> </html> either specify them on html or have set dynamically on click event in js script. this:
$('.button').click(function () { $('#dialog').attr('data-width','200'); $('#dialog').attr('data-height','200'); showdialog('dialog'); }); hope helps.
Comments
Post a Comment