如何更改jquerymobile滑塊

我找到了，我怎麼可以改變滑塊的光暈的光暈：如何更改jquerymobile滑塊

.ui-page-theme-a .ui-btn:focus { 
box-shadow: 0 0 12px #FF0; 
}

現在我不知道我可以選擇我的ID和切換爲每一個滑塊發光。我認爲它可以工作是這樣的：

#slider1.ui-page-theme-a #slider1.ui-btn:focus { 
box-shadow: 0 0 12px #FF0; 
}

但是，這不幸的是沒有工作。我希望你明白我的問題，你能不能幫我:)

HTML：

<body> 
<div data-role="page"> 
    <div data-role="content"> 
     <ul data-role="listview"> 
      <li> 
       <input type="range" value="0" min="0" max="100" id="slider1" step="5" /> 
      </li> 
     </ul> 
    </div> 
</div>

來源

2014-03-12 TobiasW

你能顯示你的html嗎？ – EkoostikMartin

添加到問題 – TobiasW

將它應用到所有滑塊：

.ui-slider .ui-btn:focus { 
    box-shadow: 0 0 12px #FF0; 
}

DEMO

更新不評論： OP希望在頁面上各個滑塊有不同的發光顏色

JQM加上旁邊輸入一個div增強滑塊。因此，使用輸入ID的任何CSS或類都不適用於滑塊標記。在你的情況下，你有一個列表中的<LI>內的每個滑塊。所以，一個解決方法是將顏色類應用到列表項，然後創建一個包含列表項中的任何滑塊的規則：

<ul data-role="listview"> 
    <li class="glowBlue"> 
     <input type="range" value="0" min="0" max="100" id="slider1" step="5" /> 
    </li> 
    <li class="glowYellow"> 
     <input type="range" value="0" min="0" max="100" id="slider2" step="5" /> 
    </li> 
    <li class="glowRed"> 
     <input type="range" value="0" min="0" max="100" id="slider3" step="5" /> 
    </li> 
    <li class="glowGreen"> 
     <input type="range" value="0" min="0" max="100" id="slider4" step="5" /> 
    </li> 
</ul>

然後CSS將

.glowBlue .ui-slider .ui-btn:focus { 
    box-shadow: 0 0 12px #0080f0; 
} 
.glowYellow .ui-slider .ui-btn:focus { 
    box-shadow: 0 0 12px #FF0; 
} 
.glowRed .ui-slider .ui-btn:focus { 
    box-shadow: 0 0 12px #FF0000; 
} 
.glowGreen .ui-slider .ui-btn:focus { 
    box-shadow: 0 0 12px #00FF00; 
}

更新DEMO

另一種方式可能是使用jQuery來找到類似.ui-slider的最近的DIV和添加glowClass。在這種情況下，你可以添加輝光類名稱作爲輸入數據屬性：

 <ul data-role="listview"> 
      <li > 
       <input type="range" value="0" min="0" max="100" id="slider1" step="5" data-glowclass="glowBlue" /> 
      </li> 
      <li > 
       <input type="range" value="0" min="0" max="100" id="slider2" step="5" data-glowclass="glowYellow"/> 
      </li> 
      <li > 
       <input type="range" value="0" min="0" max="100" id="slider3" step="5" data-glowclass="glowRed"/> 
      </li> 
      <li > 
       <input type="range" value="0" min="0" max="100" id="slider4" step="5" data-glowclass="glowGreen"/> 
      </li> 
     </ul>

更新類：

.glowBlue .ui-btn:focus { 
    box-shadow: 0 0 12px #0080f0; 
} 
.glowYellow .ui-btn:focus { 
    box-shadow: 0 0 12px #FF0; 
} 
.glowRed .ui-btn:focus { 
    box-shadow: 0 0 12px #FF0000; 
} 
.glowGreen .ui-btn:focus { 
    box-shadow: 0 0 12px #00FF00; 
}

運行以下的javascript：

$(document).on("pagecreate", "#page1", function() { 
    $(".ui-slider-input").each(function(index){ 
     var className = $(this).data("glowclass"); 
     $(this).closest(".ui-slider").addClass(className); 
    }); 
});

DEMO

來源

2014-03-12 15:26:33 ezanker

對不起，我認爲我的問題有點誤導，我想知道如何設置第一個滑塊黃色第二個藍色等。 – TobiasW

請參閱我的更新的答案。 – ezanker

哇，非常感謝你！:) – TobiasW

如何更改jquerymobile滑塊

回答

相關問題