`

BootstrapPlugin - tags 插件编写 (原创bootstrap插件)

 
阅读更多
BootstrapPlugin - tags 插件编写 (原创bootstrap插件)

1) 原创的标签输入插件,留档备份。

2) 效果图


3) html
<div class="tags-control">
	<div class="pull-left"></div>
	<input type="text" class="pull-left" />
	<div class="clearfix"></div>
</div>


4) js
$(".tags-control").tags({
	url: "ajax/get-project-list-by-project-name-content",		// ajax地址
	type: "GET",							// ajax访问类型
	parameterName: "projectIdList"					// 生成的<input type='hidden' />的name属性
});


5) 后端代码 以java为例 http响应为一个json
@ResponseBody
@RequestMapping(value = "/get-project-list-by-project-name-content", method = {RequestMethod.GET})
public String getProjectListByProjectNameContent(
		@RequestParam("term") String term //注意看参数名称,这个是固定的不可配置
		)
{

	return "[ { \"id\": \"5\", \"label\": \"巨人\", \"value\": \"巨人\" } ]";
}

json的label为下拉列表的显示文字,value一般为实体ID

:D
分享到:
评论

相关推荐

    bootstrap-tagsinput 下载,中文版,标签插件

    原版的bootstraptagsinput插件,内容太过繁杂,也不知道如何使用。里面好多冗余文件。本压缩保内的所有文件均为必须文件,采用输入框和多选框两种方式。足以应对项目应用,应用非常简单。其中重要的data-role属性,...

    BootstrapPlugin - wysihtml5 使用笔记

    在压缩包文件名称列表中的"bootstrap-wysihtml5"很可能包含了插件所需的所有资源文件,如CSS、JavaScript、图片等。解压后,将这些文件部署到你的项目目录中,按照上述方法进行配置,即可在你的网页中使用...

    BootstrapPlugin - typeahead-ex 使用笔记

    另外,由于标签中提到了“源码”,所以深入理解插件的源码也是解决这些问题的有效途径,你可以从提供的压缩包文件`bootstrap-typeahead-ex`中学习其内部实现机制。 总的来说,BootstrapPlugin - typeahead-ex 是一...

    bootstrap-3.4.1-dist.zip,bootstrap-4.6.1-dist.zip

    Bootstrap 3的核心组件包括网格系统、表单、按钮、导航、模态、图像以及各种JavaScript插件,如下拉菜单、轮播图和模态框等。这些组件都基于HTML5和CSS3,通过预定义的类名,开发者可以快速构建美观的用户界面。 ...

    BootstrapPlugin - editable 使用笔记

    然后,你可以通过CDN或者本地文件引入bootstrap-editable.js和相应的CSS文件。记得在HTML文档的`&lt;head&gt;`部分引入CSS,在`&lt;body&gt;`底部引入JavaScript。 2. **基本用法**: 编辑任何HTML元素变为可编辑,只需添加...

    bootstrap-table-editable.js+bootstrap-editable.js+bootstrap-editable.css

    压缩包里面有: 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑

    bootstrap-datepicker-1.9.0_bootstrap源码_

    在本资源中,我们关注的是`bootstrap-datepicker-1.9.0`,这是一个针对Bootstrap框架的日期选择器插件。这个插件允许用户以美观、易用的方式选择日期,常见于各种表单输入和日历应用。 Bootstrap Datepicker是基于...

    BootstrapPlugin - prettyCheckable 使用笔记

    这些文件通常可以在下载的压缩包`bootstrap-prettyCheckable`中找到。 2. **初始化插件**:通过JavaScript来初始化插件。可以使用jQuery的选择器找到所有的复选框和单选按钮,然后调用`.prettyCheckable()`方法。...

    bootstrap-table插件

    Bootstrap Table是一款广泛应用于Web开发中的开源插件,它基于Twitter Bootstrap框架,为开发者提供了一种简单、优雅的方式来展示数据,并提供了丰富的功能,如排序、筛选、分页等。这款插件设计初衷是解决传统HTML...

    bootstrap-editable

    此外,Bootstrap Editable 还可以与其他 Bootstrap 插件结合使用,比如与 Modal、Popover 等配合,创建更复杂的交互体验。例如,你可以在点击编辑按钮时弹出一个 Modal,然后在 Modal 内部使用 Bootstrap Editable ...

    bootstrap-table-fixed-columns-master.zip

    3. **JavaScript插件集成**:将bootstrap-table-fixed-columns插件引入项目,通过JavaScript代码调用插件方法,配置固定列的数量和位置。 4. **插件配置项**:学习并掌握插件提供的配置选项,例如`fixedColumns`...

    bootstrap-datetimepicker-简单好用的日历时间插件

    bootstrap-datetimepicker是一个简单好用的日历时间插件,在bootstrap首页上也有推荐。使用起来也很简单: 1,必须引入Jquery文件。 2,引入日历插件JS代码:bootstrap-datetimepicker.min.js 3,如果需要使用非英文...

    bootstrap-table实现 行拖拽 插件jquery.tablednd.js bootstrap-table-reorder-rows.js

    bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css

    BootstrapPlugin - datepicker 使用笔记

    首先,要在项目中使用bootstrap-datepicker,你需要确保已经安装了Bootstrap框架,因为它是该插件的基础。你可以通过CDN链接或者下载到本地来引入Bootstrap的CSS和JS文件。同时,别忘了引入datepicker的CSS和JS文件...

    bootstrap3-editable

    Bootstrap3-Editable是一款基于Bootstrap框架的插件,主要用于在Bootstrap表格中实现行内编辑功能。这个插件使得用户可以直接在表格的每一行中编辑数据,而无需跳转到新的页面或者打开模态框,极大地提高了用户体验...

    bootstrap-star-rating-master星级评分插件

    1. **下载插件**:从GitHub或其他资源下载`bootstrap-star-rating-master`压缩包,并解压到你的项目目录。 2. **引入CSS和JS**:在HTML文件中引入`dist/css/kv-bootstrap-star-rating.min.css`和`dist/js/kv-...

    光年后台管理系统模板基于bootstrap 4.4.1版本

    jquery-tagsinput- jquery-treegrid- moment.js- bootstrap-notify- chosen.jquery- jquery.cookie- lyear-loading- perfect-scrollbar- popper- bootstrap.wizard- fullcalendar- bootstrap-maxlength- bootstrap-...

    BootstrapPlugin - toggleButton 使用笔记

    通常,源码会包含JavaScript文件(如bootstrap-toggleButtons.js)和CSS文件(如bootstrap-toggleButtons.css),你可以根据需要进行修改和扩展。 总的来说,BootstrapPlugin的toggleButton是一个强大且灵活的工具...

    bootstrap-table-fixed-columns.js

    "bootstrap-table-fixed-columns.js" 是这个库的一个扩展插件,专门用于处理表格中的固定列问题。在网页设计中,固定列是一个常见的需求,尤其是在数据量大且列宽固定的表格中,固定列可以确保用户在滚动查看数据时...

Global site tag (gtag.js) - Google Analytics