ساخت یک TextList مثل یاهو

[Sirwan Afifi]

سلام دوستان به نظر شما برای ساخت این TextList چطوری باید عمل کنیم؟
80707

خودم به این شکل انجام دادم ولی هنوز کامل نیست:
کد HTML :

<ul class="tt">
<li><input type="text"/></li>
<li><input type="text"/></li>
<li><input type="text"/></li>
<li><input type="text"/></li>
<li><input type="text"/></li>
</ul>
Css :
.tt
{
border:1px solid black;
padding:0;
}
.tt li
{
list-style-type:none;
display:inline-block;
margin: 2px 3px 0 0;
padding:0;
overflow: visible;
line-height: 1.3em;

}
ul li input
{
background-color:transparent;
border:none;
height:16px;
outline:0px;
clear: none;
}
.hi
{
background-color:lightblue;
border-radius:5px;
}
Jquery :
$(document).ready(function () {
$("ul li input").keypress(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
//
$(this).addClass("hi");
//$('ul:last').append("<li><input type='text'/></li>");
var inputs = $(this).closest('form').find(':input');
inputs.eq(inputs.index(this) + 1).focus();
}
});


});

پیشنهادتون چیه؟

[tux-world]

از اینا زیاد دیدم تو نت بزارید اسکرپ بوکمو ببینم بهتون میگم

[Sirwan Afifi]

دوستان نظر خاصی ندارید؟

[ricky22]

سلام.
با کلمه ی کلیدی Tagbox یا Tag input جستجو کنید.
مثل این (http://xoxco.com/projects/code/tagsinput/).

[Sirwan Afifi]

سلام.
با کلمه ی کلیدی Tagbox یا Tag input جستجو کنید.
مثل این (http://xoxco.com/projects/code/tagsinput/).

ممنون دوست عزیز ولی من می خوام خودم بسازم بدون استفاده از پلاگین.

[ricky22]

ممنون دوست عزیز ولی من می خوام خودم بسازم بدون استفاده از پلاگین.
برای طراحی می تونید از CSS مثال های موجود الگو بگیرید.

[zootos]

این سمپل رو نگاه کن به دردت می خوره باحاله مثل چیزی هستش که می خوای البته فک کنم
81045