我正在使用
中的colorbox模态插件http://colorpowered.com/colorbox/
我完成了演示,一切看起来都非常简单易用。这就是我的例子:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="colorbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
</head>
<body>
<a class='gallery' href='image1.jpg'>Photo_1</a>
<a class='gallery' href='image2.jpg'>Photo_2</a>
<a class='gallery' href='image3.jpg'>Photo_3</a>
</body>
</html>
在简单的html文件环境中完美运行。但是,当我尝试通过将标记中的内容放入主文件中将其扩展到ASP.NET母版页时,我的其他页面无法识别它。事实上,如果我把它放在各个页面上的标签中,它也不会识别任何东西。我甚至试图引用原始URL而不是本地.js文件,但没有运气。这就是我在主文件中调用它的方式:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<script src="http://colorpowered.com/colorbox/core/colorbox/jquery.colorbox.js" type="text/javascript"></script>
<link href="http://colorpowered.com/colorbox/core/example1/colorbox.css" rel="stylesheet" type="text/css" />
<script>
jQuery(document).ready(function () {
jQuery('a.gallery').colorbox({ opacity:0.5 , rel:'group1' });
});
</script>
</head>
这就是我在.aspx页面中使用它的方式:
<p>
<a class="gallery" href="http://upload.wikimedia.org/wikipedia/commons/3/37/African_Bush_Elephant.jpg">elephant</a>
<a class="gallery" href="http://upload.wikimedia.org/wikipedia/commons/3/37/African_Bush_Elephant.jpg">elephant</a>
<a class="gallery" href="http://upload.wikimedia.org/wikipedia/commons/3/37/African_Bush_Elephant.jpg">elephant</a>
</p>
我觉得我完全按照教程。任何人都可以告诉我我可能做错了什么吗?这令人难以置信地令人沮丧(顺便说一下,不是我生命中曾经做过的第一个影子盒,但这是我第一次遇到这么多麻烦而且我责备VS2012)。
答案 0 :(得分:0)
解决方案最终比我想象的要简单得多。首先,你要确保这一部分:
<script>
jQuery(document).ready(function () {
jQuery('a.gallery').colorbox({ opacity:0.5 , rel:'group1' });
});
</script>
位于您希望它运行的.aspx(或.html)文件中,而不是您的母版页。第二,如果您使用ASP.NET默认站点设置,您将获得很多膨胀,包括运行脚本的这个小宝石:
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=272931&clcid=0x409 --%>
<%--Framework scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site scripts--%>
</Scripts>
</asp:ScriptManager>
除非您在上面的ScriptManager中使用某些脚本,否则请注释掉它。然后按照标签中通常的方式调用普通脚本。
我的最终母版页看起来像这样:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<%-- <Scripts>--%>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=272931&clcid=0x409 --%>
<%--Framework scripts--%>
<%-- <asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />--%>
<%--Site scripts--%>
<%-- </Scripts>--%>
</asp:ScriptManager>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<a runat="server" href="~/">your logo here</a>
</p>
</div>
<div class="float-right">
<section id="login">
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul>
<li><a id="registerLink" runat="server" href="~/Account/Register">Register</a></li>
<li><a id="loginLink" runat="server" href="~/Account/Login">Log in</a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<p>
Hello, <a runat="server" class="username" href="~/Account/Manage" title="Manage your account">
<asp:LoginName runat="server" CssClass="username" />
</a>!
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" />
</p>
</LoggedInTemplate>
</asp:LoginView>
</section>
<nav>
<ul id="menu">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>
© <%: DateTime.Now.Year %> - My ASP.NET Application
</p>
</div>
</div>
</footer>
</form>
</body>
</html>
我的default.aspx看起来像这样:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContent" runat="server">
<script>
$(document).ready(function () {
//Examples of how to assign the Colorbox event to elements
$(".group1").colorbox({ rel: 'group1' });
$(".group2").colorbox({ rel: 'group2', transition: "fade" });
$(".group3").colorbox({ rel: 'group3', transition: "none", width: "75%", height: "75%" });
$(".group4").colorbox({ rel: 'group4', slideshow: true });
$(".ajax").colorbox();
$(".youtube").colorbox({ iframe: true, innerWidth: 640, innerHeight: 390 });
$(".vimeo").colorbox({ iframe: true, innerWidth: 500, innerHeight: 409 });
$(".iframe").colorbox({ iframe: true, width: "80%", height: "80%" });
$(".inline").colorbox({ inline: true, width: "50%" });
$(".callbacks").colorbox({
onOpen: function () { alert('onOpen: colorbox is about to open'); },
onLoad: function () { alert('onLoad: colorbox has started to load the targeted content'); },
onComplete: function () { alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup: function () { alert('onCleanup: colorbox has begun the close process'); },
onClosed: function () { alert('onClosed: colorbox has completely closed'); }
});
$('.non-retina').colorbox({ rel: 'group5', transition: 'none' })
$('.retina').colorbox({ rel: 'group5', transition: 'none', retinaImage: true, retinaUrl: true });
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function () {
$('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
</asp:Content>
<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1><%: Title %>.</h1>
<h2>Modify this template to jump-start your ASP.NET application.</h2>
</hgroup>
<p>
To learn more about ASP.NET, visit <a href="http://asp.net" title="ASP.NET Website">http://asp.net</a>.
The page features <mark>videos, tutorials, and samples</mark> to help you get the most from
ASP.NET. If you have any questions about ASP.NET visit
<a href="http://forums.asp.net/18.aspx" title="ASP.NET Forum">our forums</a>.
</p>
</div>
</section>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<h3>We suggest the following:</h3>
<ol class="round">
<li class="one">
<h5>Getting Started</h5>
ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
<a href="http://go.microsoft.com/fwlink/?LinkId=245146">Learn more…</a>
</li>
<li class="two">
<h5>Add NuGet packages and jump-start your coding</h5>
NuGet makes it easy to install and update free libraries and tools.
<a href="http://go.microsoft.com/fwlink/?LinkId=245147">Learn more…</a>
</li>
<li class="three">
<h5>Find Web Hosting</h5>
You can easily find a web hosting company that offers the right mix of features and price for your applications.
<a href="http://go.microsoft.com/fwlink/?LinkId=245143">Learn more…</a>
</li>
</ol>
These are images: <br />
<a class="group1" href="https://pbs.twimg.com/profile_images/604644048/sign051.gif">sign.</a> <br />
<a class="group1" href="http://i.telegraph.co.uk/multimedia/archive/02368/potd-cowboy-cat_2368962k.jpg">cat.</a><br />
<a class="group1" href="http://www.nonags.com/funimg/dogiedoll.jpg">dog.</a><br />
<a class="group2" href="https://pbs.twimg.com/profile_images/604644048/sign051.gif">sign.</a> <br />
<a class="group2" href="http://i.telegraph.co.uk/multimedia/archive/02368/potd-cowboy-cat_2368962k.jpg">cat.</a><br />
<a class="group2" href="http://www.nonags.com/funimg/dogiedoll.jpg">dog.</a><br />
<a class="group3" href="https://pbs.twimg.com/profile_images/604644048/sign051.gif">sign.</a> <br />
<a class="group3" href="http://i.telegraph.co.uk/multimedia/archive/02368/potd-cowboy-cat_2368962k.jpg">cat.</a><br />
<a class="group3" href="http://www.nonags.com/funimg/dogiedoll.jpg">dog.</a><br />
<a class="group4" href="https://pbs.twimg.com/profile_images/604644048/sign051.gif">sign.</a> <br />
<a class="group4" href="http://i.telegraph.co.uk/multimedia/archive/02368/potd-cowboy-cat_2368962k.jpg">cat.</a><br />
<a class="group4" href="http://www.nonags.com/funimg/dogiedoll.jpg">dog.</a><br />
</asp:Content>