ความคิดเห็น: บางทีเมื่อคุณใช้ JQuery Mobile คุณมักจะเห็นการใช้บทบาทข้อมูล, ธีมข้อมูล ฯลฯ เหล่านี้เป็นแอตทริบิวต์ที่กำหนดเอง HTML5 บทความนี้ได้รวบรวมบางอย่าง เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
บางทีเมื่อคุณใช้ JQuery Mobile คุณมักจะเห็นบทบาทข้อมูล, ธีมข้อมูล ฯลฯ ตัวอย่างเช่น: รหัสต่อไปนี้สามารถบรรลุผลของส่วนหัว:
<div data-Role = "Header">
<H1> ฉันเป็นชื่อ </h1>
</div>
เรียกดูโทรศัพท์มือถือของคุณเอฟเฟกต์มีดังนี้:
เหตุใดคุณจึงสามารถบรรลุเอฟเฟกต์ของสีดำที่ด้านล่างและอยู่ตรงกลางข้อความโดยการเขียนส่วนหัวข้อมูล =
บทความนี้ให้วิธีที่ง่ายที่สุดในการใช้งานเพื่อให้ทุกคนสามารถเข้าใจการใช้งานเหล่านี้ได้อย่างชาญฉลาด
เราเขียนหน้า HTML เพื่อปรับแต่งแอตทริบิวต์ Data-CHB = ส่วนหัว เราหวังว่าสีพื้นหลังของพื้นที่ DIV ที่มีคุณลักษณะนี้เป็นสีดำข้อความเป็นสีขาวและตรงกลางจะปรากฏขึ้น DIV ที่ไม่มีแอตทริบิวต์ Data-CHB Custom จะปรากฏขึ้นในโหมดเริ่มต้น รหัส HTML มีดังนี้:
<body>
<DIV DATA-CHB = "Header">
<H1> ฉันใช้ DIV ของแอตทริบิวต์ Data-CHB Custom </h1>
</div>
<br/>
<div>
ฉันไม่ได้ใช้ Data-CHB เพื่อปรับแต่งคุณลักษณะดังนั้นฉันจะแสดงให้พวกเขาเห็นตามที่ควร
</div>
</body>
เพื่อให้ได้ผลการแสดงผลของสีพื้นหลังสีดำข้อความสีขาวและการแสดงตรงกลางเราจึงกำหนด CSS ต่อไปนี้:
<style>
.ui_header {
พื้นหลังสี: ดำ;
TEXT-ALIGN: CENTER;
สี: สีขาว;
ชายแดน: 1px Solid #000;
-
</style>
จากนั้นเราใช้วิธี JS ต่อไปนี้เพื่อเพิ่มคำจำกัดความ CSS แบบไดนามิกเมื่อโหลดหน้าเว็บและเปลี่ยนรูปแบบการแสดงผลของ DIV ด้วยแอตทริบิวต์ Data-CHB:
<script type = "text/javascript">
window.onload = function () {
var elems = document.getElementsByTagname ("div");
if (elems! = null && elems.length> 0) {
ความยาว var = elems.length;
// transfuse การควบคุม DIV ทั้งหมด
สำหรับ (var i = 0; i <length; i ++) {
var elem = elems [i];
// รับคุณสมบัติที่กำหนดเองของการควบคุม
var customattr = elem.dataset.chb;
// คุณยังสามารถรับคุณสมบัติที่กำหนดเองได้ด้วยวิธีการต่อไปนี้
// var customattr = elem.dataset ["CHB"];
// ถ้าเป็นค่าส่วนหัวที่เรากำหนดไว้ล่วงหน้านั่นหมายความว่าจำเป็นต้องดำเนินการ
if (customattr == "header") {
// เพิ่มสไตล์
elem.setAttribute ("คลาส", "ui_header");
-
-
-
-
</script>
หน้าสุดท้ายแสดงเอฟเฟกต์ต่อไปนี้:
ผู้คนมักจะเพิ่มคุณสมบัติที่กำหนดเองลงในแท็ก HTML เพื่อจัดเก็บและจัดการข้อมูล แต่ปัญหาในการทำเช่นนี้คือคุณไม่รู้ว่าสคริปต์อื่นจะรีเซ็ตคุณสมบัติที่กำหนดเองของคุณในอนาคตหรือไม่ นอกจากนี้ไวยากรณ์ HTML ของคุณไม่สอดคล้องกับข้อกำหนด HTML รวมถึงผลข้างเคียงอื่น ๆ นี่คือเหตุผลที่คุณได้เพิ่มคุณสมบัติข้อมูลที่กำหนดเองในข้อกำหนด HTML5 และคุณสามารถทำสิ่งที่มีประโยชน์มากมายด้วย
คุณสามารถอ่านข้อมูลจำเพาะโดยละเอียดของ HTML5 ได้ แต่การใช้แอตทริบิวต์ข้อมูลที่กำหนดเองนี้ง่ายมาก คุณสามารถเพิ่มแอตทริบิวต์ใด ๆ ที่เริ่มต้นด้วยข้อมูล- ไปยังแท็ก HTML แอตทริบิวต์เหล่านี้จะไม่ปรากฏบนหน้า มันจะไม่ส่งผลกระทบต่อเค้าโครงหน้าและสไตล์ของคุณ แต่สามารถอ่านได้และเขียนได้
ตัวอย่างต่อไปนี้เป็นแท็ก HTML5 ที่ถูกต้อง:
<div
data-myid = "3e4ae6c4e"> ข้อมูลที่ยอดเยี่ยมบางอย่าง </div>
แต่คุณจะอ่านข้อมูลนี้ได้อย่างไร? คุณสามารถวนซ้ำผ่านองค์ประกอบหน้าเพื่ออ่านคุณสมบัติที่คุณต้องการ แต่ jQuery มีวิธีการในตัวเพื่อจัดการคุณสมบัติเหล่านี้ ใช้เมธอด. data () ของ jQuery เพื่อเข้าถึงคุณสมบัติข้อมูลเหล่านี้-* หนึ่งในวิธีการคือ. data (obj) ซึ่งปรากฏขึ้นหลังจาก jQuery 1.4.3 เวอร์ชันและสามารถส่งคืนแอตทริบิวต์ข้อมูลที่เกี่ยวข้อง
ตัวอย่างเช่นคุณสามารถใช้วิธีการเขียนต่อไปนี้เพื่ออ่านค่าแอตทริบิวต์ข้อมูล -MyID:
var myId = jQuery ("#สุดยอด"). ข้อมูล ('myId');
console.log (myid); นอกจากนี้คุณยังสามารถใช้ไวยากรณ์ JSON ในคุณสมบัติ Data-* ตัวอย่างเช่นหากคุณเขียน HTML ต่อไปนี้:
<DIV DATA-eWesome = '{"Game": "on"}'> </div>
คุณสามารถเข้าถึงข้อมูลนี้โดยตรงผ่าน JS ผ่านค่าคีย์ของ JSON คุณจะได้รับค่าที่สอดคล้องกัน:
var gameStatus = jQuery ("#สุดยอด json"). ข้อมูล ('สุดยอด') เกม;
console.log (GameStatus); นอกจากนี้คุณยังสามารถกำหนดค่าให้กับแอตทริบิวต์ Data-* โดยตรงผ่านวิธี. DATA (คีย์, ค่า) สิ่งสำคัญที่คุณต้องใส่ใจคือคุณลักษณะข้อมูลเหล่านี้ควรเกี่ยวข้องกับองค์ประกอบที่พวกเขาอยู่และไม่ถือว่าเป็นเครื่องมือจัดเก็บข้อมูลสำหรับการจัดเก็บสิ่งใด
นักแปลเพิ่ม: แม้ว่า data-* เป็นแอตทริบิวต์ที่ปรากฏเฉพาะใน HTML5 แต่ jQuery นั้นเป็นสากลดังนั้นในหน้าไม่ใช่ HTML5 หรือเบราว์เซอร์คุณยังสามารถใช้วิธี. DATA (OBJ) เพื่อจัดการข้อมูล