21.6.1Adding an Effect
We’ll go ahead and factor the renderContentOn:
method to add a method to handle rendering the heading and just make modifications to the new method.
ToDoListView>>renderContentOn: html
self renderHeadingOn: html. "<-- added."
html form: [
html unorderedList
id: 'items';
with: [ self renderItemsOn: html ].
html submitButton
text: 'Save'.
html submitButton
callback: [ self add ];
text: 'Add' ].
html render: editor
The renderHeadingOn:
method leverages the jQuery UI library to add the highlight effect to the header of our component.
ToDoListView>>renderHeadingOn: html
html heading
onClick: html jQuery this effect highlight;
with: self model title.
We create a query using html jQuery this
that selects the heading DOM element. Next we send effect
to get a JQEffect
instance. Then finally we send JQEffect>>highlight
which highlites the background color.
Altering the highlight color is left as an exercise for the reader.
Now for something a little more fun - let’s add some help test that appears when you click on the heading; and it won’t just "appear", it will slide open at a rate that we determine.
We do this by rendering a new <div>
element that contains the help text, and changing the onClick
of the header to apply our new cool effect to the new element. We also need some new CSS to help us out with this.
ToDoListView>>renderHeadingOn: html
| helpId |
helpId := html nextId.
(html heading)
class: 'helplink';
onClick: ((html jQuery id: helpId)
slideToggle: 1 seconds);
with: self model title.
(html div)
id: helpId;
class: 'help';
style: 'display: none';
with: 'The ToDo app enhanced with jQuery.'
We need to add the CSS (the same as in the SU example).
ToDoListView>>style
^ '
.help {
padding: 1em;
margin-bottom: 1em;
border: 1px solid #008aff;
background-color: #e6f4ff;
}
.helplink {
cursor: help;
}
body {
color: #222;
font-size: 75%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1 {
color: #111;
font-size: 2em;
font-weight: normal;
margin-bottom: 0.5em;
}
ul {
list-style: none;
padding-left: 0;
margin-bottom: 1em;
}
li.overdue {
color: #8a1f11;
}
li.done {
color: #264409;
}'