YUI 3.x Home -

YUI Library Examples: Dial: Dial With Image Background

Dial: Dial With Image Background

This example shows how to create a Dial widget using background images for the ring and the handle.

View example in new window.

Creating a Dial With Images as Backgrounds

A Dial can be created that has its presentation determined by background images. This can be done with CSS, providing the images can be contained within the dimensions of the Dial elements.

The Markup

The only markup requirement is an element to contain the Dial

  1. <div id="demo"></div>
<div id="demo"></div>

The JavaScript

The same JavaScript can be used as in the basic Dial example.

Dial extends the Widget class, following the same pattern as any widget constructor, accepting a configuration object to set the initial configuration for the widget.

After creating and configuring the new Dial, call the render method on your Dial object passing it the selector of a container object. This renders it in the container and makes it usable.

Some commonly used configuration attributes are shown below. 

  1. YUI({ filter: 'raw' }).use("dial", function(Y) {
  2.  
  3. 	var dial = new Y.Dial({
  4. 		min:-220,
  5. 		max:220,
  6. 		stepsPerRev:100,
  7. 		value: 30
  8. 	});
  9.     dial.render("#demo");
  10.  
  11. });
YUI({ filter: 'raw' }).use("dial", function(Y) {
 
	var dial = new Y.Dial({
		min:-220,
		max:220,
		stepsPerRev:100,
		value: 30
	});
    dial.render("#demo");
 
});

The CSS

In this example we add an image of a ball bearing to the dial handle-user object's background. Note that this is yui3-dial-handle-user, the object seen by the user, not yui3-dial-handle, its container object.

We'll also add an image of a circle of radial lines to the background ring object. To make these changes, we only need to do two things.

  1. Remove some of the CSS styling on the elements we want to display as images.
  2. Add the background URL to the image rule of the selectors of those objects as shown below.
  1. .yui3-skin-sam .yui3-dial-content .yui3-dial-handle-user{
  2. 	background:url("assets/images/ball_bearing.png") no-repeat;
  3. 	opacity:1; /*Normally the user handle is not full opacity*/
  4. }
  5. .yui3-skin-sam .yui3-dial-content .yui3-dial-ring{
  6. 	box-shadow: none;
  7. 	-moz-border-radius: none;
  8. 	-webkit-border-radius: none;
  9. 	-moz-box-shadow: none;
  10. 	background:url("assets/images/bkg_ring_of_lines.png") no-repeat scroll 0px 0px;
  11. }
  12. .yui3-skin-sam .yui3-dial-content .yui3-dial-center-button {
  13. 	box-shadow: none;
  14. 	-moz-border-radius: none;
  15. 	-webkit-border-radius: none;
  16. 	-moz-box-shadow: none;
  17. 	background:none;
  18. 	opacity:1;
  19. 	/*Normally the center button is not full opacity. 
  20. 	In this case it doesn't matter since we are removing the 
  21. 	styles and not adding a bitmap*/ 
  22. }
  23. /* Hide the VML ovals in IE. */
  24. .yui3-skin-sam .yui3-dial-ring-vml v\:oval {
  25. 	visibility:hidden;
  26. }
  27. /* Show the marker VML oval */
  28. .yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-marker v\:oval {
  29. 	visibility:visible;
  30. }
  31. .yui3-skin-sam .yui3-dial-content .yui3-dial-ring-vml{
  32. 	background:url("assets/images/bkg_ring_of_lines.png") no-repeat scroll 0px 0px;
  33. }
  34. .yui3-skin-sam .yui3-dial-content .yui3-dial-handle-user-vml{
  35. 	background:url("assets/images/ball_bearing_8.png") no-repeat scroll 0px 0px;
  36. 	opacity:1; 
  37. }
  38. .yui3-skin-sam .yui3-dial-content .yui3-dial-center-button-vml {
  39. 	background:url("assets/images/empty.png");
  40. }
.yui3-skin-sam .yui3-dial-content .yui3-dial-handle-user{
	background:url("assets/images/ball_bearing.png") no-repeat;
	opacity:1; /*Normally the user handle is not full opacity*/
}
.yui3-skin-sam .yui3-dial-content .yui3-dial-ring{
	box-shadow: none;
	-moz-border-radius: none;
	-webkit-border-radius: none;
	-moz-box-shadow: none;
	background:url("assets/images/bkg_ring_of_lines.png") no-repeat scroll 0px 0px;
}
.yui3-skin-sam .yui3-dial-content .yui3-dial-center-button {
	box-shadow: none;
	-moz-border-radius: none;
	-webkit-border-radius: none;
	-moz-box-shadow: none;
	background:none;
	opacity:1;
	/*Normally the center button is not full opacity. 
	In this case it doesn't matter since we are removing the 
	styles and not adding a bitmap*/ 
}
/* Hide the VML ovals in IE. */
.yui3-skin-sam .yui3-dial-ring-vml v\:oval {
	visibility:hidden;
}
/* Show the marker VML oval */
.yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-marker v\:oval {
	visibility:visible;
}
.yui3-skin-sam .yui3-dial-content .yui3-dial-ring-vml{
	background:url("assets/images/bkg_ring_of_lines.png") no-repeat scroll 0px 0px;
}
.yui3-skin-sam .yui3-dial-content .yui3-dial-handle-user-vml{
	background:url("assets/images/ball_bearing_8.png") no-repeat scroll 0px 0px;
	opacity:1; 
}
.yui3-skin-sam .yui3-dial-content .yui3-dial-center-button-vml {
	background:url("assets/images/empty.png");
}

More Dial Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings