Jquery Mobile 1.3 style CSS personnalisé

J'essaye de styler une page en jquery en utilisant CSS mais cela ne semble pas fonctionner. Actuellement j'utilise jquery 1.3.0 css mais je suis incapable d'aligner mon #navgroup au centre du pied de page et je suis également incapable de retirer le compteur supplémentaire en blanc du curseur. Mon code est ci-dessous:Jquery Mobile 1.3 style CSS personnalisé

<!doctype html> 
<html lang="en"> 
<head> 
    <title>Player</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
     <style> 

    #navgroup {text-align:center;} 
    #navgroup div {display:inline-block;} 

     .containing-element .ui-slider-switch 
    { 
     width: 100%; 
    } 

    input.ui-slider-input {display: none;} 

    .slider-shit .ui-btn 
    { 
     margin-left: -15px; 
     margin-top: -15px; 
    } 

    .slider-shit .ui-slider 
    { 
     width: 100%; 
     top: 3px; 
     margin: 0; 
     opacity: 1; 
    } 

    .slider-shit 
    { 
     padding: 0 20px; 
    } 
    </style> 
</head> 
<body> 
    <!--Player for indivdual and playlist songs--> 
    <div data-role="page" data-add-back-btn="true" id="player"> 
     <div data-role="header" data-position="fixed"> 
      <h1 id="songName">Nothing Playing...</h1> 
      <a href="#" id="favourite" data-role="button" data-icon="star" data-iconpos="notext" class="ui-btn-right">mark as favourite</a> 
     </div> 
     <div data-role="content" style="height: 100%;" id="songPicture"> 
     </div> 
     <div data-role="footer" data-position="fixed"> 
      <table style="margin-left: 5px; margin-right: 5px;"> 
       <tr> 
        <td><p id="songCurrentpos">0:00</p></td> 
        <td width="100%" class="slider-shit"><input type="range" name="slider" id="posSlider" value="0" min="0" max="100" width="100%" data-theme="d" data-highlight="true"/></td> 
        <td><p id="songDuration">0:00</p></td> 
       </tr> 
      </table> 
      <div id="navgroup"> 
       <div data-role="controlgroup" data-type="horizontal"> 
        <a data-role="button" data-iconpos="top" data-icon="back" id="previousSong" data-inline="true">Previous</a> 
        <a data-role="button" data-iconpos="top" data-icon="arrow-r" id="playSong" data-inline="true">Play</a> 
        <a data-role="button" data-iconpos="top" data-icon="forward" id="nextSong" data-inline="true">Next</a> 
        <a href="#songOptionsPage" id="songOptionsButton" data-role="button" data-iconpos="top" data-icon="gear" data-iconpos="notext" data-rel="dialog" data-inline="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

Source

2013-03-28 Kern Elliott

Cela devrait le faire.

Exemple de travail: http://jsfiddle.net/Gajotres/YKY3y/

#navgroup {text-align:center;} 
#navgroup div {display:inline-block;} 

    .containing-element .ui-slider-switch 
{ 
    width: 100%; 
} 

input.ui-slider-input {display: none;} 

.slider-shit .ui-btn 
{ 
    margin-left: -15px; 
    margin-top: -15px; 
} 

.slider-shit .ui-slider 
{ 
    width: 100%; 
    top: 3px; 
    margin: 0; 
    opacity: 1; 
} 

.slider-shit 
{ 
    padding: 0 20px 0 0; 
} 

.ui-slider div { 
    margin: 0 15px 0 38px !important; 
} 

.ui-slider div div { 
    margin: 0 !important; 
} 

#posSlider { 
    display: none;   
}

Source

2013-03-28 12:55:42 Gajotres

cela donne d'excellents résultats si je veux passer le dernier bouton du groupe sur le groupe de contrôle et à l'extrême droite comment cela peut être fait. Aussi pour obtenir les boutons réels de plus grande taille, je voudrais que cela se produise aussi. –

http://jsfiddle.net/Gajotres/YKY3y/ – Gajotres

Jquery Mobile 1.3 style CSS personnalisé

Répondre

Questions connexes