Как добавить эффекты пользовательского интерфейса jQuery к кнопкам, загруженным из простого файла HTML?

0

Я динамически меняю содержимое на своем веб-сайте тремя способами:

0) Reading json files via jQuery getJSON('bla.json');
1) Retrieving jsonized C#/Razor classes via jQuery getJSON('bla.cshtml');
2) Loading the html from a file via $('#divName').load('bla.html');

Все они работают нормально, за исключением того, что последний не украшает/не пугает мои кнопки.

Я думал, возможно, это потому, что HTML файл не знал jQuery и jQuery UI, поэтому я добавил эти строки в начало страницы:

<link href="~/css/excite-bike/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.3.custom.min.js"></script>

... но это не имеет значения.

Чтобы увидеть эффект "живой", перейдите на мой сайт по адресу www.awardwinnersonly.com - награды "Книги"> "Шпоры" ("Вестники") (только что начатая - только одна книга) - та, которая использует Load ("bla.html") подход; Hugos использует cshtml, а все остальные получают сырые json файлы.

Вот весь код, подходящий для Spurs:

HTML (я вынул строки, показанные выше, так как они не помогли):

<div class="yearBanner">2013</div><section class="wrapper" ><a id="mainImage" class="floatLeft" href="http://rads.stackoverflow.com/amzn/click/B0085DOE2O"" target="_blank"><img height="160" width="107" src="http://images.amazon.com/images/P/B0085DOE2O.01.MZZZZZZZ.jpg"alt="Tucker Reckoning by Ralph Compton and Matthew Mayo book cover"></img></a><div id="prizeCategory" class="category">Best Short Novel</div><br/><cite id="prizeTitle" >Tucker 
Reckoning</cite><br/><div id="prizeArtist" class="author">Ralph Compton and Matthew Mayo</div><br/><button><a href="http://rads.stackoverflow.com/amzn/click/B0085DOE2O" target="_blank" rel="nofollow" >Kindle</a></button><button><a href="http://rads.stackoverflow.com/amzn/click/0451415612" target="_blank" 
rel="nofollow" >Hardcover</a></button><button><a href="http://rads.stackoverflow.com/amzn/click/0451465482" target="_blank" rel="nofollow" >Paperback</a></button></section>

CSS:

.yearBanner {
    font-size: 2em;
    color: white;
    font-family: 'Segoe UI Light', Candara, Calibri, Consolas, sans-serif;
    width: 400px;
    padding-top: 50px;
    margin-left: 50px;
    padding-bottom: 20px;
}

.floatLeft {
    float: left;
    padding-right: 10px;
    padding-left: 5px;
}

section.wrapper {
    /* this may need to be wider when landscape cover img is used */
    min-width: 400px;
    overflow: hidden;
    display: block;
    float: left;
    margin-top: 5px;
}

.wrapper {
    float: left;
    width: 400px;
    margin-left: 20px;
    padding-bottom: 20px;
}

.category {
    display: inline-block;
    font-family: Consolas, sans-serif;
    font-size: 2em;
    color: Orange;
    width: 160px;
}

.categorySmallerFont {
    display: inline-block;
    font-family: Consolas, sans-serif;
    font-size: 1.5em;
    color: Orange;
    width: 160px;
}

cite {
    display: inline-block;
    font-family: Calibri, Candara, serif;
    color: Yellow;
    width: 160px;
}

.author, .artist, .person {
    display: inline-block;
    font-family: Courier, sans-serif;
    font-size: 0.8em;
    color: White;
    width: 160px;
}

JQuery:

function getSpurs() {
    $('#BooksContent').load('Content/spurFirstPage.html');
    $('button').button();
    var $largest = 0;
    $(".wrapper").each(function () {
        if ($(this).height() > $largest) {
            $largest = $(this).height();
        }
    });
    $(".wrapper").css("height", $largest);
}

Можно ли ссылаться на _SiteLayout.cshtml из моего html файла или как я могу включить нужную тему jQuery на мои кнопки?

Теги:
razor

1 ответ

1
Лучший ответ

.load() является функцией ajax. В основном, когда вы используете

$('#BooksContent').load('Content/spurFirstPage.html');
$('button').button();

кнопки со страницы еще не загружены, поэтому ничего не происходит.

Просто используйте функцию обратного вызова:

$('#BooksContent').load('Content/spurFirstPage.html', function(){
     $('button').button();
});

Позвольте мне знать, если вам нужно что-нибудь еще.

  • 1
    Отлично, спасибо. Я обновил свой сайт, и теперь он выглядит красивее, чем я не знаю, что.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню