简体   繁体   中英

How do i add Jquery script file to my web page in visual studio 2012 pro?

I have visual studio 2012 pro. I did in the menu: New > Project > Web > ASP.NET Empty Web Application Then after project created i did on the solution explorer right click > Add > Web Form

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
</html>

Now i have files on my hard disk i downloaded: jquery-advanced-news-ticker-master The files i have are:

index.html file Two JS files And one json file

Downloaded the jquery script from here

The first one: jQuery Advanced News Ticker

But how do i use it with my Web Application ? I want to upload this html page to my already exist web site so i can see the text moving like marquee effect.

EDIT**

$(document).ready(function () {
    $('.newsticker').newsTicker({
        row_height: 48,
        max_rows: 2,
        speed: 600,
        direction: 'up',
        duration: 4000,
        autostart: 1,
        pauseOnHover: 0
    }); // This starts the news ticker
});

Added some options to mystuff.js but getting error in the chrome:

HTTP Error 403.14 - Forbidden
The Web server is configured to not list the contents of this directory.

Most likely causes:
A default document is not configured for the requested URL, and directory browsing is not enabled on the server.

Things you can try:
If you do not want to enable directory browsing, ensure that a default document is configured and that the file exists.
Enable directory browsing.
Go to the IIS Express install directory.
Run appcmd set config /section:system.webServer/directoryBrowse /enabled:true to enable directory browsing at the server level.
Run appcmd set config ["SITE_NAME"] /section:system.webServer/directoryBrowse /enabled:true to enable directory browsing at the site level.
Verify that the configuration/system.webServer/directoryBrowse@enabled attribute is set to true in the site or application configuration file.

Detailed Error Information:
Module     DirectoryListingModule
Notification       ExecuteRequestHandler
Handler    StaticFile
Error Code     0x00000000
Requested URL      http://localhost:62939/
Physical Path      D:\C-Sharp\Web\WebApplication1\WebApplication1
Logon Method       Anonymous
Logon User     Anonymous
Request Tracing Directory      C:\Users\bout0_000\Documents\IISExpress\TraceLogFiles\WEBAPPLICATION1

More Information:
This error occurs when a document is not specified in the URL, no default document is specified for the Web site or application, and directory listing is not enabled for the Web site or application. This setting may be disabled on purpose to secure the contents of the server.
View more information »

Somewhere in the HEAD tag of your web page (between the <head> and </head> html tags), add these lines:

<script src="Scripts/jquery-ui-1.10.3.min.js"></script>
<script src="Plugins/jquery.cookie.js"></script>
<link href="Content/themes/Smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<script src="js/newsTicker.js"></script>
<script src="js/mystuff.js"></script>

On a new page (called mystuff.js) of javascript you will need to add the code for document.ready(...)

$(document).ready(function () {
    $('.newsticker').newsTicker(); // This starts the news ticker
});

The News Ticker has too many options to go over here. Look at their website for more details.


UPDATE

It should look something like this when you are done:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-ui-1.10.3.min.js"></script>
    <script src="Plugins/jquery.cookie.js"></script>
    <link href="Content/themes/Smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
    <script src="js/newsTicker.js"></script>
    <script src="js/mystuff.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <ul class="newsticker">
                <li>Etiam imperdiet volutpat libero eu tristique.</li>
                <li>Curabitur porttitor ante eget hendrerit adipiscing.</li>
                <li>Praesent ornare nisl lorem, ut condimentum lectus gravida ut.</li>
                <li>Nunc ultrices tortor eu massa placerat posuere.</li>
            </ul>
        </div>
    </form>
</body>
</html>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM