1

こんにちは、インターネットの親切な人々、

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 で何をどのように正確に変更するかについてまだ苦労していますか? 私はまた、テキストフォントでそもそも「影」を持っていることをどのように判断できるかについても困惑/不満を抱いています.... Firebugに示されているスパンCSSは次のとおりです。

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

Firebug には「テキスト シャドウ」属性が表示されません。うーん、うーん、私は何を探しますか? そして、どのツールで？「テキストの影」はどこから来ているのですか? CSS オーバーライドとは何ですか?

この時点で、オッド ボール フォントがどのように表示されるか、およびそれを修正する方法は、まだ少し謎のままです...しかし、学ぶべき重要な教訓 (禅のこと: バグを評価すること) があると確信しています。次に同じような状況に遭遇したとき。繰り返しになりますが、非常に役に立ちました...そして、これを理解することに近づいているように感じます...しかし、残念ながら、まだ十分ではありません.

4

2 に答える 2

1

あなたの例では、を使用していdata-theme="b" data-track-theme="a"ます。読みやすいフォントを取得することを削除します。ただし、そのテーマを使用したい場合は、@Jack が言及したように CSS をオーバーライドできます。詳細はこちら.

テーマのオーバーライド

テーマは確かな出発点として意図されていますが、カスタマイズすることを意図しています。すべてが CSS によって制御されるため、Web インスペクター ツールを使用して、変更するスタイル プロパティを簡単に特定できます。

実際の例も参照してください

EDIT : 外部のカスタム CSS ファイルを作成する必要はありません....これ<style>を html の先頭に追加して、CSS をオーバーライドできます。このフィドルも参照してください。 

<style>
   .ui-slider-inner-label {
     text-shadow:none;
     color:black;
     font-weight:normal;
   }
</style>
于 2012-12-14T14:32:01.787 に答える
1

ジャックとタイフンによって提供されたヒントが最も役に立ったことにもう一度注意してください...しかし、テキストシャドウを直接なしに設定し、テキストを強制的に黒にすることで、問題を修正する直接の簡単な方法を最終的に見つけました(まだ表示されていたように)白）、次に通常のフォント（太字で表示されていたように）に。そのため、何が影のテキストを引き起こしているのか正確には特定できませんでしたが、インライン手法を使用して、少なくともそれを通常のフォントにリセットすることができ、外部のカスタム 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-15T22:20:45.827 に答える