VPF::Почему не подключается jQueryUI. - Форум программистов

Fighter

Дата 26.11.2011, 20:04 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 810
Регистрация: 5.1.2005

Репутация: нет
Всего: 2

Ниже создавал тему где у меня пропадали кнопки у слайдера, но эта проблема вроде как решена. Теперь возникла другая проблема, необходимо было сделать так, чтобы картинки помимо того чтобы переключаться на кнопки, чтобы они переключались сами автоматически, через какой то промежуток времени. Это легко было сделать, с помощью setInterval, но, также необходимо сделать чтобы отображался progressbar, то есть, как только progressbar заполняется - картинка переключается. Сначала думал сам рисовать, но потом решил попробовать библиотеку jQueryUI. Сначала я опробовал progressbar в отдельном проекте - все получилось, далее вроде сделал все то же самое в текущем проекте, и он говорит мне что progressbar это не функция, то есть, другими словами получается что она не определена. Ниже привел код трех файлов, sitemaster, index.aspx и MainIndex.js, может быть кто сможет тыкнуть пальцем туда где у меня не правильно.

SiteMaster

Код


<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="/Content/CSS/MasterStyle.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" type="text/css" href="/Content/jQueryUI/ui-lightness/jquery-ui-1.8.16.custom.css"/>
    <script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/Scripts/jQueryUI/jquery-ui-1.8.16.custom.min.js"></script>

        <asp:ContentPlaceHolder runat="server" ID="HeaderMetaContent"></asp:ContentPlaceHolder>

</head>

<body>
    <div id="HeaderContainer">
    The will be header image
    </div>

    <div id="LinksContainer">
        <% Html.RenderPartial("SharedLinks"); %>
    </div>


    <div id="MainContainer">
        <asp:ContentPlaceHolder runat="server" ID="MainContent"></asp:ContentPlaceHolder>
    </div>


</body>
</html>

Index.aspx

Код


<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>

<asp:Content runat="server" ID="Content3" ContentPlaceHolderID="HeaderMetaContent">

    <link rel="stylesheet" type="text/css" href="/Content/CSS/MainIndex.css" />
    <script type="text/javascript" src="/Scripts/SiteScripts/MainIndex.js" defer="defer"></script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%= Html.TextBox("Text1") %>


<div id="ImageContainer">
    <img src="/Content/SlideShow/2.jpg" style="display: flexbox" height="80%" width="80%" />
</div>
  
        <ul class="SliderElements">
        
        <li><a href="/Content/SlideShow/2.jpg">This is a second photo</a></li>
        <li><a href="/Content/SlideShow/3.jpg">This is a third photo</a></li>
        <li><a href="/Content/SlideShow/4.jpg">This is a fourth photo</a></li>
        <li><a href="/Content/SlideShow/5.jpg">This is a fifth photo</a></li>
        

    </ul>

</asp:Content>

MainIndex.js

Код


$(function () {

    var slideImagesCount = $('.SliderElements > li > a').size();
    var currentImage = 1;
    var currentTickCount = 1;
    var maxTickCount = 70;
    var imageShow = $('#ImageContainer > img');
    $('#MainContainer').css('height', '80%');
    $('#MainContainer').css('width', '80%');

    var textBox = $('#Text1');

    var leftButton = $("<div></div>").addClass('LeftButton');
    leftButton.appendTo('#ImageContainer');

    var rightButton = $('<div></div>').addClass('RightButton');
    rightButton.appendTo('#ImageContainer');

    var gauge = $('<div id="-t-progress-bar"></div>').addClass('gaugeBar');
    gauge.appendTo('#MainContainer');




    var switchPrevImage = function () {
        if (currentImage == 1) {
            currentImage = slideImagesCount;
        }
        else {
            currentImage = currentImage - 1;
        }
        var imageLink = $('.SliderElements > li > a')[currentImage - 1];
        imageShow.fadeTo(600, 0.0, function () {
            imageShow.attr('src', imageLink);
            imageShow.fadeTo(600, 1);
        });
    };

    var switchNextImage = function () {
        if (currentImage == slideImagesCount) {
            currentImage = 1;
        }
        else {
            currentImage = currentImage + 1;
        }
        var imageLink = $('.SliderElements > li > a')[currentImage - 1];
        imageShow.fadeTo(600, 0.0, function () {
            imageShow.attr('src', imageLink);
            imageShow.fadeTo(600, 1);
        });
    };

    var drawProgressBar = function (currentTick) {
        textBox.val(currentTick);
        
    };

    var tickCountEvent = function () {
        currentTickCount++;
        if (currentTickCount == maxTickCount) {
            currentTickCount = 1;
            switchNextImage();
        }

        drawProgressBar(currentTickCount);
    };

    $(window).bind('load', function (event) {
        leftButton.height(imageShow.height());
        leftButton.css('top', imageShow.position().top);
        leftButton.css('left', imageShow.position().left - leftButton.width());

        rightButton.height(imageShow.height());
        rightButton.css('top', imageShow.position().top);
        rightButton.css('left', imageShow.position().left + imageShow.width());
        window.setInterval(tickCountEvent, 100);

        gauge.progressbar();
    });

    leftButton.bind('click', function (event) {
        switchPrevImage();
        currentTickCount = 1;
    });

    rightButton.bind('click', function (event) {
        switchNextImage();
        currentTickCount = 1;
    });

    $(window).bind('resize', function () {
        leftButton.height(imageShow.height());
        leftButton.css('top', imageShow.position().top);
        rightButton.height(imageShow.height());
        leftButton.css('left', imageShow.position().left - leftButton.width());
        rightButton.css('top', imageShow.position().top);
        rightButton.css('left', imageShow.position().left + imageShow.width());


    });
});

Добавлено через 1 минуту и 8 секунд
Если точнее то в MainIndex.js на 78 строке gauge.progressbar(); говорит что progressbar - это не функция.

WolfAlone

Дата 6.12.2011, 09:54 (ссылка)

(нет голосов)

Загрузка ...

В экстазе

Профиль
Группа: Завсегдатай
Сообщений: 1010
Регистрация: 16.9.2008
Где: Рай

Репутация: нет
Всего: 5

Где-нибудь есть эта ошибка в "скомпилированном" виде? То есть, можно ли где-то в Интернете посмотреть уже готовую страницу, на которой возникает эта ошбика?

--------------------

И сказал Бог: "Тогда я построю свой мир с блэк-джеком и шлюхами!"

Ф топку Ubuntu, Debian наше фсё!

(с) Евгений Вольф

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »