บทความนี้อธิบายถึงปลั๊กอินการแสดงภาพการแสดงผลที่กำหนดเองที่ใช้งานโดย JS แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
ฉันพบปัญหาในงานของฉัน - กระบวนการทางธุรกิจแบ่งออกเป็นหลายขั้นตอน หากข้อมูลไม่ปรากฏในแต่ละขั้นตอนไฟล์การโหลดภาพการโหลด. gif จะต้องปรากฏขึ้นก่อนที่จะแสดงและหากมีข้อมูลมันจะหายไป ด้วยเหตุนี้ฉันจึงเขียนวิธีการด้วยตัวเองเพื่ออำนวยความสะดวกในการใช้งานโครงการทั้งหมด
<ปุ่ม onclick = "show ()"> แสดง </button> <button onclick = "hide ()"> ซ่อน </button> <script> // สร้างการโหลดวัตถุ var obj = ใหม่ loadingimg (); // แสดงฟังก์ชั่นการโหลดภาพแสดง () {obj.show ();} // ซ่อนฟังก์ชั่นการโหลด loadingimg (mySetting) {var that = this; if (mySetting == "" || mySetting == undefined || typeof mySetting! = "object") {mySetting = {}; } // ใช้การประทับเวลาเป็น ID ของ Space var targetId = วันที่ใหม่ (). getTime (); this.setting = {// แทรกคอนเทนเนอร์ของรูปภาพผ่านพารามิเตอร์ targetConater โดยใช้วิธี jQuery query: "", // ใช้ที่อยู่ภาพ imgurl: "../img/loading.gif", // ความกว้างของการแสดงภาพ imgwidth: "32px" ฟังก์ชั่นการโทรกลับก่อนหน้านี้ beforeshow: ฟังก์ชั่น (ปลั๊กอิน) {}, // ฟังก์ชั่นการโทรกลับ aftershow: ฟังก์ชั่น (ปลั๊กอิน, targetId) {}} this.setting = $. extend (this.setting, mysetting); // รับความกว้างของหน้าจอ this.getScreenWidth = function () {return document.documentElement.ClientWidth; } // รับความสูงของหน้าจอ this.getScreenheight = function () {return document.documentelement.clientheight; } // แสดงการควบคุม this.show = function () {$ ("#" + that.setting.targetId) .show (); } // ซ่อนตัวควบคุม this.hide = function () {$ ("#" + that.setting.targetId) .hide (); } this.init = function () {// แสดงถ้า (typeof that.setting.beforeshow == "function") {that.setting.beforeshow (นั่น); } // ตัวแปร var targethtml = ''; // จัดเก็บเนื้อหาในคอนเทนเนอร์ที่ระบุและเก็บไว้ที่ด้านล่างของร่างกายโดยค่าเริ่มต้นถ้า (that.setting.targetConater! = "" && this.setting.targetConater! = undefined) {targethtml = '<img src = " $ (that.setting.targetConater) .html (targethtml); } else {targethtml = '<img src = "' + that.setting.imgurl + '">'; targethtml = '<div id = "' + that.setting.targetid + '" style = "แสดง: ไม่มี; ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ซ้าย: 50%; ความสูง:' + that.getScreenheight () + '; width:' $ ("body"). ภาคผนวก (targethtml); } // พิจารณาว่าผู้ใช้ได้ปรับความกว้างของภาพหรือไม่ถ้า (that.setting.imgwidth! = "" && that.setting.imgwidth.indexof ("px")> 0) {$ ("#"+targetId) .css ("ความกว้าง" } // เรียกใช้ฟังก์ชั่นการเรียกกลับหลังจากแสดง IF (typeof that.setting.aftershow == "function") {that.setting.aftershow (นั่น, targetId); }} this.init ();} </script>สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปเอฟเฟกต์และเทคนิคการสลับ JavaScript", "สรุปทักษะอัลกอริธึมการค้นหา JavaScript", "สรุปผลการสรุปและเทคนิคการสรุปของ JavaScript ของ JavaScript อัลกอริทึมและเทคนิคการสำรวจ JavaScript "และ" สรุปการใช้งานทางคณิตศาสตร์ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน