Clever Geek Handbook

HTML 2でCSS検索またはデータベースを許可します

前回の記事では、html + php + sqlバンドルの使用を拒否し、htmlのみを残しました。 前回と同様に、htmlページには必要なものがすべて揃っており、検索パラメーターに基づいて余分な部分を削除するだけです。 以前はJavaScriptを使用してこれを行っていましたが、ここではCSSを利用します。





さて、再び、標準のページレイアウト。 



<!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">




このために使用します 属性セレクター [class〜= "class_name"] クラスチェーン。 そして、例えば、そのようなCSS行の助けを借りて、1つの家だけを見えるままにします。 



 .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(""); })() })()




ここでは、場合によっては、選択したパラメーターにアンカーが配置されます。



それだけです。



PSヒントについて@ SelenIT2に感謝します 。 JavaScriptコードが少し短縮され、URLがより美しくなりました。


More articles:


All Articles