هل من الممكن أن تأخذ الأزرار مظهر الروابط في 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

هنا طريقة للقيام بذلك.

جي كيو إم 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;
}

هنا أ تجريبي

جي كيو إم 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;   
}

تجريبي