Microsoft recently announced that it will be shipping jQuery with Visual Studio. This is remarkable announcement since they did not acquire jQuery and will not be creating there own version of jQuery but rather they will be including jQuery as is and will provide 24/7 support for the product. In addition MS will be making regular contributions to the jQuery library following the same rules as everyone else contributing to jQuery.
The jQuery site already has a link to where you can download the jquery-1.2.6-vsdoc.js. This file contains includes the XML comments that when included will provide rich intellisense for jQuery. That's right intellisense support for jQuery in VS2008. Download jQuery intellisense file from this site. Just select the Visual Studio link.
jQuery's core API is extremely powerful providing excellent selector capabilities, simplifying HTML documentation traversing. jQuery also simplifies event handling, animating and Ajax interactions. Lately, I've been playing around with jQuery Plugins and wow. There are currently 1000+ plugins available at the jQuery site.
As an exercise I thought it would fun to write a Silverlight application and incorporate some jQuery. I decided to use the Drag and Drop plugin called $.event.special.drag. How well would this plugin work with Silverllight? Let's find out.
Implementing dragging using this plugin is simple, just create a div tag and then call the Javascript API passing the div tag. The following shows how to implement dragging. I've embedded a Silverlight control within the div tag.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
3
4 <head>
5 <title>Drag with jQuery</title>
6 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
7 <meta http-equiv="imagetoolbar" content="no" />
8
9 <style type="text/css" media="screen">
10 body {
11 font: 12px/16px Verdana, Arial, Helvetica, sans-serif;
12 color: #002;
13 padding: 0;
14 margin: 12px;
15 }
16 .silverlight {
17 position: absolute;
18 left: 10px;
19 top: 10px;
20 height: 500px;
21 width: 700px;
22 background: #CCF;
23 border: 1px solid #AAD;
24 text-align: center;
25 font-size: 14px;
26 }
27 .sloverlay {
28 height: 500px;
29 width: 700px;
30 text-align: center;
31 font-size: 14px;
32 float: left;
33 }
34 .stuff {
35 height: 100px;
36 width: 200px;
37 background: #777777;
38 float: left;
39 margin-left: 10px;
40 }
41 .title {
42 cursor: move;
43 background: #AAD;
44 height: 20px;
45 }
46 </style>
47
48 <script src="jquery.js" type="text/javascript"></script>
49 <script src="jquery.event.drag.js" type="text/javascript"></script>
50
51 <script type="text/javascript">
52 //
53 $(document).ready(function(){
54 $('#silverlight')
55 .bind('dragstart', function(event) {
56 return $(event.target).is('.title');
57 })
58 .bind('drag', function(event) {
59 $(this).css({
60 top: event.offsetY,
61 left: event.offsetX
62 });
63 });
64 });
65 </script>
66
67 </head>
68
69 <body>
70 <div class="sloverlay"></div>
71 <div class="stuff"></div>
72 <div id="silverlight" class="silverlight">
73 <div class="title">You can drag this entire window.</div>
74 <object data="data:application/x-silverlight,"
75 type="application/x-silverlight-2"
76 width="100%" height="485px">
77 <param name="source" value="ClientBin/DragAndDrop.xap"/>
78 <param name="background" value="white" />
79 <a href="http://go.microsoft.com/fwlink/?LinkID=115261"
80 style="text-decoration: none;">
81 <img src="http://go.microsoft.com/fwlink/?LinkId=108181"
82 alt="Get Microsoft Silverlight"
83 style="border-style: none"/>
84 </a>
85 </object>
86 <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
87 </div>
88 </body>
89
90 </html>
You can check out this application in action by navigating to this site. Try dragging the window that contains the Silverlight control. Just hover over the title, press the left mouse button and move the window to a new location. This all worked without any complications.
I have no armour left. You've stripped it from me. Whatever is left of me - whatever is left of me - whatever I am - I'm yours.