html5 - How to make header menus with section labels in Windows 8 Metro using Javascript? -


How do I create a navigation menu with section labels like the header menu in the Windows 8 Metro Javascript and the picture below? ?

Enter image details here

< Div class = "post text" itemprop = "text">

Define HTML: 

   & Lt; Button data-win-control = "WinJS.UI.MenuCommand" data-win-option = "{id: 'homeMenuItem', label: 'home'}" & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt ;! - Content that will be loaded and displayed. - & gt; & Lt; Header aria-label = "header content" roll = "banner" & gt; & Lt; Button class = "win-backbutton" aria-label = "back" & gt; & Lt; / Button & gt; & Lt; Div class = "titillaria win-type-alpesis" & gt; & Lt; Button class = "titlecontainer" & gt; & Lt; H1 & gt; & Lt; Span class = "pagetitle" & gt; Header & lt; / Span & gt; & Lt; Span class = "chevron win-type-x-big" & gt; & Amp; # Xe099 & lt; / Span & gt; & Lt; / H1> & Lt; / Button & gt; & Lt; H2 class = "pagesubtitle" & gt; With clean Finnish effects & lt; / H2 & gt; & Lt; / Div & gt; & Lt; / Header & gt;   
 Then comes javascript:  
  // whenever a user navigates on this page, this function is called. It browses page elements with data of the // app: Tasks (Elements, Options) {document.querySelector ("HeaderKey"). AddEventListener ("click", this.showHeaderMenu, incorrect); Document.getElementById ("Section 1"). AddEventListener ("click", function () {self.goToSection (0);}, false); Document.getElementById ("section2"). AddEventListener ("click", function () {self.goToSection (1);}, false); Document.getElementById ("section3"). AddEventListener ("click", function () {self.goToSection (2);}, false); Document.getElementById ("homeMenuItem"). AddEventListener ("click", function () {self.goHome ();}, false); }, // connects the menu to an anchor and shows it the header menu: function () {var title = document.query selector ("header header"); Var menu = document.getElementById ("headerMenu"). WinControl; Menu.anchor = Title; Menu.placement = "bottom"; Menu.alignment = "left"; Menu.show (); }, // Go to a section goToSection: function (section) {switch (section) {Case 1: WinJS.Navigation.navigate ("/ pages / section1 / section1.html"); break; Case 2: Vinj S. Navigation. Navigate ("/ page / section 2 / section 2"); break; Case 3: WinJS.Navigation.navigate ("/ pages / section3 / section3.html"); break; } WinJS.log & amp; WinJS.log ("You are viewing the #" + section + "section.", "Sample", "Status"); }, // Go to home screen goHome: function () {WinJS.Navigation.navigate ("/ default.html"); },   
 Just wanted to share, hope it helps someone!

Comments

Post a Comment

Popular posts from this blog

Python SQLAlchemy：AttributeError: Neither 'Column' object nor 'Comparator' object has an attribute 'schema' -

I tried to create a new database in my project, but when I run the script, I get this error, I have another project, this type of definition worked before, but now it gets a single error. I am using Python 2.7.8 and the version of SQLAlchemy module is 0.9.8. By the way, using a project flask- SQLAlchemy, it works well, I'm confused. Traceback information is as follows: Traceback (most recent call final): File "D: / Projects / IOM / db_create.py", line 4, & lt; Module & gt; From the models the base file "D: \ Projects \ OO-IM \ models.py", in line 15, in the & lt; Module & gt; Column ( 'followed_id', int (), ForeignKey ( 'user.id')) file "C: \ Python27 \ lib \ site-packages \ SQLAlchemy \ SQL \ schema.py", line 369, __new__ schema = metadata. Schema file "C: \ Python27 \ lib \ site-packages \ SQLAlchemy \ SQL \ elements.py", line 662, AttributeError in __getattr__ key): Neither 'column' object nor ...
Read more

java - How not to audit a join table and related entities using Hibernate Envers? -

I use Eners to be hibernate to audit my institutions. I have an audit entity, Foo , which includes a list & lt; Bars & gt; However, I do not want to audit the bar institutions, in the form of properties, I have written that: @inti @edicated public class Foo {@JoinTable (name = "T_FOO_BAR", joinColumns = @JoinColumn (name = "FOO_ID"), inverseJoinColumns = @JoinColumn (Name = "BAR_ID")) @ManyToMany (Cascade = Persist) @ Indited (targetAuditMode = RelationTargetAuditMode.NOT_AUDITED ) Public listing & lt; Bars & gt; GetBars () {Return bars; }} Now, I want to retrieve an amendment of foo : AuditReader reader = AuditReaderFactory.get (GetEntityManager ()); FU modification = (FU) reader.CreativeTeA () .entensEtrevision (Foo Class, 42) .getSingleResult (); Unfortunately, when I want to retrieve all the data (i.e. when it loads lazy times ), error me ORA-00942: table or view is not present , because Tried to query this: Sel...
Read more

mongodb - CakePHP paginator ignoring order, but only for certain values -

While pagging my user model in kppp, I can sort with some values, but not others. For example, I can order results from created or email , for example, but username or reputation seems to come back order by arbitrary command for example with a list of users: $ this-> paginate = array ('condition' => array ( 'User.is_active' = & gt; true), 'border' => 24, 'order' => array ('User.created' => DESC)); Works as expected, but $ this - & gt; Paged = array ('conditions' = & gt; array (' user.isIactive '= & gt; true),' border '= & gt; 24,' command '= & gt; array (' user repeats' = ' & Gt; DESC ')); No, no. I first thought that this could be a database issue, but when I search the database directly, sorted as expected. Note: I am using Mangodebi with the Mongo DB plugin of Ichikawa for the KPPHP; Pagnetizing users are used to work properl...
Read more