citypicker添加 操作按鈕酝惧,以清除為例
<div class="weui-cells weui-cells_form m-form">
<div class="form-item">
<div class="weui-cell">
<div class="weui-cell__hd">
<label class="weui-label"><span class="u-star">*</span>旅居史(返<br /> 靖前14天)</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input j-address fromCity" type="text" placeholder="請(qǐng)選擇" id="history1" />
</div>
</div>
</div>
通過(guò)toolbarTemplate 自定義工具欄操作按鈕
$("#history1").cityPicker({
title: "地址選擇",
value: his1.join(" "),
toolbarTemplate: '<div class="toolbar">' +
'<div class="toolbar-inner">' +
'<a href="javascript:;" class="picker-button close-picker">完成</a>' +
'<h1 class="title">地址選擇</h1>' +
'<a href="javascript:;" class="clear-button clear-button1 close-picker">清除</a>' +
'</div>' +
'</div>',
onChange: function (e) {
// history1 = e.displayValue.join("-");
}
});
//清除輸入框內(nèi)容
$("body").on("click", ".clear-button1", function () {
$("#history1").val("");
});
自定義按鈕css樣式:
.toolbar .toolbar-inner .clear-button {
position: absolute;
left: 0;
box-sizing: border-box;
height: 2.2rem;
line-height: 2.2rem;
color: #0093FD;
z-index: 1;
padding: 0 .5rem;
}
效果如下:
calendar操作按鈕自定義.png