2011-05-11 6 views
0

htmlメニューを作成していて、jQuery UIを使用してボタンをフォーマットしています。私はアイコンのみのボタンを作成したい。 Windows 7上のIE 9、Chrome、Safariではすべて正常に動作しますが、OS XのChromeでは動作しますが、OS XではSafariでは動作しません。Mac OS X 10.5のSafariでjQuery UIのボタンのテキストをfalseに設定する

Googleマップとのやりとりがあります。マップを作成しないと、アイコンのみのボタンでメニューが正しくレンダリングされます。しかし、地図を作成するとメニューが消えます。

ボタンのtextプロパティをfalseに設定すると、エラーが発生します。私はこの2つの方法を行うことを試みた

(1)

$("#zoomIn").button({ icons: { primary: 'ui-icon-zoomin' }, text: false }); 

(2)私はメニュー表示が正しく、このプロパティを設定していけないが、ボタンのテキストがある場合

$("#zoomIn").button({ icons: { primary: 'ui-icon-zoomin' } }); 
$("#zoomIn").button("option", "text", false); 

ボタンのHTMLは私がローカルコピーを含むjQueryのライブラリを試してみました、次のファイル(これらはjQueryのUIのデモページからです)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript"></script> 
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script> 

含むよ

<button id="zoomIn">xxx</button> 

です。

私はこの1つに悩まされています。うまくいけば、誰か他の人がこの問題に遭遇し、解決したと思う。どんな助けでも大歓迎です。

+0

テキストオプションを設定せずにコードを試しましたか?それは動作しますか?もしそうなら、恐らく回避策は、ボタンから 'xxx'を削除することですが、デフォルトのテキストオプションはtrueのままにしておきます。 –

+0

@Rob。はい、私はこれを試して、それが動作します。しかしそれは理想的ではありません。 xxxを削除するとボタンの高さが失われ、 を使用するとボタンがレンダリングされますが、アイコンがボタンの中央に配置されていないので間違っています。そして、完全性のために$( "zoomIn")ボタン( "option"、 "text"、true)を試しましたが、これも失敗します。したがって、プロパティをtrueまたはfalseに設定すると問題が発生します。 – richie

+0

合意した、それは実際の解決策ではありません。あなたのメニューに追加されたクラスを見てください。それは.button()の項目です。マップレンダリング関数を呼び出すときに問題が明示されるだけであれば、クラスが衝突する可能性があります。地図のソースで素早く検索する価値があるでしょう –

答えて

0

最後に問題を追跡しました。

は、私がここで-999pxするテキストのインデントを設定するスタイル

.ui-button-icon-only .ui-button-text, .ui-button-icons-only 
.ui-button-text { padding: .4em; text-indent: -9999999px; } 

があり、jQueryのUIのスタイルシートを使用しています。問題を解決します。

関連する問題