The rest is calling the other helper functions. Calling the notification code So who notifies the notifier code that we've got some new stuff to show on the line tile? You do! Figure out when something interesting happens in your app, and send a notification to the live tile then. In this case, that looks like: tile.
I put it all in a file named it tile. This is pretty much the same as the revealing module pattern, and it means I can call tile. If you like, you can show your logo here instead. This comes from the 30x30 logo in your package.
Change these lines: binding[0]. CreateTileUpdaterForApplication ;. Update notification ;. About the Author Jesse Liberty Jesse Liberty has three decades of experience writing and delivering software projects. Comments are disabled in preview mode. Georgia and S. Sandwich Is. Helena St. Pierre and Miquelon St. These div s are positioned absolutely, and moved on hover according to the direction of slide we want.
Similarly, tiles with text sliding to the right and left, will get class names slideTextLeft and slideTextRight , with a similar structure as the above tile.
A couple tiles have a different hover effect, they rotate to reveal the back face of the tile. This effect is a very simple and basic "card flip" effect. I won't get into the details of this effect, but if you're new to this, you can read more about it in this excellent tutorial by David De Sandro. For this flipping effect, apply a rotate3d class to the tile you want to flip.
For a card with a vertical flip we'll add a class rotate3dY , and for a horizontal flip we'll apply a class rotate3dX in addition to the rotate3d class , and we'll apply the following styles:. And when the tile is hovered, the. For styles rotating in 3D, remember to set a background and text color for the.
And that's all for the styles and animations! Now let's define responsive styles for the dashboard. Dashboard columns are initially full-width on small screens remember we're starting mobile-first , and they will be floated next to each other on big screens. All click events will be handled wtih Javascript. I'll be using jQuery for this example. Event handlers are going to be set on each of the dashboard tiles, and when a click event is detected, we're going to retrieve the name and type of the corresponding page from the data-page-type and data-page-name attributes, and use these to open the page.
Other click events will be handled when clicking on the close button in each page. The close button for each page type will apply the suitable class names to close this page type. Additionally, in order to give each page the same background color and text color as its corresponding tile, we will first loop through the tiles, retrieve its colors, and then applies it to its corresponsing page.
Returning true or not returning a value at all will open the data-link option if it has been set. Example example click. Example example autoAniDirection. Setting this to a value of or greater will reduce accidental flips when a user quickly passes by a tile. The default value lets the user move their mouse or finger away and come back before flipping back. This value is added to the value speed property when used.
To reduce the speed further you can use a negative value. If the value is '-1' the animations will loop until stopped or paused. Returning -1 for the delay will skip the tile. Example animationComplete example. Returning false will cancel the animation from starting.
All non static modes call animation starting. If this value is less than 1, flip animations will animate to and from the opacity level specified when they flip. If you're not using Modernizr, Metro JS will do its own testing internally. If you're using a custom version of Modernizr, Metro JS will need the transforms, transitions, transform3d and touch tests or you can set useModernizr to false.
0コメント