Home > Developer > JavaScript
This is the last tutorial in the series "Build your first Metro application with JavaScript, with the help of the metro style and split template provided by Microsoft Visual Studio 11 express for Windows Developer Preview, how to Use the CSS style to make your program more compatible with windows look & feel.
PrefaceThis article is the third article about using JavaScript to build your first Metro application (on windows8). If you have not read the first and second articles, read them immediately. If you are familiar with HTML5, css3, and JavaScript, it is best to understand them without affecting your understanding of the subject.
Implement css3 grid layout
Microsoft has already achieved a considerable degree of web standards: HTML5, ecmascript Fifth Edition of the language specification and css3. One of the Standards in css3 is css3grid layout (grid layout ). With this technology, you can easily adjust the rows and columns of a table on the HTML page. In this example, the listview is in this layout. Listview can fill in all spaces, but our current requirement is to make the listview occupy half of the screen, put it on the left, and the right is the content area. Click listview to display details in the content area.
As shown in, we want two rows of grid, one row for the title, and one row for the RSS data. The RSS data area is split into two columns, one is the listview on the left and the other is the content. Let's take a look at how to do this. We need to draw a place on the right and place the template:
[HTML]View plaincopyBased on the record selected by the user on the left listview, the content is displayed in the right div, And the template is used to define the appearance. We also need to set listview to the "single select" selection mode (the default value is none ). Once the content of the selected area changes, the event handler will be triggered. The processor itself is relatively simple:
[JavaScript]View plaincopy
In addition to style adjustment, grid layout has almost finished its work.
[CSS]View plaincopy
In the body style, we define the entire page as the gridl ayout mode. "-MS-grid-rows: auto1fr;" is divided into two rows, the adaptive width of one row (the maximum width is the width), and the remaining space is occupied by the other row. "-MS-grid-columns: 1fr1fr;" is divided into two columns on the page, both columns are equal. By default, all content is in the first row and column (the rows and columns are counted from 1, not 0 ). In other words, because the first row is used to place titles without changes (if we want to handle overflow, we can also span two columns across two columns ), the Post's listview is moved to the second row and the first column; The content area is moved to the second row and the second column. So the entire grid layout can be filled up.
Create a column-based Metro appSo far, our RSS reader program has jumped onto the paper. In fact, this style is so common that it is summarized into a specific project template called"Split Application". If you create a new project of this type and execute it, you will see that we have created a more beautiful version, although there is no real data. When you click the project on the left, you will see the data on the right, as we did in our simple RSS reader program:
Next step
Original article address
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
