Я динамически меняю содержимое на своем веб-сайте тремя способами:
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 на мои кнопки?
.load()
является функцией ajax. В основном, когда вы используете
$('#BooksContent').load('Content/spurFirstPage.html');
$('button').button();
кнопки со страницы еще не загружены, поэтому ничего не происходит.
Просто используйте функцию обратного вызова:
$('#BooksContent').load('Content/spurFirstPage.html', function(){
$('button').button();
});
Позвольте мне знать, если вам нужно что-нибудь еще.