對於 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