- HTML5 Web Application Development By Example Beginner's Guide
- J.M. Gustafson
- 709字
- 2021-08-13 16:50:25
Time for action – adding a theme selector
To start with, we need a place to put the theme selector. So let's add a toolbar to the task list application's markup in taskAtHand.html
. We will insert it between the <header>
and <div id="main">
elements. The toolbar will contain a <label>
and a <select>
drop-down list. The list will contain four different color themes: blue
, green
, magenta
, and red
. You can find the code for this section in chapter2/example2.3
:
<div id="app"> <header>Task@Hand</header> <div id="toolbar"> <label for="theme">Theme</label> <select id="theme" title="Select theme"> <option value="blue">Blue</option> <option value="green">Green</option> <option value="magenta">Magenta</option> <option value="red">Red</option> </select> </div> <div id="main">
Now let's style up the toolbar. We will make the font a little smaller than the rest of the page and set the background color as black with some transparency so the color behind it bleeds through:
#toolbar { padding: 0.25em; font-size: 0.8em; color: WhiteSmoke; background-color: rgba(0, 0, 0, 0.4); }
Next, we have to implement the different themes. So let's create a few new CSS files, one for each theme. We will put them in a folder named themes
to keep them grouped together. The CSS files will have the same names as the <option>
values: blue.css
, green.css
, magenta.css
, and red.css
. Let's take a look at green.css
:
#app { background-color: #bcb; background: -webkit-linear-gradient(top, #bcb, #585); background: -moz-linear-gradient(top, #bcb, #585); background: -ms-linear-gradient(top, #bcb, #585); background: linear-gradient(top, #bcb, #585); } #app>header, #app>footer { background-color: #060; }
Starting at the top we override the background gradients for the app
element to make them a green color instead of blue. We also change the header
and footer
elements to make them green too. The other CSS files will be exactly the same as this one except they will have different colors.
Now let's add a stylesheet <link>
element to the <header>
element of the HTML file for the theme CSS file. Since the blue theme is the default, we will set it to load blue.css
:
<link href="taskAtHand.css" rel="StyleSheet" />
<link id="theme-style" href="themes/blue.css" rel="StyleSheet" />
Notice that we include the theme stylesheet after the base one. That's what will allow us to override the default styles. Also note that we give the <link>
element an ID
attribute, so we will be able to get to it in our JavaScript later on.
The rest of the code we need to add is in taskAtHand.js
. First, we will add a change
event handler for the theme selector in the TaskAtHand.start()
method:
$("#theme").change(onChangeTheme);
When the user chooses a new theme, it will call the onChangeTheme()
private method:
function onChangeTheme() { var theme = $("#theme>option").filter(":selected").val(); setTheme(theme); appStorage.setValue("theme", theme); }
This method gets the selected option from the list by getting its <option>
elements and then finding the selected option using jQuery's :selected
selector inside the filter()
method. Then it calls the setTheme()
method, which we will implement next. Lastly, we save the selected theme to localStorage
so we can set it the next time the user comes back to the application.
The setTheme()
method takes the theme name as a parameter. It gets the <link id="theme-style">
element and changes its href
attribute to the new stylesheet's URL:
function setTheme(theme) { $("#theme-style").attr("href", "themes/" + theme + ".css"); }
When this happens, the page will load the new stylesheet and apply its styles over the existing ones. And just like that, the page changes color.
Wait, we're not done yet. Remember how we saved the theme to localStorage
? Now we have to get it back out when the user returns to our application. We will create a loadTheme()
method to do that:
function loadTheme() { var theme = appStorage.getValue("theme"); if (theme) { setTheme(theme); $("#theme>option[value=" + theme + "]") .attr("selected","selected"); } }
This method gets the theme name from localStorage
. If it finds one, it calls setTheme()
to set it. Then it selects that theme in the drop-down by finding the <option>
in the list that has the theme name for its value, and sets the selected
attribute on it. The final thing to do is add a call to loadTheme()
from the start()
method, and we're done.
Note
The style changes for our theme were pretty simple, but you could completely change the look and feel of your application using this technique.
What just happened?
We added a theme selector that changes the theme stylesheet, which causes the page to use different colors to draw the background. We saved the selected theme to local storage so the settings are remembered when the user returns to the application.
- ASP.NET Core:Cloud-ready,Enterprise Web Application Development
- ClickHouse性能之巔:從架構(gòu)設(shè)計解讀性能之謎
- 零基礎(chǔ)搭建量化投資系統(tǒng):以Python為工具
- Raspberry Pi Networking Cookbook(Second Edition)
- 基于差分進化的優(yōu)化方法及應(yīng)用
- Data Analysis with IBM SPSS Statistics
- Learning Firefox OS Application Development
- Windows Forensics Cookbook
- Learning FuelPHP for Effective PHP Development
- Python Data Science Cookbook
- Angular應(yīng)用程序開發(fā)指南
- 區(qū)塊鏈國產(chǎn)化實踐指南:基于Fabric 2.0
- PHP+MySQL動態(tài)網(wǎng)站開發(fā)從入門到精通(視頻教學(xué)版)
- SQL Server 2008實用教程(第3版)
- 深入大型數(shù)據(jù)集:并行與分布化Python代碼