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
分享到:
相关推荐
原版的bootstraptagsinput插件,内容太过繁杂,也不知道如何使用。里面好多冗余文件。本压缩保内的所有文件均为必须文件,采用输入框和多选框两种方式。足以应对项目应用,应用非常简单。其中重要的data-role属性,...
在压缩包文件名称列表中的"bootstrap-wysihtml5"很可能包含了插件所需的所有资源文件,如CSS、JavaScript、图片等。解压后,将这些文件部署到你的项目目录中,按照上述方法进行配置,即可在你的网页中使用...
然后,你可以通过CDN或者本地文件引入bootstrap-editable.js和相应的CSS文件。记得在HTML文档的`<head>`部分引入CSS,在`<body>`底部引入JavaScript。 2. **基本用法**: 编辑任何HTML元素变为可编辑,只需添加...
压缩包里面有: 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑
另外,由于标签中提到了“源码”,所以深入理解插件的源码也是解决这些问题的有效途径,你可以从提供的压缩包文件`bootstrap-typeahead-ex`中学习其内部实现机制。 总的来说,BootstrapPlugin - typeahead-ex 是一...
这些文件通常可以在下载的压缩包`bootstrap-prettyCheckable`中找到。 2. **初始化插件**:通过JavaScript来初始化插件。可以使用jQuery的选择器找到所有的复选框和单选按钮,然后调用`.prettyCheckable()`方法。...
在本资源中,我们关注的是`bootstrap-datepicker-1.9.0`,这是一个针对Bootstrap框架的日期选择器插件。这个插件允许用户以美观、易用的方式选择日期,常见于各种表单输入和日历应用。 Bootstrap Datepicker是基于...
Bootstrap Table是一款广泛应用于Web开发中的开源插件,它基于Twitter Bootstrap框架,为开发者提供了一种简单、优雅的方式来展示数据,并提供了丰富的功能,如排序、筛选、分页等。这款插件设计初衷是解决传统HTML...
此外,Bootstrap Editable 还可以与其他 Bootstrap 插件结合使用,比如与 Modal、Popover 等配合,创建更复杂的交互体验。例如,你可以在点击编辑按钮时弹出一个 Modal,然后在 Modal 内部使用 Bootstrap Editable ...
3. **JavaScript插件集成**:将bootstrap-table-fixed-columns插件引入项目,通过JavaScript代码调用插件方法,配置固定列的数量和位置。 4. **插件配置项**:学习并掌握插件提供的配置选项,例如`fixedColumns`...
bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
首先,要在项目中使用bootstrap-datepicker,你需要确保已经安装了Bootstrap框架,因为它是该插件的基础。你可以通过CDN链接或者下载到本地来引入Bootstrap的CSS和JS文件。同时,别忘了引入datepicker的CSS和JS文件...
bootstrap-datetimepicker是一个简单好用的日历时间插件,在bootstrap首页上也有推荐。使用起来也很简单: 1,必须引入Jquery文件。 2,引入日历插件JS代码:bootstrap-datetimepicker.min.js 3,如果需要使用非英文...
Bootstrap3-Editable是一款基于Bootstrap框架的插件,主要用于在Bootstrap表格中实现行内编辑功能。这个插件使得用户可以直接在表格的每一行中编辑数据,而无需跳转到新的页面或者打开模态框,极大地提高了用户体验...
jquery-tagsinput- jquery-treegrid- moment.js- bootstrap-notify- chosen.jquery- jquery.cookie- lyear-loading- perfect-scrollbar- popper- bootstrap.wizard- fullcalendar- bootstrap-maxlength- bootstrap-...
通常,源码会包含JavaScript文件(如bootstrap-toggleButtons.js)和CSS文件(如bootstrap-toggleButtons.css),你可以根据需要进行修改和扩展。 总的来说,BootstrapPlugin的toggleButton是一个强大且灵活的工具...
1. **下载插件**:从GitHub或其他资源下载`bootstrap-star-rating-master`压缩包,并解压到你的项目目录。 2. **引入CSS和JS**:在HTML文件中引入`dist/css/kv-bootstrap-star-rating.min.css`和`dist/js/kv-...
"bootstrap-table-fixed-columns.js" 是这个库的一个扩展插件,专门用于处理表格中的固定列问题。在网页设计中,固定列是一个常见的需求,尤其是在数据量大且列宽固定的表格中,固定列可以确保用户在滚动查看数据时...
在压缩包`bootstrap-daterangepicker`中,包含了daterangepicker插件的源码、CSS样式文件、JavaScript文件以及可能的示例文件。通过查看这些文件,你可以深入理解插件的工作原理,进行定制化开发,或者排查使用过程...