0

Web サイトのコンテンツを 3 つの異なる方法で動的に変更しています。

0) Reading json files via jQuery's getJSON('bla.json');
1) Retrieving jsonized C#/Razor classes via jQuery's 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 の私のサイトにアクセスしてください。Books > Spurs (Westerns) 賞 (開始したばかり - これまでに 1 本のみ) は、Load('bla.html') を使用するものです。アプローチ; Hugos は cshtml を使用し、他のすべては生の json ファイルを取得しています。

スパーズに準拠したコード全体は次のとおりです。

HTML (上記の行は何の役にも立たなかったので削除しました):

<div class="yearBanner">2013</div><section class="wrapper" ><a id="mainImage" class="floatLeft" href="https://rads.stackoverflow.com/amzn/click/com/B0085DOE2O" rel="nofollow noreferrer"" target="_blank"><img height="160" width="107" src="http://images.amazon.com/images/P/B0085DOE2O.01.MZZZZZZZ.jpg"alt="Tucker's 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's 
Reckoning</cite><br/><div id="prizeArtist" class="author">Ralph Compton and Matthew Mayo</div><br/><button><a href="https://rads.stackoverflow.com/amzn/click/com/B0085DOE2O" rel="nofollow noreferrer" target="_blank" rel="nofollow" >Kindle</a></button><button><a href="https://rads.stackoverflow.com/amzn/click/com/0451415612" rel="nofollow noreferrer" target="_blank" 
rel="nofollow" >Hardcover</a></button><button><a href="https://rads.stackoverflow.com/amzn/click/com/0451465482" rel="nofollow noreferrer" 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);
}

HTML ファイルから _SiteLayout.cshtml を参照できますか、または目的の jQuery テーマをボタンに組み込むにはどうすればよいですか?

4

1 に答える 1

1

.load()ajax関数です。使うときは基本的に

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

ページのボタンはまだ読み込まれていないため、何も起こりません。

単純にコールバック関数を使用します:

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

他に何か必要な場合はお知らせください。

于 2013-09-21T02:49:10.470 に答える