花哨的 Facebook 风格文本框列表

• 下载源代码 - 4.8 KB

引言

TextboxList 是一种用户友好的控件，允许您使用单个文本框管理多个输入，而不是使用多个文本框。因此，如果您确实需要一个多输入文本框，此控件将帮助您并使您的 Web 表单对用户更清晰。

您可能在 Facebook 或 Yahoo! Mail 上见过这种控件。这里是一个简单的 TextboxList 版本。

使用代码

用户界面

首先，我将解释此控件的用户界面。div 标签、UL、LI 元素和 HTML Input 的组合创建了我们的 TextboxList。该控件包含一个 div 标签、无序列表、列表项和输入框。以下是控件的结构。

 <div class="textboxlist" id="mydivTextBox">
     <ul class="textboxlist-ul" id="myListbox"> 
    <li class="textboxlist-li textboxlist-li-editable" 
                   style="display: block;" id="liTypeHere">
           <input type="text" class="textboxlist-li-editable-input" 
              style="width: 10px;" id=" TypeHere" maxlength="35"/> 
    </li> 
     </ul> 
</div>

在一个 div 标签内，有一个 UL，UL 包含 LI，而 LI 包含一个 HTML Input。接下来是应用 CSS 到 HTML 元素。CSS 在这个 UserControl 中起着主要作用。

ul 本身是一个块级元素；但是，li 也是块级元素。围绕列表项的所有元素都是内联元素。有点无聊，对吧？ 仅仅为了几行糟糕的 HTML 就使用了所有的 CSS。这就是创建内联 CSS UL 的秘诀，请记住您希望 UL 项目成为一系列内联元素。从现在开始，我们可以根据自己的喜好设置我们的内联 UL 的样式。如果您不熟悉 CSS，我建议您访问 CSS 教程 并学习 CSS！

.textboxlist-ul
{
  overflow: hidden;
  margin: 0;
  padding: 3px 4px 0;
  border: 1px solid #999;
  padding-bottom: 3px;
}
.textboxlist-li
{
   list-style-type: none;
   float: left;
   display: block;
   padding: 0;
   margin: 0 5px 3px 0;
   cursor: default;
}

有关示例和可编辑代码，请下载文件！

客户端脚本

用户开始在输入框中键入；一旦用户在键盘上按下逗号 ','（',' 用于分隔输入文本中的列表项），将运行以下步骤：

1. 检查输入验证。
2. 根据用户输入的值动态创建列表项并应用 CSS。
3. 将输入值保存到文本框或隐藏字段。
4. 将输入框推到右侧并设置新入口点的属性。

TypeHere.keyup(function (e) {
     switch (e.keyCode) {
         case 188: // ','
            var myInputLength = TypeHere.val().length;
            var myInputText = TypeHere.val().substring(0, 
                        myInputLength - 1); // remove ','
            TypeHere.width(myInputLength * 6 + 15);
            //Check for email validation.
            //You can apply webservices for any type of validation.
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if (myInputText.length == 0) {
                TypeHere.val('');
                return false;
            }
            if(!emailReg.test(myInputText)) {
              alert('Email Is Invalid');
              TypeHere.val('');
              return false;
            }
            //Create the list item on fly and apply the css
            CreateLi(myInputText)
            //Save into Textbox or HiddenField
            var strValue = txtValues.val() + myInputText + ';';
            txtValues.val(strValue);
            //Push the textbox to the right
            TypeHere.width(myInputLength * 6 + 15);
            //Make the input width to default and set as blank
            liTypeHere.css('left', TypeHere.position().left + 
                           TypeHere.width() + 10);
            TypeHere.val('');
            TypeHere.width(10);
            break;
       }
});

一旦用户按下“,”，就会触发 CreateLi(myInputText) 函数。该函数动态创建 ListItem 元素。

 function CreateLi(strValue) {
   var strHTML = $("<li class='textboxlist-li textboxlist-li-box " + 
      "textboxlist-li-box-deletable'>" + strValue + 
      "<a href='#' class='textboxlist-li-box-deletebutton'></a></li>");
   var size = $("#myListbox > li").size();
   //If It is the first entry in the input box, the list
   //element gonna be the first item of unorderedlist. 
   if (txtValues.val().length == 0) {
      $("#myListbox").prepend(strHTML);
   }
   //If It is not the first entry in the input box, the list element
   // will be located at the last list item before the input box. 
   else {
      $("#myListbox li:nth-child(" + size + ")").before($(strHTML));
   }
}

对于删除选项，我们需要将点击事件应用于 LI 的删除图标。

//Adding a click event to a delete button.
$("a").live('click',function (e) { 
        e.preventDefault; 
        //Remove the current LI       
        $(this).parent().remove(); 
       //Remove from the textbox or hidden field ... 
       var txtValues = $("input[id$='txtValues']"); 
       var strUpdate= txtValues.val(); 
       strUpdate = strUpdate.replace($(this).parent().text() + ";",'');
       txtValues.val(strUpdate); 
});