| |
 216 Кб |
|
| |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Script 5.3</title>
<link href="../css/global.css" rel="stylesheet" type="text/css">
<style type="text/css">
.pullquote {
float: right;
clear: right;
display: block;
width: 200px;
border: 1px solid black;
padding: 10px;
font-size: 20px;
background-color:#FFC;
margin: 20px 0 10px 10px;
font-style: italic;
color: #363;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('span.pq').each(function(){
var copy = $(this).clone();
copy.removeClass('pq');
copy.addClass('pullquote');
$(this).after(copy.html());
/*
*
var quote = $(this).clone();// Создзаем копию
$(this).removeClass('pq');//Удаляем из реального класс
$(this).addClass('pullquote');//Добавляем новый класс Теперь это стало, тем, чего мы и добивались.
$(this).before('<span class="pq">'+quote.html()+'</span>');//
*
*/
});
});
</script>
</head>
<body id="twoCol">
<div id="container">
<div id="banner"><img src="../images/banner.png" alt="JavaScript: The Missing Manual" width="760" height="65"><span id="badge"><a href="/"></a></span></div>
<div id="contentWrap">
<div id="main">
<h1>Auto-Pull Quotes</h1>
<h2>Vestibulum semper</h2>
<p>Vestibulum semper tincidunt sem. <span class="pq">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere</span> cubilia Curae; Donec pulvinar, justo non fringilla dapibus, sapien tortor cursus erat, at posuere magna nisi tincidunt sapien. Sed nisl. Fusce venenatis, libero porta porta fringilla, sapien odio tincidunt sem, id aliquam tellus sapien sit amet quam. Vivamus justo mi, aliquam vitae, eleifend et, lobortis quis, eros. Ut felis arcu, mollis ut, interdum molestie, vehicula a, sapien. Sed nisi nunc, bibendum vel, adipiscing sed, placerat quis, augue. Nullam ut nibh sed orci tempor rutrum. Sed iaculis. Suspendisse potenti. <span class="pq">Donec semper molestie felis. Sed vitae diam.</span> Curabitur sed velit convallis orci luctus viverra. Quisque et quam non tortor ultrices rutrum. Nulla porttitor mauris sed nunc. Donec lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras quis massa. Sed mattis erat vitae nisi.</p>
</div>
<div id="sidebar">
<h2>Script 5.3</h2>
</div>
</div>
<div id="footer"><em>“Building Interactive Web Sites with JavaScript”</em></div>
</div>
</body>
</html>
|
Первый, незакоментированный код не выполняет, то что должен. По идеи тут происходит поиск каких-то цитат, и копирование их в рамочку с боку см. файл. дело в том, что функция .html() возвращает только текст, без html кода. То что закоментированно является рабочим примероми чуток по другому работающий, но не это важно...
Так почему так происходит? Или я что-то упустил? | |
| |
|
