定製跨度jQuery Mobile的滑塊標籤

互聯網的

我前面加上和追加一些文字內容在jQuery Mobile的範圍滑塊的左側和右側，該工程確定標籤，但我似乎無法得到字體的行爲......字體顯示不正確，我似乎無法在範圍內設置/重置標籤字體。

這是一個測試頁面： http://www.simdock.com/amort-test/dev-scratch/amort/scratchtesting-Slider-label-font-issue.html

這裏的JavaScript代碼在滑塊的左側和右側穿上定製的滑塊標籤（最小和最大滑塊範圍值）：

$.fn.extend({ 
sliderLabels: function(left,right) { 
var $this = $(this); 
var $sliderdiv= $this.next("div.ui-slider[role='application']"); 
// 
$sliderdiv 
.prepend('<span class="ui-slider-inner-label" style="position: absolute; left:0px; top:20px;">'+left+ '</span>') 
.append('<span class="ui-slider-inner-label" style="position: absolute; right:0px; bottom:20px;">'+right+ '</span>');  
    // 
} 
}); 
// 
$('#slider-PrincipleAmnt').sliderLabels('Min: $20', 'Max: $999');

我已經嘗試了很多不同的迭代，並試圖明確設置跨度中的字體，但唉，沒有運氣。

我發現原來的代碼進行了jQuery論壇在以下鏈接： https://forum.jquery.com/topic/how-do-i-add-text-labels-below-slider

上面的鏈接也有一個的jsfiddle，和字體出來罰款...所以我只是不明白我俯瞰。 http://jsfiddle.net/cUNyr/1/

任何幫助或建議將不勝感激。

更新說明：Jack和Taifun都提供了一些非常有用的提示和想法，但是，我仍然在爲什麼改變CSS而苦苦掙扎？？我也不解/沮喪我會如何甚至能夠確定文本的字體，甚至有擺在首位「影子」 ......這裏的如螢火蟲所示的跨度CSS：

<span class="ui-slider-inner-label" style="position: absolute; left:0px; top:20px;">Min: $20</span>

Firebug中沒有顯示「文字陰影」屬性。 Soooo，嗯，我尋找什麼？並用什麼工具？「文字陰影」從哪裏來？ CSS會覆蓋什麼？

在這一點上，奇怪的字體如何出現，以及如何修復它仍然有點神祕......但我確信有一個重要的經驗教訓（禪宗的事情：珍惜你的錯誤）下一次我遇到類似的情況。再說一遍：你們一直都非常樂於助人......而且我覺得我已經接近了解決這個問題......但可惜，還沒有完成。

來源

2012-12-14 woody

我不太確定你問什麼，但如果你提到'text-shadow'，那麼你可以用一些CSS來覆蓋它。 – Jack

嗨，傑克，mucho感謝您的反饋，因爲這裏有一個學習的機會。對於我而言，使用Firebug來查看跨度後，仍然有點令人困惑，似乎沒有任何CSS只是「文字 - 陰影」？ – woody

嗨，再次傑克，泰豐指出什麼是最有幫助的，是正確的主題......我不知道滑塊主題可能會影響滑塊標籤的「文字陰影」。但是我仍然不確定其他兩點：＃1 - 究竟我會用CSS來重寫和設置字體的重寫？在Firebug中我再也看不到特定於文本的任何東西 - 陰影......並且我沒有太多的經驗創建CSS over-rides或者＃2 - 爲什麼不明確地在Javascript中創建span工作文本字體？......爲什麼單獨的CSS文件需要被創建？ – woody

在你的例子中你使用的是data-theme="b" data-track-theme="a"。刪除你得到一個可讀的字體。但是，如果您喜歡使用該主題，則可以將CSS覆蓋爲提及的@Jack，更多信息here。

重要的主題

的主題旨在爲堅實的起點，但意思是定製。由於所有內容都由CSS控制，因此使用 Web檢查器工具可以輕鬆識別要修改的樣式屬性。

也看到working example

編輯：沒有必要建立一個外部的自定義CSS文件....您可以在HTML的頭部添加此<style>重寫你的CSS，又見這fiddle

<style> 
    .ui-slider-inner-label { 
    text-shadow:none; 
    color:black; 
    font-weight:normal; 
    } 
</style>

來源

2012-12-14 14:32:01 Taifun

注意我在span中添加了下列變化，並將文字陰影設置爲空白和正常：text-shadow：none;顏色：黑色;字體重量：正常 – woody

嗨，泰夫，感謝mucho額外的反饋...另一種方式來改變CSS是添加CSS頭部分。非常高興有一個堅實的例子。說實話，在這一點上，CSS對我來說似乎有點脆弱和複雜......我有點鞭打和使用其他人的代碼示例進行黑客攻擊，沒有一個明確的理解......感嘆：我想你必須從某處開始。再次謝謝你。 – woody

再次注是最有幫助的傑克和TAIFUN提供的線索......但我也終於找到了通過直接將文本陰影設置爲無，然後強制文本變黑（仍然以白色顯示），然後變爲正常字體（如粗體顯示）來解決問題的直接簡單方法。所以，雖然我沒有確定究竟是什麼導致了陰影文本，但我確實設法至少使用內聯技術將其重置爲常規字體，並且避免了必須創建外部自定義CSS文件。

// 
    $sliderdiv 
    .prepend('<span class="ui-slider-inner-label" style="position: absolute; left:0px; top:20px; text-shadow:none; color:black; font-weight:normal">'+left+ '</span>') 
    .append('<span class="ui-slider-inner-label" style="position: absolute; right:0px; bottom:20px; text-shadow:none; color:black; font-weight:normal">'+right+ '</span>');  
    //

來源

2012-12-15 22:20:45 woody

很棒，你找到了解決方案，另請參閱我更新的答案... – Taifun

定製跨度jQuery Mobile的滑塊標籤

回答

相關問題