#jquery #jquery-ui #google-maps
#jquery #jquery-пользовательский интерфейс #google-карты
Вопрос:
Я создаю HTML-меню и использую jQuery UI для форматирования кнопок. Я хочу создать кнопку только со значком. Все отлично работает в IE 9, Chrome и Safari на Windows 7. Это также работает для Chrome на OS X, но не Safari на OS X.
Происходит взаимодействие с картой Google, которая у меня есть на странице. Если я не создам карту, меню будет отображаться корректно с помощью кнопки только со значком. Но если я создам карту, меню исчезнет.
Сбой возникает, когда я устанавливаю для свойства buttons text значение false. Я пытался сделать это двумя способами
(1)
$("#zoomIn").button({ icons: { primary: 'ui-icon-zoomin' }, text: false });
(2)
$("#zoomIn").button({ icons: { primary: 'ui-icon-zoomin' } });
$("#zoomIn").button("option", "text", false);
Если я не установил это свойство, меню отображается правильно, но в кнопке есть текст.
HTML для кнопки является
<button id="zoomIn">xxx</button>
Я включаю следующие файлы (они с демонстрационной страницы пользовательского интерфейса jQuery)
<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>
Я попытался включить локальные копии библиотек jQuery.
Я сбит с толку этим. Надеюсь, кто-то еще столкнулся с этой проблемой и решил ее. Любая помощь очень ценится.
Комментарии:
1. Вы пробовали свой код без настройки параметра text? Работает ли это? Если это так, возможно, обходным решением было бы удалить ‘xxx’ с кнопки, но оставить параметр текста по умолчанию как true
2. @Rob. Да, я пробовал это, и это работает. Но это не идеально. Если я удалю xxx, кнопка потеряет свою высоту, и если я использую amp; nbsp; кнопка будет отображаться, но это выглядит неправильно, поскольку значок не расположен по центру кнопки. И просто для полноты картины я попробовал $ («#ZoomIn»).button («option», «text», true), и это также не удается. Таким образом, установка свойства в значение true или false вызывает проблему.
3. Согласен, на самом деле это не решение. Взгляните на классы, добавленные в ваше меню, и на его элементы с помощью .button(). Если проблема проявляется только при вызове функции рендеринга карты, это может быть столкновение классов; Стоило бы выполнить быстрый поиск в исходном коде map js
4. @Rob: Не получилось столкновения классов, но по какой-то причине стиль safari не понравился. Отлично работает без карты Google на странице. В любом случае, спасибо, что указали мне правильное направление.
Ответ №1:
Наконец-то удалось устранить проблему.
Я использую таблицу стилей пользовательского интерфейса jQuery, в которой есть стиль
.ui-button-icon-only .ui-button-text, .ui-button-icons-only
.ui-button-text { padding: .4em; text-indent: -9999999px; }
установка отступа текста в -999px; устраняет проблему.