jQuery Mobile Listview에서 버튼이 링크 모양을 갖도록 하는 것이 가능합니까?

Question

버튼과 링크가 혼합된 Listview를 만들려고 합니다.버튼이 링크와 동일하게 표시되도록 마크업에 추가/조정할 수 있는 것이 있습니까?이 단계에서는 맞춤 CSS(또는 JS!)가 아닌 마크업에서 최대한 많은 작업을 수행하려고 노력하고 있습니다.

그만큼 내가 사용하는 마크업 이다:

<ul data-role="listview" data-inset="true">
    <li><a href="#">Edit</a></li>
    <li>
        <form action="#">
            <button type="submit">Publish</button>
        </form>
    </li>
    <li>
        <form action="#">
            <button type="submit">Delete</button>
        </form>
    </li>
</ul>

내가 원하는 것은 이것이다:

_{(원천: reb4.me)}

나는 이것만 얻을 수 있는 것 같다:

_{(원천: reb4.me)}

Answer 1

이를 수행하는 방법은 다음과 같습니다.

JQM 1.4

오른쪽에 화살표 아이콘을 얻으려면 클래스를 추가하십시오. ui-btn ui-btn-icon-right ui-icon-carat-r 버튼에:

<ul data-role="listview" data-inset="true">
    <li><a href="#">Edit</a>
    </li>
    <li>
        <form action="#">
            <button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Publish</button>
        </form>
    </li>
    <li>
        <form action="#">
            <button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Delete</button>
        </form>
    </li>
</ul>

그런 다음 추가 패딩, 테두리, 그림자 등을 제거합니다.다음 CSS를 추가하세요.

.ui-li-static {
    padding: 0 !important;
}
.ui-li-static form button {
    margin: 0;
    box-shadow: none !important;
    border: 0;
    text-align: left;
}

여기에는 데모

jQM 1.3

jQM 1.3을 사용하고 있다면 조금 더 복잡해집니다.

<ul data-role="listview" data-inset="true">
    <li><a href="#">Edit</a>
    </li>
    <li>
        <form action="#">
            <button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Publish</button>
        </form>
        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow fakeLinkIcon">&nbsp;</span>
    </li>
    <li>
        <form action="#">
            <button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Delete</button>
        </form>
        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow fakeLinkIcon">&nbsp;</span>
    </li>
</ul>

.ui-li-static {
    padding: 0 !important;
}
.fakeLinkIcon {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -9px;
}
.ui-li-static form div.ui-submit{
    padding-right: 2.5em;
}
.ui-li-static form div.ui-submit {
    margin: 0;
    box-shadow: none !important;
    border: 0;
    text-align: left;
    border-radius: 0;
}
.ui-li-static form div.ui-submit .ui-btn-inner{
    padding-left: 15px;  
}
.ui-last-child form div.ui-submit {
     border-bottom-right-radius: 16px;   
     border-bottom-left-radius: 16px;   
}
.ui-first-child form div.ui-submit {
     border-top-right-radius: 16px;   
     border-top-left-radius: 16px;   
}

데모