jQuery Mobile Listview에서 버튼이 링크 모양을 갖도록 하는 것이 가능합니까?
-
20-12-2019 - |
문제
버튼과 링크가 혼합된 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)
해결책
이를 수행하는 방법은 다음과 같습니다.
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"> </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"> </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;
}
제휴하지 않습니다 StackOverflow