В прошлой статье я отказался от использования связки html + php + sql, оставив только html. Как и в прошлый раз, на html странице находится сразу все, что нам нужно, и остаётся только убрать лишнее, исходя из параметров поиска. Раньше мы это делали при помощи JavaScript, а теперь воспользуемся возможностями CSS.
Ну опять же стандартная заготовка страницы.
Итак, блоки, содержащие информацию кроме стилевых классов содержат описательные. Описательные классы нам позволят отобразить только походящие по параметрам блоки.
Для этого воспользуемсяселектором атрибутов [class~=«class_name»] цепочкой классов. И например с помощью такой CSS строки мы оставим видимым только один дом.
А для составления этой строки мы воспользуемся JavaScript.
Тут ещё между делом якорь делается на выбранные параметры.
Вот собственно и все.
P.S. Спасибо @SelenIT2 за наводку. JavaScript код немного укоротился да и url красивей стал.
Ну опять же стандартная заготовка страницы.
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="ru">
<title>Поиск</title>
<script src="search.js"></script>
<link
href="search.css"
type="text/css"
rel="stylesheet"
charset="utf-8"
>
<style id="filter">
</style>
</head>
<body>
<table class="search">
<tr>
<th>Стиль:</th>
<td>
<select id="style">
<option value="">любой</option>
<option value="neoklas" id="neoklas">неоклассицизм</option>
<option value="postmodern" id="postmodern">постмодерн</option>
<option value="psevdomodern" id="psevdomodern">псевдомодерн</option>
<option value="neogot" id="neogot">неоготика</option>
</select>
</td>
</tr>
<tr>
<th>Материал стен:</th>
<td>
<select id="wall_material">
<option value="">любой</option>
<option value="kirpich" id="kirpich">кирпич</option>
<option value="gazobeton" id="gazobeton">газобетон</option>
<option value="karkas" id="karkas">деревянный каркас</option>
<option value="derevo" id="derevo">дерево</option>
</select>
</td>
</tr>
<tr>
<th>Этажность:</th>
<td>
<select id="floors">
<option value="">любой</option>
<option value="fl1" id="fl1">1</option>
<option value="fl2" id="fl2">2</option>
<option value="fl3" id="fl3">3</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input id="search" type="button" value="поиск" />
</td>
</tr>
</table>
<!-- дома -->
<div class="home whiteframe neoklas kirpich fl2">
<a class="url" href="http://kirpich.example.com/#rust">
<img class="image" src="http://kirpich.example.com/thmb/rust/rust_vid-1.jpg" alt=""/>
</a>
<div class="name">
<a class="url" href="http://kirpich.example.com/#rust">
«Руст»
</a>
</div>
<div class="style">неоклассицизм</div>
<div class="wall_material">керамический кирпич, утепленный минеральной ватой</div>
<div class="square">165.5</div>
<div class="living_space">86</div>
<div class="floors">2</div>
</div>
<div class="home whiteframe postmodern gazobeton fl2">
<a class="url" href="http://kirpich.example.com/#shater">
<img class="image" src="http://kirpich.example.com/thmb/shater/shater_enter.jpg" alt=""/>
</a>
<div class="name">
<a class="url" href="http://kirpich.example.com/#shater">
«Шатер»
</a>
</div>
<div class="style">постмодерн</div>
<div class="wall_material">газобетонные блоки</div>
<div class="square">262</div>
<div class="living_space">148.5</div>
<div class="floors">2</div>
</div>
<div class="home whiteframe psevdomodern karkas fl1">
<a class="url" href="http://karkas.example.com/#papirus">
<img class="image" src="http://karkas.example.com/thmb/papirus/Papirus%20Vid-1.jpg" alt="" title="«Папирус»"/>
</a>
<div class="name">
<a class="url" href="http://karkas.example.com/#papirus">
«Папирус»
</a>
</div>
<div class="style">псевдомодерн</div>
<div class="wall_material">утепленный деревянный каркас</div>
<div class="square">142.3</div>
<div class="living_space">77.9</div>
<div class="floors">1</div>
</div>
<div class="home whiteframe neogot derevo fl3">
<a class="url" href="http://derevo.example.com/#legenda">
<img class="image" src="http://derevo.example.com/thmb/orehovo/orehovo.jpg" alt="" title="«Легенда»"/>
</a>
<div class="name">
<a class="url" href="http://derevo.example.com/#legenda">
«Легенда»
</a>
</div>
<div class="style">неоготика</div>
<div class="wall_material">дерево</div>
<div class="square">436.7</div>
<div class="living_space">166.2</div>
<div class="floors">3</div>
</div>
<!--
<div class="home whiteframe">
<a class="url" href="">
<img class="image" src="" alt="" title=""/>
</a>
<div class="name">
<a class="url" href="">
</a>
</div>
<div class="style"></div>
<div class="wall_material"></div>
<div class="living_space"></div>
<div class="square"></div>
<div class="floors"></div>
</div>
-->
</body>
</html>Итак, блоки, содержащие информацию кроме стилевых классов содержат описательные. Описательные классы нам позволят отобразить только походящие по параметрам блоки.
<div class="... neogot derevo fl3">Для этого воспользуемся
.home{display: none} .home.neogot.derevo.fl3{display: block}А для составления этой строки мы воспользуемся JavaScript.
function select_el(value){
if (value){
var el=document.getElementById(value);
if (el) el.selected = true;
}
}
function get_filter(id){
var value=document.getElementById(id).value;
if (value)
return "."+value;
else
return "";
}
(function(){
var but = document.getElementById("search");
if (!but) return setTimeout(arguments.callee, 1000);
var params = document.location.hash.replace("#","").split(".");
for (var i = 0; i < params.length; i++)
select_el(params[i]);
(but.onclick = function(){
var style = document.getElementById("filter");
var style_text = [".home{display: none} .home",get_filter("style"), get_filter("wall_material"), get_filter("floors"),"{display: block}"].join("");
if (typeof style.textContent == "string")
style.textContent = style_text;
else
style.styleSheet.cssText = style_text;
document.location.hash = [get_filter("style"), get_filter("wall_material"), get_filter("floors")].join("");
})()
})()Тут ещё между делом якорь делается на выбранные параметры.
Вот собственно и все.
P.S. Спасибо @SelenIT2 за наводку. JavaScript код немного укоротился да и url красивей стал.
