2011-11-14 8 views
6

私はjQuery UI 1.8を使用していて、次のコードを持っています。どのようにjQueryのUIで大きな見ているダイアログのタイトルを避けるために?

var newDiv = $(document.createElement('div')); 
$(newDiv).html('hello there'); 
$(newDiv).attr('title','Dialog Title'); 
$(newDiv).css('font-size','62.5%'); 
$(newDiv).dialog(); 

何らかの理由でタイトルが本当に大きく見えます。例についてはthis jsFiddleを参照してください。

これをjQuery demoのバージョンのように見せる方法があれば?

答えて

10

あなたは小さいフォントサイズを適用するには、このCSSルールを使用することができますタイトルバーのスタイルを設定します。あなたはそれらのソースを表示する場合は、あなたが参照してくださいよ...

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 

私はこのスタイルシートを使用した例をごJSFiddleを更新:いずれの場合でhttp://jsfiddle.net/WwVgn/5/

、独自のスタイルを作成したい場合は、ヘッドjQuery UI themerollerのWebサイトにアクセスして、簡単にカスタマイズしてからスタイルシートをエクスポートして自分で使用することができます。

+2

は、スタイルは、 '.ui-ダイアログtitlebar'に適用されるべきではありませんか? '.ui-dialog'はダイアログ全体のフォントサイズに影響します。これはまだ誰も言及していませんが、タイトルバーを '.ui-dialog-titlebar {padding:0 0.5em!important; } ' –

+0

この回答からほぼ1年が経過しましたが、jQueryモバイルはそのサイズのフォントサイズに大きく依存しているように見えました。したがって、あなたはタイトルにのみ適用することができますが、それは不均衡な外観を引き起こす可能性があります。重要なルールをタイトルバーに適用することもできますが、再び不均衡な部分のリスクがあります。しかし、もっと重要なのは、あなたが見ることができないスタイルが使用されていないことです。個人的にそれらをすべて追いかけるのではなく、私はフォントサイズを設定することを好むでしょう。開発の1年後にはこれはすべて問題になるかもしれませんが、タイトルバーだけを変更したい場合は、コードが機能するはずです。 –

3
.ui-dialog-title { 
    font-size:14px !important; 
} 

http://jsfiddle.net/WwVgn/6/

+0

なぜ重要なbtw? –

+0

これは、その要素の他のCSS規則を無視するようにブラウザに指示します。 – AlienWebguy

+0

はい、この場合は違いはありません。 –

1

+0

自分のベースを更新しました。通常のスタイルを使用していましたが、それでも脂肪が見えています – foreyez

+0

@foreyez - 更新した例を教えてください。 (見つけられません)私の例を見ても、あなたには大丈夫ですか? – JasCav

+0

あなたの答えは残念ながら間違っていました。なぜなら、 ""私のデフォルトのCSSはそういう意味でかなり馬鹿だと思うから... .ui-dialogを使ってフォントを減らすことができます。私は彼らのCSSのダイアログがちょうどデフォルトで太っていると思う。 – foreyez

0

私はあなたが単に大規模なダイアログタイトルフォントを持つ別のテーマを使用していると思います。 で新しいものを作成してみてください。

0

ただ、CSSのこのビットを追加します。

.ui-dialog-titlebar { 
    font-size: 80%; 
} 
関連する問題