Как запретить jquery mobile применять закругленные углы к изображениям значков в списке вставок? - PullRequest
Новая
       10

Как запретить jquery mobile применять закругленные углы к изображениям значков в списке вставок?

3 голосов
/ 14 октября 2011

Как запретить jquery mobile применять закругленные углы к изображениям значков в списке вставок?

Я проверяю этот список страниц с флагами http://jquerymobile.com/demos/1.0rc1/docs/lists/lists-inset.html он показывает нормально, но когда я использую те же значки, они имеют круглый угол. 

<li data-theme="a" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-icon ui-corner-top">
<div class="ui-btn-inner ui-li">
    <div class="ui-btn-text">
        <a data-transition="slide" href="lists.html" class="ui-link-inherit"><img class="ui-li-icon ui-li-thumb ui-corner-tl" alt="France" src="http://www.famfamfam.com/lab/icons/silk/icons/book_addresses.png">Lists</a>
    </div>
    <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
</div>
</li>

enter image description here

enter image description here

Ответы [ 3 ]

4 голосов
/ 14 октября 2011

У jQM есть другой класс для этого:

  • щ-краеугольный нет

Live Пример:

HTML: 

<div data-role="page" class="type-home">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li>
                <a href="#"><img src="http://www.famfamfam.com/lab/icons/silk/icons/book_addresses.png" alt="lists" class="ui-li-icon">Lists (class="ui-li-icon")</a>
            </li>
            <li>
                <a href="#"><img src="http://www.famfamfam.com/lab/icons/silk/icons/book_addresses.png" alt="lists" class="ui-li-icon">Lists (class="ui-li-icon")</a>
            </li>
        </ul>

        <br />

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li>
                <a href="#"><img src="http://www.famfamfam.com/lab/icons/silk/icons/book_addresses.png" alt="lists" class="ui-li-icon ui-corner-none">Lists (class="ui-li-icon ui-corner-none")</a>
            </li>
            <li>
                <a href="#"><img src="http://www.famfamfam.com/lab/icons/silk/icons/book_addresses.png" alt="lists" class="ui-li-icon ui-corner-none">Lists (class="ui-li-icon ui-corner-none")</a>
            </li>
        </ul>

    </div>
</div>

Просмотр jQM CSS

Я вижу, это очень близко к тому, что предложил @naugtur 

.ui-corner-none {
    -moz-border-radius:     0;
    -webkit-border-radius:  0;
    border-radius:          0;
}
4 голосов
/ 14 октября 2011

Вы должны переопределить CSS, а не перебирать каждый элемент.Это не будет работать на элементе, который доставлен в DOM позже.

try 

<style>
img.ui-corner-tl{
-webkit-border-radius: 0px !important;
 -moz-border-radius: 0px !important;
 border-radius: 0px !important;
}
</style>
0 голосов
/ 14 октября 2011

Я вижу, что в вашей разметке для тега img есть "ui-corner-tl".Вы это заметили?

...