This is quite easy to implement in your web pages.
Let us start with our first step.
This is a page on my intranet server. A very simple page that has a Jquery
script embedded in it.
==========
H1SelectorJQry_noslice.htm
==========
<html>
<head></head>
<body>
<script language="JavaScript" src="http://localhost/JayQuery/jquery-1.3.min.js">
</script>
<h1>Jquery inside a DOJO Accordion Pane</h1>
<div>
<p style="color:red; font-weight:bold">You Want More Dojo and JQuery Articles</p>
<div>
Add this slice
</div>
<div>
<script type="text/JavaScript">
$(document).ready(function(){
$("h1").css("color", "magenta");});
</script>
</body>
</html>
==============
If you open this in IE8 RC1 this is what you will see.
Now modify the code as shown. Note particlularly the css elements added. I call this modified page,
========================
H1SelectorJQry-Slice.htm
========================<html>
<head></head>
<body>
<script language="JavaScript"
src="http://localhost/JayQuery/jquery-1.3.min.js">
</script>
<h1>Jquery inside a DOJO Accordion Pane</h1>
<div class="hslice" id="mySlice" >
<p class="entry-title" style="color:red; font-weight:bold">
You Want More Dojo and JQuery Articles</p>
<div class="entry-content">
Add this slice
</div><div>
<script type="text/JavaScript">
$(document).ready(function(){
$("h1").css("color", "magenta");});
</script>
</body>
</html>
============
With this modification the web page hosted on my intranet server looks like this when you browse the page.
When IE8.0 RC1 encounters "hslice" it knows what to do with it.
Now when you (or someone who looks up this page) click on the green icon, you (he) will see this displayed
If you are interested in watching this page whenever I update this page, then an icon will be added as shown to the favourites bar (if you so wish in the previous screen) as shown here inside the red square.
There is really nothing much to it, is it? This is cool stuff.
No comments:
Post a Comment