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>
.
私が欲しいのはこれです:
(source: reb4.me )
私はこれを得ることができるように思われる:
href="https://i.stack.imgur.com/9jpcc.png" rel="nofollow noreferrer">
(source: 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