JQuery Mobile: ikon data menggantikan tampilan daftar ui dan ikon bilah navigasi lainnya

Saya sedikit seorang JQuery Mobile Noob dan saya telah mencoba mencari jawaban untuk ini, tetapi tidak berhasil. Saya telah membuat ui-navbar dengan lima ikon data khusus. Masalahnya adalah ketika saya memilih salah satu dari lima tautan, tombol di sebelah kiri tautan yang dipilih mengambil ikon yang dipilih. Selain itu, apa yang seharusnya menjadi panah kanan pada elemen ul-listview, juga mengambil ikon yang dipilih meskipun sulit untuk dilihat. Harus menggunakan Firebug untuk memperluasnya untuk melihat apakah ikon data yang dipilih.

Berikut kode yang saya gunakan untuk navbar di footer saya:

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

Dan beberapa CSSnya:

.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;
}

Adakah yang tahu mengapa hal ini bisa terjadi? Menurutku, itu pasti sesuatu yang sesuai dengan gayaku.


jquery-mobile
person Adam Bell    schedule 27.10.2012    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

jangan gunakan nama ui-icon saja, melainkan gunakan ui-icon-something, lihat juga dokumen tentang ikon khusus

Ikon Khusus

Untuk menggunakan ikon khusus, tentukan nilai data-icon yang memiliki nama unik seperti myapp-email dan plugin tombol akan menghasilkan kelas dengan mengawali ui-icon- ke nilai data-icon dan menerapkannya ke tombol: ui-icon -email aplikasi saya.

Anda kemudian dapat menulis aturan CSS di stylesheet Anda yang menargetkan kelas ui-icon-myapp-email untuk menentukan sumber latar belakang ikon. Untuk menjaga konsistensi visual dengan ikon lainnya, buat ikon putih berukuran 18x18 piksel yang disimpan sebagai PNG-8 dengan transparansi alfa.

Dalam contoh ini, kami hanya menunjuk ke gambar ikon yang berdiri sendiri, namun Anda dapat dengan mudah menggunakan sprite ikon dan menentukan posisinya, sama seperti sprite ikon yang kami gunakan dalam kerangka kerja.

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

contoh

<!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="/idindex.html">Canary</a></li>
          <li><a href="/idindex.html">Cat</a></li>
          <li><a href="/idindex.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="/idindex.html">Chicken</a></li>
           <li><a href="/idindex.html">Cow</a></li>
           <li><a href="/idindex.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="/id#programas" id="programas" data-icon="custom">Programas</a></li>
            <li><a href="/id#noticias" id="noticias" data-icon="custom">Noticias</a></li>
            <li><a href="/id#radio" id="radio" data-icon="custom">Radio</a></li>
            <li><a href="/id#eventos" id="eventos" data-icon="custom">Eventos</a></li>
            <li><a href="/id#more" id="more" data-icon="custom">More</a></li>
        </ul>
    </div>
  </div>

  </div>

</body>
</html>

tangkapan layar
tangkapan layar

person Taifun    schedule 28.10.2012
comment
Terima kasih, Itu berhasil. Saya memang menghilangkan masalah panah kanan yang tidak muncul, tapi itu tidak menyelesaikan masalah sepenuhnya. Sebagai permulaan, saya harus menyebutkan dalam contoh Taifun, Anda harus mengatur data-icon= ke apa pun yang Anda atur untuk kelas ikon baru. Jadi dalam contohnya, seharusnya data-icon=taifun. Namun, masih ada masalah ketika saya mengklik untuk membuka salah satu halaman lain di HTML saya, ikon di sebelah kiri apa pun yang dipilih mendapatkan gaya ikon yang dipilih. Katakanlah saya memilih Radio. Inilah ikon yang saya dapatkan di halaman itu: Radio, Radio Radio, Eventos, Lainnya. - 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. itu masalah lain. dapatkah Anda memberikan lebih banyak kode Anda? - person Taifun; 28.10.2012
comment
Taifun....maaf atas keterlambatannya. Daripada memposting banyak kode di sini, mungkin lebih baik saat ini melihatnya beraksi. Kunjungi link untuk halaman tersebut dan klik tombol di bagian bawah untuk lihat apa yang saya bicarakan. - person Adam Bell; 31.10.2012
comment
Saya menyarankan Anda menyiapkan contoh kecil menggunakan jsfiddle.net. Anda mungkin ingin membuka pertanyaan lain untuk itu dan menutup pertanyaan ini. - person Taifun; 31.10.2012