🤩 🎶 💹 HTML 2 में css सर्च या डेटाबेस दें 👨🏼‍💼 👩‍🎨 👰🏿

पिछले लेख में, मैंने केवल html को छोड़कर html + php + sql बंडल का उपयोग करने से इनकार कर दिया। पिछली बार की तरह, html पेज पर वह सब कुछ है जो हमें एक बार में चाहिए, और यह केवल खोज मापदंडों के आधार पर अतिरिक्त को हटाने के लिए रहता है। हम जावास्क्रिप्ट के साथ ऐसा करते थे, लेकिन अब हम 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_name"]~~ कक्षा श्रृंखला। और उदाहरण के लिए, ऐसी सीएसएस लाइन की मदद से, हम केवल एक घर को दिखाई देंगे।

 .home{display: none} .home.neogot.derevo.fl3{display: block}

और इस लाइन की रचना के लिए हम जावास्क्रिप्ट का उपयोग करेंगे।

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

यहां, मामलों के बीच में, लंगर को चयनित मापदंडों पर रखा गया है।

बस इतना ही।

पीएस धन्यवाद @ SelenIT2 टिप के लिए । जावास्क्रिप्ट कोड को थोड़ा छोटा कर दिया गया है और यूआरएल अधिक सुंदर हो गया है।

HTML 2 में css सर्च या डेटाबेस दें

More articles: