顺丰物流单号查询效果(可输入多个文本框)
生活随笔
收集整理的這篇文章主要介紹了
顺丰物流单号查询效果(可输入多个文本框)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
樣式:
<style type="text/css">a{background: transparent;text-decoration: none;}.form-wrap{position: relative;box-shadow: inset 0 0 10px rgba(0,0,0,0.2);border: 1px solid #e1e1e0;}.tokenfield{transition: min-height 120ms;height: auto;min-height: 87px;max-height: 200px;overflow-x: hidden;overflow-y: auto;box-shadow: none;border: none;background: none;}.tokenfield.form-control{padding: 7px;}.form-control{display: block;width: 100%;font-size: 13px;line-height: 1.42857;color: #333;vertical-align: middle;border-radius: 0;}.tokenfield .token.invalid{background: none;border: 1px solid transparent;border-radius: 0;border-bottom: 1px dotted #b94a48;}.tokenfield .token{box-sizing: border-box;display: inline-block;margin: -1px 5px 5px 0;vertical-align: top;cursor: default;padding: 0 7px;height: 24px;line-height: 24px;font-size: 13px;}.tokenfield .token .token-label{display: inline-block;overflow: hidden;text-overflow: ellipsis;font-size: 13px;color: gray;white-space: nowrap;}.tokenfield .token .close{margin-left: 0;font-size: 15px;}.close{font-family: "Hiragino Sans GB" ,simsun, "Microsoft YaHei" ,sans-serif;display: inline-block;line-height: 24px;}.close{float: right;font-weight: bold;color: #000;text-shadow: 0 1px 0 #fff;opacity: 0.2;filter: alpha(opacity=20);}.tokenfield .token-input{background: none; /*min-width: 60px;
width: 100%;
*/border: 1px solid transparent;line-height: 24px;font-size: 13px;box-shadow: none;height: 24px;padding: 0;}.tokenfield .token-input:focus{border-color: transparent;outline: 0;box-shadow: none;}.form-wrap .notice{color: #ccc;font-size: 12px;padding: 0 10px 5px;}</style>
?
<script language="javascript">$(function () { $("a.close").live("click", function () {$(this).parent().remove();return false;});$("input.token-input").keyup(function (event) {var event = window.event || event;if (event.keyCode == 13) {if ($(this).val() != "") {var strHTML = "<div class=\"token invalid\" data-value=\"" + $(this).val() + "\"><span class=\"token-label\" style=\"max-width: 251px;\">" + $(this).val() + "</span><a href=\"#\" class=\"close\" tabindex=\"-1\">×</a></div>";$(this).val("");$(this).before(strHTML);$(this).focus();}}});});</script> <div style="width: 500px"><div class="form-wrap"><div class="tokenfield form-control"><div class="token invalid" data-value="發送到發送到"><span class="token-label" style="max-width: 251px;">發送到發送到</span><a href="#" class="close"tabindex="-1">×</a></div><div class="token invalid" data-value="吃的發送到發送到發送到發送到"><span class="token-label" style="max-width: 251px;">吃的發送到發送到發送到發送到</span><a href="#" class="close" tabindex="-1">×</a></div><input type="text" class="token-input" autocomplete="off" placeholder="" id="1410764747876174-tokenfield" tabindex="0" style="min-width: 90px; width: 124px;"><div class="notice">最多可同時查詢20條運單號,請以逗號、空格或回車鍵隔開。</div></div></div></div>?
總結
以上是生活随笔為你收集整理的顺丰物流单号查询效果(可输入多个文本框)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: RHEL6入门系列之二十六,利用rpm进
- 下一篇: 两种极端情况的案例:N+1次查询和笛卡尔