問題而jQuery中創建自定義圖標導航欄移動

Question

以爲我找到了一個解決方案，我不得不通過此鏈接創建導航欄自定義圖標

HTML

<div data-role="page"> 
    <div data-role="content"> 
     <div data-role="footer" class="nav-glyphish-example"> 
      <div data-role="navbar" class="nav-glyphish-example" data-grid="d"> 
      <ul> 
       <li><a href="#" id="favorite" data-icon="custom">Favorite</a></li> 
       <li><a href="#" id="recent" data-icon="custom">Recent</a></li> 
       <li><a href="#" id="contacts" data-icon="custom">Contacts</a></li> 
       <li><a href="#" id="keypad" data-icon="custom">Keypad</a></li> 
       <li><a href="#" id="voicemail" data-icon="custom">Voicemail</a></li> 
      </ul> 
      </div> 
     </div> 
    </div> 
</div> 

問題DEMO：http://jsfiddle.net/vh4Ca/62/

但我仍然有問題。 我無法將border radius設置爲none，並且圖標背景較暗。

Answer 1

嘛Glyphish Icons是黑暗的顏色由設計師

• http://glyphish.com/images/demo.png

更新的主題給你多一點控制

• http://jsfiddle.net/p9fC5/2/

個按鈕選擇我的幫助

• http://jquerymobile.com/demos/1.1.0/docs/buttons/buttons-options.html

HTML與主題應用

<div data-role="page"> 
    <div data-role="content"> 
     <!-- Adding theme b --> 
     <div data-role="footer" class="nav-glyphish-example" data-theme="b"> 
      <div data-role="navbar" class="nav-glyphish-example" data-grid="d"> 
      <ul> 
       <li> 
        <!-- Adding theme a --> 
        <a href="#" id="favorite" data-icon="custom" data-theme="a">Favorite</a></li> 
       <li><a href="#" id="recent" data-icon="custom">Recent</a></li> 
       <li><a href="#" id="contacts" data-icon="custom">Contacts</a></li> 
       <li><a href="#" id="keypad" data-icon="custom">Keypad</a></li> 
       <li><a href="#" id="voicemail" data-icon="custom">Voicemail</a></li> 
      </ul> 
      </div> 
     </div> 
    </div> 
</div> ​ 

CSS是用來定位的圖標

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

.nav-glyphish-example .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; 
} 

#favorite .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png); 
    background-position: -345px -112px; 
    background-repeat: no-repeat; 
} 

#recent .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png); 
    background-position: -9px -61px; 
    background-repeat: no-repeat; 
} 

#contacts .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png); 
    background-position: -9px -540px; 
    background-repeat: no-repeat; 
} 

#keypad .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png); 
    background-position: -9px -783px; 
    background-repeat: no-repeat; 
} 

#voicemail .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png); 
    background-position: -394px -733px; 
    background-repeat: no-repeat; 
} 

​ 

Answer 2

要解決你的黑暗背景的問題，您需要在照片中打開圖標跳躍並擺脫它。與jQuery無關。

如果你不想有深色背景，你的圖標需要有透明背景。只需將啓用Alpha通道的圖標格式設置爲PNG並刪除背景。

Answer 3

這對我的作品在jQuery的導航欄：

在HTML

，添加類=「UI圖標，nodisc」到你設定的數據圖標的

<a href="link.html" data-icon="custom" id="linkid" data-iconshadow="false" class="ui-icon-nodisc">Diplay Information</a>