We’ll make this look a little nicer with some CSS, too. In addition to some
basic styling to line up the fields, we’ll identify the editable fields so they
change color when our users hover over or select them. Create a new file
called stylesheets/style.css with this code:html5_content_editable/stylesheets/style.css
Line 1 ul{list-style:none;}
- li>b,li>span{
- display:block;
5 float:left; - width:100px;
- }
- li>span{
10 width:500px; - margin-left:20px;
- }
- li>span[contenteditable]:hover{
(^15) background-color:#ffc;
- }
- li>span[contenteditable]:focus{
- background-color:#ffa;
20 border:1px shaded#000;
}
li{clear:left;}On line 3 we make the label and the <span> line up. Then we add the hover
and focus effects on lines 14 and 18 by using CSS attribute selectors.That’s it for the front end. Users can modify the data on the page easily. Now
we have to save it.Persisting the Data
Although users can change the data, their changes will be lost if they refresh
the page or navigate away. We need an approach to submitting those changes
to our back end, and we can do that easily with jQuery. If you’ve ever done
any Ajax before, this won’t be anything new to you.First we’ll create a new file called javascripts/edit.js, and then we’ll link that file
and the jQuery library to the bottom of our HTML page, right above the closing
<body> tag:report erratum • discussIn-Place Editing with contenteditable • 61
Download from Wow! eBook <www.wowebook.com>