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

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

i working latest mpandroidchart library , looking way add annotations or images clickable. example: once data reaches value event occurs want able display user - there multiple events can occur annotations (not sure if right word) or image added @ point in chart. any pointers welcome. check documentation of yaxis . focus on setspacetop(...) , setaxismaxvalue(...) methods. for background: bar-shadow , disable calling: barchart.setdrawbarshadow(false) or change color: bardataset.setbarshadowcolor(int color)
Read more

javascript - Add class to another page attribute using URL id - Jquery -

i have attached id url. ex: when click link 1 , has #tab-2 id , takes me landing page. in landing page have find element has #tab-2 id have add class .active . i tried no luck. please 1 correct code. thanks js fiddle link html <div class="menu"> <ul> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-2">link 1</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-44">link 2</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-74">link 3</a></li> </ul> </div> landing page <div class="tab"> <ul> <li><a id="tab-2" class="active" >link 1 content</a></li> <li><a id="tab-44" >link 2 content</a></li> <li><a id="tab-74" >link 3 content</a></l
Read more

firefox - Where is 'webgl.osmesalib' parameter? -

i'm trying webgl running on firefox (v37.0.2) via software acceleration mesa. tried following steps have been stated in article: http://www.binarytides.com/enable-webgl-firefox-ubuntu/ however, unable find parameter named ' webgl.osmesalib ' in about:config section? has been removed (or renamed)? if yes, how should instruct firefox use mesa's software acceleration webgl? looks support osmesa removed in favour llvmpipe.
Read more