JQuery Mobile: data-icon แทนที่ ui-listview และไอคอน navbar อื่น ๆ

ฉันเป็น JQuery Mobile Noob นิดหน่อยและฉันพยายามค้นหาคำตอบสำหรับเรื่องนี้ แต่ก็ไม่มีประโยชน์ ฉันได้สร้าง ui-navbar พร้อมไอคอนข้อมูลที่กำหนดเองห้าไอคอน ปัญหาคือเมื่อฉันเลือกหนึ่งในห้าลิงก์ ปุ่มทางด้านซ้ายของลิงก์ที่เลือกจะใช้กับไอคอนที่เลือก นอกจากนี้ สิ่งที่ควรเป็นลูกศรขวาบนองค์ประกอบ ul-listview ก็ใช้กับไอคอนที่เลือกด้วยแม้ว่าจะมองเห็นได้ยากก็ตาม ต้องใช้ Firebug เพื่อขยายเพื่อดูว่าเป็นไอคอนข้อมูลที่เลือกหรือไม่

นี่คือโค้ดที่ฉันใช้สำหรับแถบนำทางในส่วนท้ายของฉัน:

<div data-role="footer">
    <div data-role="navbar" class="nav" data-grid="d">
        <ul>
            <li><a href="/th#programas" id="programas" data-icon="custom">Programas</a></li>
            <li><a href="/th#noticias" id="noticias" data-icon="custom">Noticias</a></li>
            <li><a href="/th#radio" id="radio" data-icon="custom">Radio</a></li>
            <li><a href="/th#eventos" id="eventos" data-icon="custom">Eventos</a></li>
            <li><a href="/th#more" id="more" data-icon="custom">More</a></li>
        </ul>
        </div> 
</div>

และ CSS บางส่วน:

.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon {
background-image: url(images/nav.png);
background-position: 0 0;
background-repeat: no-repeat;
}

มีความคิดใดว่าทำไมสิ่งนี้ถึงเกิดขึ้น? ฉันคิดว่ามันจะต้องเป็นสิ่งที่มีสไตล์ของฉัน


jquery-mobile
person Adam Bell    schedule 27.10.2012    source แหล่งที่มา

คำตอบ (1)


arrow_upward
1
arrow_downward

อย่าใช้ชื่อ ui-icon เท่านั้น ให้ใช้ ui-icon-something แทน โปรดดูเอกสารเกี่ยวกับ ไอคอนที่กำหนดเอง

ไอคอนที่กำหนดเอง

หากต้องการใช้ไอคอนที่กำหนดเอง ให้ระบุค่า data-icon ที่มีชื่อเฉพาะ เช่น myapp-email และปลั๊กอินของปุ่มจะสร้างคลาสโดยนำหน้า ui-icon- ให้กับค่า data-icon และนำไปใช้กับปุ่ม: ui-icon -myapp-อีเมล

จากนั้นคุณสามารถเขียนกฎ CSS ในสไตล์ชีตของคุณที่กำหนดเป้าหมายคลาส ui-icon-myapp-email เพื่อระบุแหล่งที่มาของพื้นหลังของไอคอน เพื่อรักษาความสอดคล้องกับไอคอนที่เหลือ ให้สร้างไอคอนสีขาวขนาด 18x18 พิกเซล บันทึกเป็น PNG-8 โดยมีความโปร่งใสอัลฟา

ในตัวอย่างนี้ เราเพียงชี้ไปที่รูปภาพไอคอนแบบสแตนด์อโลน แต่คุณสามารถใช้สไปรต์ไอคอนและระบุตำแหน่งแทนได้อย่างง่ายดาย เช่นเดียวกับสไปรต์ไอคอนที่เราใช้ในเฟรมเวิร์ก

.ui-icon-myapp-email {
    background-image: url("app-icon-email.png");
}

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
 <script src="jquery-1.8.0.min.js"></script>
 <script src="jquery.mobile-1.2.0.min.js"></script>

 <style>
  .ui-icon-taifun {
    background-image: url("taifun.png");
  }

  .nav .ui-btn .ui-btn-inner {
    padding-top: 40px !important;
  }

  .nav .ui-btn .ui-icon-taifun {
    width: 45px!important;
    height: 35px!important;
    margin-left: -24px !important;
    box-shadow: none!important;
    -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -webkit-border-radius: none !important;
    border-radius: none !important;
  }

  #programas .ui-icon-taifun {
    background-image: url(taifun.png);
    background-position: 0 0;
    background-repeat: no-repeat;
  }
 </style>

 <title>Test</title>
</head>

<body>
  <div data-role="page">
    <div data-role="content">
      <div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
        <h2><img src="favicon.ico"> Pets</h2>
        <ul data-role="listview">
          <li><a href="/thindex.html">Canary</a></li>
          <li><a href="/thindex.html">Cat</a></li>
          <li><a href="/thindex.html">Dog</a></li>
        </ul>
       </div><!-- /collapsible -->
       <div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
         <h2><img src="favicon.ico"> Farm animals</h2>
         <ul data-role="listview">
           <li><a href="/thindex.html">Chicken</a></li>
           <li><a href="/thindex.html">Cow</a></li>
           <li><a href="/thindex.html">Duck</a></li>
         </ul>
      </div><!-- /collapsible -->
    </div>

  <div data-role="footer">
    <div data-role="navbar" class="nav" data-grid="d">
        <ul>
            <li><a href="/th#programas" id="programas" data-icon="custom">Programas</a></li>
            <li><a href="/th#noticias" id="noticias" data-icon="custom">Noticias</a></li>
            <li><a href="/th#radio" id="radio" data-icon="custom">Radio</a></li>
            <li><a href="/th#eventos" id="eventos" data-icon="custom">Eventos</a></li>
            <li><a href="/th#more" id="more" data-icon="custom">More</a></li>
        </ul>
    </div>
  </div>

  </div>

</body>
</html>

ภาพหน้าจอ
ภาพหน้าจอ

person Taifun    schedule 28.10.2012
comment
ขอบคุณแบบนั้นได้ผล ฉันได้ขจัดปัญหาที่ลูกศรขวาไม่ปรากฏ แต่นั่นไม่ได้แก้ปัญหาทั้งหมด สำหรับผู้เริ่มต้น ฉันควรกล่าวถึงในตัวอย่างของ Taifun คุณต้องตั้งค่า data-icon= เป็นสิ่งที่คุณตั้งค่าคลาสไอคอนใหม่ ในตัวอย่างของเขา ควรเป็น data-icon=taifun อย่างไรก็ตาม ยังคงมีปัญหาอยู่เมื่อฉันคลิกเพื่อไปยังหน้าอื่นๆ ใน HTML ของฉัน ไอคอนทางด้านซ้ายของสิ่งที่เลือกจะมีลักษณะของไอคอนที่เลือก สมมติว่าฉันเลือกวิทยุ นี่คือไอคอนที่ฉันได้รับในหน้านั้น: วิทยุ วิทยุ วิทยุ กิจกรรม และอื่นๆ - person Adam Bell; 28.10.2012
comment
However, there's still an issue where when I click to go to one of the other pages in my HTML, the icons to the left of whatever is selected get the style of the icon selected. Let's say I select Radio. Here's what icons I get on that page: Radio, Radio Radio, Eventos, More. นั่นเป็นอีกปัญหาหนึ่ง คุณสามารถให้รหัสของคุณเพิ่มเติมได้ไหม? - person Taifun; 28.10.2012
comment
ไทฟัน....ขออภัยในความล่าช้า แทนที่จะโพสต์โค้ดจำนวนมากที่นี่ ตอนนี้น่าจะดีกว่าที่จะเห็นมันใช้งานจริง เข้าไปดูลิงก์สำหรับเพจนั้น และคลิกที่ปุ่มด้านล่างเพื่อ ดูสิ่งที่ฉันกำลังพูดถึง - person Adam Bell; 31.10.2012
comment
ฉันขอแนะนำให้คุณเตรียมตัวอย่างเล็กๆโดยใช้ jsfiddle.net คุณอาจต้องการเปิดคำถามอื่นสำหรับคำถามนั้นและปิดคำถามนี้ - person Taifun; 31.10.2012