Glyphish Иконки отображаются в jQuery Mobile - PullRequest
1 голос
/ 05 июня 2011

Для начала позвольте мне сказать, что я новичок в jQuery, а также в jQuery Mobile.

Я использую следующий CSS в шапке.

.nav-glyphish-example .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav-glyphish-example .ui-btn .ui-icon {
width: 30px!important;
height: 30px!important;
margin-left: -15px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#feeling .ui-icon {
background:  url(content/glyphish-icons/home.png) 50% 50% no-repeat;
background-size: 22px 22px;
}
#review .ui-icon {
background:  url(content/glyphish-icons/review.png) 50% 50% no-repeat;
background-size: 22px 22px;
}
#media .ui-icon {
background:  url(content/glyphish-icons/media.png) 50% 50% no-repeat;
background-size: 18px 23px;
}
#settings .ui-icon {
background:  url(content/glyphish-icons/settings.png) 50% 50% no-repeat;
background-size: 20px 22px;
}

Я использую значки глифов в проекте jQuery Mobile, используя следующий код для панели навигации:

<div data-role="header">
    <div data-role="navbar" class="nav-glyphish-example" data-theme="e" data-grid="c">
    <ul>
    <li><a href="#feeling" id="feeling" data-icon="custom" data-iconpos="top"  data-theme="b"><small>Record</small></a></li>
    <li><a href="#media" id="media" data-icon="custom" data-iconpos="top" data-theme="b"><small>Relax</small></a></li>
    <li><a href="#review" id="review" data-icon="custom" data-iconpos="top" data-theme="b"><small>Review</small></a></li>
    <li><a href="#settings" id="settings" data-icon="custom" data-iconpos="top" data-theme="b"><small>Settings</small></a></li>
  </ul>
    </div>
 </div>

В проекте всего около 8 страниц на одной странице index.html, а некоторые страницы связаны с навигационными панелями в заголовке.

Когда я захожу на стартовую страницу, панель навигации выглядит нормально. Однако, как только я захожу на одну из страниц, связанных с панелью навигации, все значки меняются на значки для этой страницы. На некоторых из этих страниц есть кнопки в разделе содержимого, связанные с дополнительными страницами. Если я нажимаю любую из связанных кнопок в разделе содержимого, значки в панели навигации сбрасываются на правильные.

Я бы очень признателен за понимание этого. Моей первой мыслью было, что на странице необходимо обновить страницу, поскольку при щелчке по ссылке на раздел содержимого он снова отображает значок. Это звучит правильно?

Другое странное поведение заключается в том, что когда я беру CSS и помещаю его в файл, который я вызываю, ни один из значков не отображается.

1 Ответ

1 голос
/ 08 февраля 2012

Ваша проблема, вероятно, связана с использованием относительных путей в CSS.Например, правило:

background:  url(content/glyphish-icons/media.png) 50% 50% no-repeat;

будет добавлено к текущему URL в браузере, поэтому оно будет /content/glyphish-icons/media.png, когда вы находитесь на / (домашняя страница), но /mypage/content/glyphish-icons/media.png, когданаходятся на /mypage/.Используйте абсолютные пути, например:

background:  url("/content/glyphish-icons/media.png") 50% 50% no-repeat;
...