January 11, 2008 at 16:38jQuery for typesetter (part 2): delicious menus
This is the second article about jQuery , which will be interesting, first of all, to novice users of this library. In this article, from a practical point of view, we will focus on highlighting the current menu item on the client side. And after reading the article, you will understand how to make more complex selections and query chains.
Menus are a fundamental element of the user interface of both the GUI and web applications. With a few small examples, we'll see how to create a navigation element using jQuery. In addition, we study the promised possibilities of the function $ (...) for working with the properties of elements.
Vertical menus are regular lists of links:
It can be designed very nicely through style sheets, and I would very much like that the current section of the menu was highlighted in bold (or highlighted somehow differently) to let the user know where he is now. You can act in different ways: either on the server side or on the client side. When generating the page, the server script can determine which menu item corresponds to the current page, and will register the desired class for the list item. This option has drawbacks: you will have to write a menu-generating system on the server side, while using ready-made scripts it will be difficult to modify the module for working with the menu, and sometimes there is no possibility of writing server-side scripts as such. The second option is devoid of the above disadvantages. And for this you need to write again one line in the construction of $ (document) .ready:
Alternatively, you can use a slightly different approach suggested by PaulColomiets :
PaulColomiets rightly notes that it’s better to choose not just the a tag, but you must also specify a more complete path to it.
ayavryk
When changing the format of links (I used relative paths), it will be necessary to change the script. As for the one line that does all the work, it uses the familiar $ (...) function, which in this case selects all links with the value of the href attribute ending in document.location.pathname. This variable in turn stores the path to the current page. We also use the css method to set the value of the cascading font-weight style sheet parameter. If you noticed, the font-weight parameter name is written a little differently in fontWeight, that is, the “camel” style that is used in JavaScript. As a finishing touch, I propose that the click on the menu item of the current section is canceled. This is a very reasonable decision, because you can not go to the page on which you are already.
We managed to do without additional variables, which reduces the code in simple cases without compromising clarity. In this source you can also see the design style, which will suit you well in this case: instead of a single line, I break the chain of calls into several to show where the calls take place. I think that now it will not be difficult to change the script for attaching the "arrow", only to external links. I highly recommend looking for simplicity what equivalence operators besides "$ =" are, and what exactly they do.
Task number 2: vertical menu
Menus are a fundamental element of the user interface of both the GUI and web applications. With a few small examples, we'll see how to create a navigation element using jQuery. In addition, we study the promised possibilities of the function $ (...) for working with the properties of elements.
Vertical menus are regular lists of links:
It can be designed very nicely through style sheets, and I would very much like that the current section of the menu was highlighted in bold (or highlighted somehow differently) to let the user know where he is now. You can act in different ways: either on the server side or on the client side. When generating the page, the server script can determine which menu item corresponds to the current page, and will register the desired class for the list item. This option has drawbacks: you will have to write a menu-generating system on the server side, while using ready-made scripts it will be difficult to modify the module for working with the menu, and sometimes there is no possibility of writing server-side scripts as such. The second option is devoid of the above disadvantages. And for this you need to write again one line in the construction of $ (document) .ready:
$ ("a [@ href $ =" + document.location.pathname + "]"). css ({fontWeight: "bold"})
Alternatively, you can use a slightly different approach suggested by PaulColomiets :
var a = $ ("a [@ href $ =" + document.location.pathname + "]");
a.parent (). text (a.text ()). addClass ('selected');
PaulColomiets rightly notes that it’s better to choose not just the a tag, but you must also specify a more complete path to it.
ayavryk
How it works
When changing the format of links (I used relative paths), it will be necessary to change the script. As for the one line that does all the work, it uses the familiar $ (...) function, which in this case selects all links with the value of the href attribute ending in document.location.pathname. This variable in turn stores the path to the current page. We also use the css method to set the value of the cascading font-weight style sheet parameter. If you noticed, the font-weight parameter name is written a little differently in fontWeight, that is, the “camel” style that is used in JavaScript. As a finishing touch, I propose that the click on the menu item of the current section is canceled. This is a very reasonable decision, because you can not go to the page on which you are already.
$ (document) .ready (function () {
$ ("a [@ href $ =" + document.location.pathname + "]")
.css ({fontWeight: "bold"})
.click (function () {return false;});
});
conclusions
We managed to do without additional variables, which reduces the code in simple cases without compromising clarity. In this source you can also see the design style, which will suit you well in this case: instead of a single line, I break the chain of calls into several to show where the calls take place. I think that now it will not be difficult to change the script for attaching the "arrow", only to external links. I highly recommend looking for simplicity what equivalence operators besides "$ =" are, and what exactly they do.
Cycle of articles
- jQuery for the layout designer (part 1): arrows for the links
jQuery for the layout designer (part 2): delicious menus