hcabbos schrieb:
> Understood. But all this started with me asking whether to use inline # or
> javascript:; for activating a toggle. So my conclusion is if Progressive
> Enhancement is what I'm after, I'll use this method:
>
> <script type="text/javascript">
> $(document).ready(function(){
> $("a#sliderExec").bind('click', function() {
> $("div#myElement").toggle("slow");
> return false;
> });
> });
> </script>
>
> <a id="sliderExec" href="toggledDivContent.html">my text</a>
This is a little over the top and would apply to a situation where you
want a link to load content via Ajax.
In your example the enhancement to the page is that there is a link that
toggles the visibility of content that is *already* on the page, thus
without JavaScript that content will be accessible. But without
JavaScript that link to toggle would be confusing and had no
functionality. Progressive Enhancement/Unobtrusive JavaScript here means
to add the link that has solely JavaScript functionality on the fly.
For example like:
$(function() {
$('<a href="#">Toggle</a>')
.before('#toggle-me')
.bind('click', function() {
$('#toggle-me').toggle();
return false;
});
});
Here you can put in a '#' or whatever into the href attribute, because
you added the link via JavaScript in the first place.
There's another approach which makes sense sometimes, but not always. If
you don't want to add the link via JavaScript you can have a link that
points to a certain fragment (the element with the corresponding id) on
the page it should work with.
Consider this:
<a id="exec" href="#content">Content</a>
...
<div id="content"> ... </div>
If JavaScript is disabled you still have a functional link that takes
the user to the appropiate section.
This is also handy for your scripts because you don't need to hardcode
some of the ids:
$(function() {
$('#exec').bind('click', function() {
$(this.hash).toggle();
return false;
});
});
This results in better reusability. If you want to have another link
with the same functionality you just need to add the id:
$(function() {
$('#exec, #another-exec').bind('click', function() {
$(this.hash).toggle();
return false;
});
});
It's probably better to classify these kind of links then:
$(function() {
$('a.exec').bind('click', function() {
$(this.hash).toggle();
return false;
});
});
That also means improved maintainability. If you need to change the ids,
you just have to change them in your HTML and your script is still intact.
I mentioned that this is not always reasonable. To me if both link and
target are next to each other I don't think that this construct is very
reasonable, because the anchor doesn't make much sense in plain HTML:
<a id="exec" href="#content">Content</a>
<div id="content"> ... </div>
In these cases I add the link dynamically.
-- Klaus
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
