หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

juxtaposejs

[juxtaposejs] [https://juxtapose.knightlab.com] เป็นเครื่องมือที่เรียบง่ายและโอเพ่นซอร์สสำหรับการสร้างตัวเลื่อนภาพก่อน/หลัง เพียงแค่ให้ URL สองภาพและ juxtapose จะทำงานที่เหลือให้คุณ ด้านล่างนี้เป็นคำแนะนำสำหรับการใช้งาน juxtapose ด้วย HTML และ JavaScript แต่เรายังมีเครื่องมือที่ช่วยให้คุณสร้างตัวเลื่อนโดยไม่จำเป็นต้องรู้รหัสใด ๆ

หากคุณต้องการมีส่วนร่วมใน juxtapose ให้ตรวจสอบไฟล์ DEVELOPERS.md สำหรับคำแนะนำในการติดตั้ง แยกโครงการสร้างสาขาใหม่พร้อมคุณสมบัติของคุณและส่งคำขอดึง ขอบคุณสำหรับความช่วยเหลือ!

สารบัญ

  • การติดตั้ง
  • สร้างตัวเลื่อน juxtapose
    • สร้าง iframe
    • การใช้งาน HTML
    • การใช้งาน JavaScript
  • การดัดแปลงและพฤติกรรมที่กำหนดเอง
  • ข้อมูลความปลอดภัย

การติดตั้ง

วิธีที่ง่ายที่สุดในการสร้างตัวเลื่อน juxtapose คือไปที่ [https://juxtapose.knightlab.com] [1] และใช้เครื่องมือเพื่อสร้างตัวอย่างโค้ดที่ฝังได้ซึ่งคุณสามารถใช้กับเว็บไซต์ใด ๆ มีหลายวิธีในการติดตั้ง juxtapose บนเว็บไซต์ของคุณ

CDN - juxtapose มีอยู่ใน Knight Lab CDN เพียงเพิ่มรหัสนี้ลงใน <head> ของหน้า HTML ของคุณ: 

 < script src =" https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js " > </ script >
< link rel =" stylesheet " href =" https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css " >

ผู้จัดการแพ็คเกจ - Juxtapose มีให้บริการทั้งใน NPM และ Bower Package Registries คำสั่งต่อไปนี้จะบันทึก juxtapose ไปยัง package.json และ bower.json ตามลำดับ 

npm install --save juxtaposejs
bower install --save juxtapose

นอกจากนี้ยังมีแพ็คเกจดาวตก

สร้างตัวเลื่อน juxtapose

สร้าง iframe

วิธีที่ง่ายที่สุดในการสร้างตัวเลื่อน juxtapose คือไปที่ [https://juxtapose.knightlab.com] [1] และใช้เครื่องมือเพื่อสร้างตัวอย่างโค้ดที่ฝังได้ซึ่งคุณสามารถใช้กับเว็บไซต์ใด ๆ เครื่องมือใช้งานง่ายและไม่ต้องใช้ความรู้ในการเข้ารหัสใด ๆ หากคุณต้องการใช้ juxtaposejs โดยไม่ต้องใช้เครื่องกำเนิดไฟฟ้าแบบฝังให้อ่านต่อไปเพื่อเรียนรู้เกี่ยวกับวิธีการใช้งานที่แตกต่างกัน

การใช้งาน HTML

วิธีที่ง่ายที่สุดในการใช้งานตัวเลื่อนภาพคือการเพิ่มรหัสนี้ลงในมาร์กอัปของคุณ: 

 < div class =" juxtapose " >
    < img src =" https://example.com/firstimage.jpg " />
    < img src =" https://example.com/secondimage.jpg " />
</ div >
< script src =" https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js " > </ script >
< link rel =" stylesheet " href =" https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css " >

img แต่ละตัวยังสามารถใช้แอตทริบิวต์เพิ่มเติมได้เช่น: 

 < img src =" https://example.com/image.jpg " data-label =" 2009 " data-credit =" Alex Duner/Northwestern Knight Lab " />

หากภาพแต่ละภาพมีแอตทริบิวต์ data-label ตัวเลื่อนจะแสดงฉลากในแต่ละภาพ หากภาพแต่ละภาพมีแอตทริบิวต์ data-credit ที่กำหนดตัวเลื่อนจะแสดงเครดิตสำหรับแต่ละภาพ

เครื่องเลื่อนตัวเลื่อนยังสามารถใช้แอตทริบิวต์เพิ่มเติมได้เช่นกันเพื่อระบุตัวเลือกบางอย่าง: 

 < div id =" juxtapose-wrapper " class =" juxtapose " data-startingposition =" 35% " data-showlabels =" false " data-showcredits =" false " data-animate =" false " > ... </ div >

การระบุตำแหน่งเริ่มต้นด้วย data-startingposition ช่วยให้คุณมุ่งเน้นความสนใจของผู้ใช้ในส่วนของภาพที่การเปลี่ยนแปลงนั้นชัดเจนที่สุด ในการสลับการมองเห็นของฉลากและเครดิตตามลำดับให้ตั้ง data-showlabels และ data-showcredits เป็นเท็จ และเพื่อปิดการใช้งานภาพเคลื่อนไหวให้ตั้ง data-animate เป็นเท็จ

หากคุณใช้ juxtapose ในโซลูชัน iframe ที่ตอบสนองที่มีอยู่เช่น pym.js และไม่ต้องการใช้ juxtapose ในตัว (แต่ไม่แสดงความคิดเห็นที่ล้มเหลว) โซลูชันการตอบสนองของ IFRAME คุณสามารถตั้ง data-makeresponsive เท็จได้

การใช้งาน JavaScript

คลาส JXSlider ใช้เวลาสามข้อโต้แย้ง อันดับแรกคือสตริงของ ID ขององค์ประกอบที่คุณต้องการเปลี่ยนเป็นแถบเลื่อน ประการที่สองคืออาร์เรย์ของสองวัตถุ แต่ละวัตถุ จะต้อง มีการกำหนด src และสามารถกำหนด label และ credit ได้ อาร์กิวเมนต์ที่สามให้คุณตั้งค่าตัวเลือกเพิ่มเติมสำหรับตัวเลื่อนภาพ 

 < div id = "foo" > < / div >
< script >
slider = new juxtapose . JXSlider ( '#foo' ,
    [
        {
            src : 'https://example.com/firstimage.jpg' ,
            label : '2009' ,
            credit : 'Image Credit'
        } ,
        {
            src : 'https://example.com/secondimage.jpg' ,
            label : '2014' ,
            credit : "Image Credit"
        }
    ] ,
    {
        animate : true ,
        showLabels : true ,
        showCredits : true ,
        startingPosition : "50%" ,
        makeResponsive : true
    } ) ;
< / script >

การดัดแปลงและพฤติกรรมที่กำหนดเอง

CSS

คุณสามารถปรับแต่งวิธีการที่ juxtaposejs ดูโดยการปรับเปลี่ยน CSS สำหรับคำแนะนำคลิกที่นี่

จาวาสคริปต์

คลาส JxSlider มีวิธีการสองสามวิธีที่คุณสามารถใช้เพื่อปรับเปลี่ยนแถบเลื่อนของคุณ

หากคุณสร้างอินสแตนซ์สไลเดอร์ของคุณด้วยวิธี HTML แต่ยังต้องการเข้าถึงหนึ่งในสไลเดอร์ของคุณโดยทางโปรแกรม juxtaposejs สร้างอาร์เรย์ของ jxsliders บนหน้าเว็บของคุณที่คุณสามารถเข้าถึงได้ด้วย juxtapose.sliders 

 JXSlider . updateSlider ( percentage , animate ) ;

เปอร์เซ็นต์ ระบุตำแหน่งที่คุณต้องการตั้งค่าที่จับเทียบกับด้านซ้ายของตัวเลื่อน หากคุณตั้ง ค่า ให้เป็น true มือจับจะเคลื่อนไหวไปยังตำแหน่งใหม่ หากตั้งค่า animate เป็น false การจัดการจะไม่

ข้อมูลความปลอดภัย

เป็นส่วนหนึ่งของการแสดงผลอินสแตนซ์ juxtapose ห้องสมุดนี้ทำให้ "เครดิต" เป็น HTML Juxtapose ผ่านสตริงนี้โดยตรงจากแอตทริบิวต์ data-credit หรือจากคุณสมบัติ credit ของวัตถุการกำหนดค่าสำหรับภาพทั้งสอง

ในแง่ที่เข้มงวดที่สุดสิ่งนี้ทำให้เกิดช่องโหว่ของ XSS อย่างไรก็ตามเราเชื่อว่า juxtaposejs มีอยู่เป็นเครื่องมือในชุดเครื่องมือมันมีความรับผิดชอบและเหมาะสมที่สุดที่จะปล่อยให้ HTML sanitizing เป็นความรับผิดชอบของผู้รวมระบบซึ่งอาจมีความคิดของตัวเองเกี่ยวกับสิ่งที่เหมาะสม ดังนั้นโปรดทราบ: หากคุณให้บริการที่ช่วยให้ผู้คนสร้างอินสแตนซ์ juxtapose คุณควรรับผิดชอบที่เหมาะสมในการป้องกันการฉีดรหัสที่เป็นอันตราย

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด