Ответ 1
Метод три проще всего работать с теми, которые вы указали. Не беспокойтесь об эффективности преобразования строк. Для этого вам придется иметь миллионы статей, чтобы иметь реальное значение. Имейте в виду, что если вы создаете этот HTML-код на сервере, JSON должен быть закодирован, чтобы HTML был действительным. Вы можете использовать base-64 с .btoa()/.atob(), чтобы сделать это легко. Если свойство .dataset используется для установки данных в DOM, DOM позаботится об их правильном хранении в качестве объекта.
Четвертый вариант - использовать блок <pre> с display: none;. Это хорошо работает, если вы создаете свой список на сервере. Я использую этот метод в теме tumblr, которую я написал, http://stiff-theme.tumblr.com/, потому что у меня был очень небольшой контроль над выходом сервера. Вы можете оставить свой JSON незакодированным и легко преобразовать его в объект с помощью $.parseJSON().
HTML:
<pre>
{ "title": "titel1", "detailurl": "article1.html" }
</pre>
Script:
var articles = $.parseJSON( $( 'pre' ).text() );
Пятый метод - просто использовать HTML-разметку и CSS для стиля. Создайте свою разметку большой версии своей статьи, содержащей все. Затем используйте класс, чтобы скрыть, изменить размер и положение для отображения меньшего списка. Мне нравится этот метод лучше всего для проблемы, которую вы пытаетесь решить.
Демо: http://jsfiddle.net/ThinkingStiff/ngE8s/
HTML:
<ul id="articles">
<li>
<article>
<img src="large-image-url.png">
<h1>Title</h1>
<section>
<p>article body</p>
...
</section>
</article>
</li>
...
</ul>
<div id="display"><div>
CSS
#articles {
display: inline-block;
list-style-type: none;
padding: 0;
margin: 0;
vertical-align: top;
width: 200px;
}
#articles li {
border-bottom: 1px solid lightgray;
cursor: pointer;
display: block;
height: 32px;
overflow-y: hidden;
}
#articles img {
float: left;
height: 30px;
margin-right: 4px;
width: 30px;
}
#articles h1 {
font-size: 13px;
margin: 0;
}
#display {
display: inline-block;
vertical-align: top;
width: 400px;
}
#display img {
float: left;
height: 150px;
margin-right: 8px;
width: 150px;
}
#display h1 {
margin: 0;
}
p {
font-size: 18px;
}
Script:
document.getElementById( 'articles' ).addEventListener( 'click', function( event ) {
var article = event.target.closestByTagName( 'article' );
if( article ) {
var display = document.getElementById( 'display' ),
large = article.cloneNode( true );
display.removeChild( display.firstChild );
display.appendChild( large );
};
}, false );
Element.prototype.closestByTagName = function ( tagName ) {
return this.tagName && this.tagName.toUpperCase() == tagName.toUpperCase()
? this
: this.parentNode.closestByTagName && this.parentNode.closestByTagName( tagName );
};
Вывод:
