Adding interactivity:
Open
index.html again, replace the contents with the following code, and save it.<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link rel="stylesheet" type="text/css" href="style/helloworld.css">
<script type="text/javascript" src="script/helloworld.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<div id="controlbuttons">
<button id="flipbutton" class="controlbutton" type="button"></button>
<button id="closebutton" class="controlbutton" type="button"></button>
</div>
<h1>Hello World!</h1>
</div>
<div id="content">
<div id="front" class="view">
<h2 id="hellotext">Welcome to the world of Opera Widgets!</h2>
</div>
<div id="config" class="view">
<h2>Hello World! Configuration</h2>
<p>
<label for="frontlabel">Text to display</label>
<input id="frontlabel" type="text" size="25">
<button id="updatebutton" type="button">Update</button>
</p>
</div>
</div>
<div id="footer">Powered by Opera</div>
</div>
</body>
</html>
The major additions here are:
- A reference to the script that controls the view flipping, from the main view to the configuration view.
- A button for flipping between the front and back of the widget.
- A configuration view.
Now you need to update the style sheet, and add the JavaScript.
Styling the configuration and buttons
Add the following style rules to the helloworld.css file below the existing rules, and save the file. These rules hide the configuration view by default and control the look of the buttons.
#config {
display: none;
}
/** Button styles **/
#controlbuttons {
float: right;
}
.controlbutton {
opacity: 0.0;
overflow: hidden;
height: 30px;
width: 30px;
background-position: left top;
border: 0;
}
#flipbutton {
background: transparent url(../images/btn_config.png) scroll no-repeat 0 0;
}
#closebutton {
background: transparent url(../images/btn_close.png) scroll no-repeat 0 0;
}
/** Button effects **/
#container:hover .controlbutton {
opacity: 1;
}
#container .controlbutton:hover {
background-position: 0 50%;
}
#container .controlbutton:active {
background-position: 0 100%;
}
Now it’s time to test the widget again, to check out the new functionality.
No comments:
Post a Comment