Tag It 一款 Jquery控件,当你在文本框中输入逗号时,自动帮你分隔开相关内容

Demo地址:http://webspirited.com/tagit/

使用方法:

除了JQuery脚本外,下面的脚本也是必须的,这些脚本你都可以去GitHub下载:https://github.com/hailwood/jQuery-Tagit

<link href="~/Content/jquery.tagit.css" rel="stylesheet" />
<link href="~/Content/tagit.ui-zendesk.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui.min.js"></script>
<script src="~/Scripts/tag-it.min.js"></script>

HTML中,你的文本框替换成:<ul id="myTags"></ul>

然后加入一段Js:

    $(document).ready(function () {
        //输入逗号自动分割的控件,Demo:http://webspirited.com/tagit/
        $("#myTags").tagit({
            allowSpaces: true,
            singleField: true,//必须要加这个,不然会把Tag当作一个List给提交过去。
            fieldName: ‘DailyEvaluateValues‘//这个是只你的字段名称,提交表单时会用这个name
        });
    });

使用就是这么简单!效果如下:

就是这么爽,快来试试吧~~~~

时间: 2024-10-13 01:34:58

Tag It 一款 Jquery控件,当你在文本框中输入逗号时,自动帮你分隔开相关内容的相关文章

iOS_book 02 - 基本交互(约束、视图控制器、基本控件:按钮、文本框、分段控件、开关、标签、图像控件)

实现基本交互 MVC模式 Cocoa Touch 设计者们采用MVC(Model-View-Controller, 模型 - 视图 - 控制器)模式作为指导原则. MVC 模式把代码功能划分为3个不同的类别. 模型: 保存应用程序数据的类. 视图:包括窗口.控件以及其他一些用户可以看到并能与之交互的元素. 控制器:把模型和视图绑定在一起的代码,包括处理用户输入的应用程序逻辑. MVC的目标最大限度地分离这三类代码.MVC可以帮助确保代码的最大可重用性. 控制器组件通常有应用程序的具体类组成.控制

PrimeFace JSF中使用ajax控件无法实时更新文本框inputTextarea内容

PrimeFace+JSF实际工作需要点击一个树将关联的文本添加到inputTextarea文本框,inputTextarea允许用户随意更改,ajax绑定树的select事件,但点击时,后台Bean对象无法实时获取前台文本框改变的实际内容. 原因估计ajax控件无法将前台文本框数据关联到后台. 解决方案: 添加一个按钮和文本框鼠标事件,事件JS调用按钮click事件,由按钮将文件夹数据同步到后台. 前台代码: <script> function callButton(){ document.

Chapter 2. ASP.NET 标准控件(标签、文本框、按钮)

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> body { margin:0px; p

Android控件之TextView(显示文本框控件)

一.TextView控件的常用属性 android:id——控件的id   android:layout_width——控件的宽度  android:layout_height——控件的高度 android:text——文本内容 android:textSize——文本大小 android:textColor——文本颜色 android:background——控件背景  android:singleLine——是否单行显示(true为单行,false(默认)自动换行) android:text

android控件之TextView(显示文本框控件)和EditText(输入文本框控件)

一.TextView(显示文本框控件) 1.TextView控件的常用属性 android:id——控件的id   android:layout_width——控件的宽度  android:layout_height——控件的高度 android:text——文本内容 android:textSize——文本大小 android:textColor——文本颜色 android:background——控件背景 <TextView android:id="@+id/name" an

Webform之FileUpload(上传按钮控件)简单介绍及下载、上传文件时图片预览

1.FileUpload上传控件:(原文:http://www.cnblogs.com/hide0511/archive/2006/09/24/513201.html) FileUpload 控件显示一个文本框控件和一个浏览按钮,使用户可以选择客户端上的文件并将它上载到 Web 服务器.用户通过在控件的文本框中输入本地计算机上文件的完整路径(例如,C:\MyFiles\TestFile.txt)来指定要上载的文件.用户也可以通过单击“浏览”按钮,然后在“选择文件”对话框中定位文件来选择文件.  

jQuery控件简易日历表格

jQuery控件简易日历表格代码,jquery表格,jquery插件 ,jquery,日期,时间,日历表格,表格代码,jQuery控件简易日历表格代码是一款较为简单的显示日历的代码,兼容firefox,chrome,ie. 下载地址:http://www.huiyi8.com/sc/6362.html(转载请注明此处)

jQuery控件有所感悟

两种写法对比: 第一种: ;(function($){ $.fn.myplugin = function(op,params){ if (typeof op == 'string'){ return $.fn.myplugin.methods[op](this,params); } //默认参数 var settings = { "text" : "hehe", "color" : "red" } settings = $.e

Jquery控件superfish

<!DOCTYPE html> <html> <head> <title>index.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page&quo