ในระบบ Mobile Mall เรามักจะเห็นว่ามีช่องค้นหาที่ด้านบนของหน้า แผนที่คลุมเครือ
ในการสร้างช่องค้นหาสิ่งนี้กุญแจสู่เทคโนโลยีคือ:
ก่อนอื่นเรากำหนดชิ้นส่วน HTML:
<!-Search Box-> <header class = bar> <form name = search class = search id = search action => <div class = search-download> <input type = name search = word id = wor d> <span class = placeholder> <span class = iconfont icon-sousuo> </span> <span class = text> search </span> </div> </header> <!-แผนที่พื้นหลังเป็นแผนที่การหมุน- > <div class = พื้นหลัง> <img src = bg.jpg> </div>
แท็กส่วนหัวคือช่องค้นหาและ DIV ต่อไปนี้เป็นแผนที่พื้นหลัง
ในเวลาเดียวกันรูปแบบ CSS ติดอยู่:
<style type = text/css> body {margin: 0; Bar {pose: recide; * การค้นหาเฟรม } -radius: 6px; เป็นบวก: 2px; Align: Center; สี: #666;} ซ้าย: 5px; >รูปแบบ CSS ที่ยาวนาน แต่หลักของมันคือสองประโยค: แก้ไข; สไตล์ของสไตล์สำหรับการเรียงพิมพ์ของหน้า
ด้วยวิธีนี้เราทำช่องค้นหาแบบคงที่:
ข้อสังเกต: ไอคอนการค้นหาที่นี่ใช้ IconFont และผู้อ่านสามารถดาวน์โหลดได้ที่ไอคอนไอคอนไอคอนไอคอนไอคอนของพวกเขาเอง
ณ จุดนี้เราต้องบรรลุเอฟเฟกต์การเคลื่อนไหวบางอย่างผ่าน JS:
มันถูกใช้เพื่อตระหนักถึงการสลับไอคอนตำแหน่ง "การค้นหา" ในระหว่างการสลับผู้ใช้อินพุต
. .active .placeholder {แสดง: ไม่มี} <script type = text/javascript>/* กล่องอินพุตเพื่อให้ได้โฟกัสที่ระบุว่าผู้ใช้กำลังป้อน*/$ (#word) .focusin () () {$ (ดู arch- row) .addclass (ไอคอนไอคอนที่ใช้งานอยู่ไอคอน- Sousuo);/* อินพุตกล่องโฟกัสที่หายไประบุว่าผู้ใช้ป้อน*/$ (#word) .focusout (ฟังก์ชั่น () {/* กำหนดว่าผู้ใช้มีอินพุตเนื้อหา* if ($ (this) .val () ==) { /* ไม่มีรูปแบบการเปลี่ยนแปลงเนื้อหา* /$ (. search-download) .rmoveclass (ไอคอนไอคอนที่ใช้งานอยู่); .submit ();}});ข้อสังเกต: คุณต้องแนะนำ jQuery ที่นี่อย่าลืม!
ส่วนขยายรหัส HTML แบบเต็ม:
<! = styleshet type = text/css href = iconfont/iconfont.css> <script type = text/javascript src = jQuery -.11.1.min.js> </script> <style type = text/css> body {margin: 0 การเติมเต็ม: 0; * กำหนดกล่องค้นหาด้านบน* / ความสูง: 44px; : block; ความสูง: 21px; Align: Center; ชายแดน: 0; -Height: 24px; } Text-Align: left} .active .placeholder {display: none} </style> </head> <body> <!--Search Box-> <header class = bar> <form name = search class = search id = id = การค้นหาการดำเนินการ => <div class = search-eat> <input type = name search = word id = word> span class = placeholder> <span class = iconfont iconfont icon-sausuo> </span> <span class = text> ค้นหา < /span> </div> </header> <!-แผนที่พื้นหลังเป็นจริงที่นี่มักจะเป็นแผนที่หมุน-> <div class = พื้นหลัง> <img src = bg.jpg> </body> <script type = Text/JavaScript>/* กล่องอินพุตเพื่อให้ได้โฟกัสระบุว่าผู้ใช้อยู่ใน ENTER*/$ (#WORD) .focusin (function () {$ (). search-download) .AddClass (ไอคอนไอคอนที่ใช้งานอยู่ ; /* กล่องอินพุตสูญเสียโฟกัสเพื่อระบุอินพุตของผู้ใช้* /$ (# word) .focusout (function () { /* ตรวจสอบว่าผู้ใช้มีอินพุตเนื้อหา* /if (this). vis () ==) { /* ไม่มีอินพุตเนื้อหาเพื่อเปลี่ยนสไตล์* /$ (. search-download) (#Search) .submit ();}); สรุปข้างต้นคือการใช้งาน HTML ของ Terminal Mobile Terminal ที่ได้รับการแก้ไขแบบกึ่งโปร่งใสฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!