首页 > 代码库 > 顺丰物流单号查询效果(可输入多个文本框)
顺丰物流单号查询效果(可输入多个文本框)
样式:<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=http://www.mamicode.com/"" + $(this).val() + "\"><span class=\"token-label\" style=\"max-width: 251px;\">" + $(this).val() + "</span><a href=http://www.mamicode.com/"#\" 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>
顺丰物流单号查询效果(可输入多个文本框)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。