JQuery Intellisense VS2008 最終改良版
對於 JQuery 的愛用者來說可以透過 VS2008 實現 Intelisense 功能簡直就是完美了!
那接下來是要如何設定呢?
1.首先必須安裝修補 vs2008 的HOTFIX檔案
2.接下來必須有 Jquery.js 和 JQuery-Intellisense.js (原處) 這兩個檔案。
3.下載到專案後怎使用呢?
於用到 JQUERY 的網頁 加上以下這段程式碼 (主要 PLACEHOLDER 部分)
<script type="text/javascript" src="js/jquery.js" ></script> <asp:PlaceHolder ID="PlaceHolder1" runat="server" visible="false"> <script type="text/javascript" src="js/JQuery.Intellisense.js" ></script> </asp:PlaceHolder>如果是獨立的 .js 檔案則加上
/// <reference path="js/JQuery.Intellisense.js"/>
於頁面上的例子
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>I have intellisense!</title> <script type="text/javascript" src="js/jquery.js" ></script> <asp:PlaceHolder runat="server" visible="false"> <script type="text/javascript" src="js/JQuery.Intellisense.js" ></script> </asp:PlaceHolder> <script type="text/javascript"> $(function() { $("#someDiv").hide().html("Some text here!!!").addClass("bold").fadeIn(1000).fadeOut(2000); }); </script> <style type="text/css"> .bold{ font-weight:bold; } </style> </head> <body> <form id="form1" runat="server"> <div id="someDiv"> </div> </form> </body> </html>
於 MasterPage的例子
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script type="text/javascript" src="js/jquery.js" ></script> <asp:PlaceHolder runat="server" visible="false"> <script type="text/javascript" src="js/JQuery.Intellisense.js" ></script> </asp:PlaceHolder> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html>
於普通的 content 頁面的例子
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" Title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <script type="text/javascript"> $(function() { $("#someDiv").addClass("bold").fadeIn(2000).fadeOut(1000).html("gone"); }); </script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> </asp:Content>
於 UserControl 的例子
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TestControl.ascx.cs" Inherits="TestControl" %> <asp:PlaceHolder ID="PlaceHolder1" runat="server" visible="false"> <script type="text/javascript" src="js/JQuery.Intellisense.js" ></script> </asp:PlaceHolder> <script type="text/javascript"> $(function() { $("#someDiv").hide().html("Some text here!!!").addClass("bold").fadeIn(1000).fadeOut(2000); }); </script>
網站範例檔案下載: JqueryIntellisenseWebsite.zip (連結來自 BradVin's .Net Blog)
[參考連結] (Better) JQuery IntelliSense in VS2008
Comment Form under post in blogger/blogspot