基于jquery的自动完成插件jquery.autocomplete
基于jquery的自动完成插件jquery.autocomplete
项目需要一个自动完成功能的text，要求实时从服务端获取符合条件的数据。
想到jquery貌似有类似功能的插件：
1.需要下面几个文件：jquery-1.3.
2.js，jquery.autocomplete.js，jquery.autocomplete.css。
2.功能要求：随着输入的内容不同不断匹配符合条件的数据项，这就要求动态获取参数。而jquery传递参数可以用：
extraParams: {area:function(){return $('#id').val();}}
不过经过使用发现，这样不能动态获取参数，所以修改了一下jquery.autocomplete.js的源码为其添加了一个onBegin属性：
(1) 为$.Autocompleter.defaults添加一个属性：onBegin: null,大约在400行；
(2)调用方法:
$("#id").autocomplete(url,{
mustMatch :false,//是否完全匹配
width :220,//宽度
max :10,//最大显示行数
onBegin :function(options){
var va = $("#id").val();
if(va && va !="")
options.extraParams.va = va;
return options;
},
parse :function(data){
var par = eval(data);
var re = [];
if(par !=null&& par !='undfined'){
for(var i =0; i < par.length; i++){
re[i] ={
data : par[i],
value : par[i],
result : par[i]
};//data是数据项，value是值，result是显示项，例如如果数据项为A，那value可以是A.id,result是A.text。
}
return re;
}else{
return [];
}
},
formatItem :function(item){
return item;
}
});
$("#id").autocomplete(url,{
mustMatch :false,//是否完全匹配
width :220,//宽度
max :10,//最大显示行数
onBegin :function(options){
var va = $("#id").val();
if(va && va !="")
options.extraParams.va = va;
return options;
},
parse :function(data){
var par = eval(data);
var re = [];
if(par !=null&& par !='undfined'){
for(var i =0; i < par.length; i++){
re[i] ={
data : par[i],
value : par[i],
result : par[i]
};//data是数据项，value是值，result是显示项，例如如果数据项为A，那value可以是A.id,result是A.text。
}
return re;
}else{
return [];
}
},
formatItem :function(item){
return item;
}
});
(3)后台方法:
public void ajaxQuery(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) throws Exception {
String va= request.getParameter("va");
//长度超过5位开始查询
if (va!= null && va.length() >= 5) {
response.setContentType("text/html; charset=GBK");
PrintWriter out = response.getWriter();
List list = queryService.ajaxQuery(va);
String retValue = "[";
for (int i = 0; i < list.size(); i++) {
retValue += retValue.length() > 1 ? ",'"
+ list.get(i) + "'": "'"+ list.get(i) + "'";
}
if (retValue.length() > 1) {
out.print(retValue + "]");
}
out.flush();
out.close();
}
}
public void ajaxQuery(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) throws Exception {
String va= request.getParameter("va");
//长度超过5位开始查询
if (va!= null && va.length() >= 5) {
response.setContentType("text/html; charset=GBK");
PrintWriter out = response.getWriter();
List list = queryService.ajaxQuery(va);
String retValue = "[";
for (int i = 0; i < list.size(); i++) {
retValue += retValue.length() > 1 ? ",'"
+ list.get(i) + "'": "'" + list.get(i) + "'";
}
if (retValue.length() > 1) {
out.print(retValue + "]");
}
out.flush();
out.close();
}
}
jQuery打印插件PrintArea实现jQuery打印插件PrintArea实现
实现javascript打印功能，打印整个页面就很简单，但如果指定打印某一个区域就有点难点，这里有一个jQuery插件PrintArea可实现打印页面某区域功能。 使用说明 需要使用jQuery库文件和PrintArea库文件 使用方法 一，包含文件部分 1. 2. 二，html部分 1.
2.jQuery插件库
https://www.wendangku.net/doc/2c2317045.html, web前端培训教程：jQuery插件库 插件(Plugin)也成为jQuery 扩展(Extension)，是一种遵循一定规范的应用程序接口编写出来的程序。目前jQuery 插件已超过几千种，由来自世界各地的开发者共同编写、验证和完善。而对于jQuery 开发者而言，直接使用这些插件将快速稳定架构系统，节约项目成本。 一．插件概述 插件是以jQuery 的核心代码为基础，编写出复合一定规范的应用程序。也就是说，插件也是jQuery 代码，通过js 文件引入的方式植入即可。 插件的种类很多，主要大致可以分为：UI 类、表单及验证类、输入类、特效类、Ajax 类、滑动类、图形图像类、导航类、综合工具类、动画类等等。 引入插件是需要一定步骤的，基本如下： 1.必须先引入jquery.js 文件，而且在所有插件之前引入； 2.引入插件；
https://www.wendangku.net/doc/2c2317045.html, 3.引入插件的周边，比如皮肤、中文包等。 二．验证插件 Validate.js 是jQuery 比较优秀的表单验证插件之一。这个插件有两个js 文件，一个是主文件，一个是中文包文件。使用的时候，可以使用min 版本；在这里，为了教学，我们未压缩版本。 验证插件包含的两个文件分别为：jquery.validate.js 和 jquery.validate.messages_zh.js。 //HTML 内容
//jQuery 代码 $(function () {jQuery 插件开发详解
JavaScript jQuery 插件开发 jQuery 插件开发其实很简单 jQuery已经被广泛使用，凭借其简洁的API，对DOM强大的操控性，易扩展性越来越受到web开发人员的喜爱，我在社区也发布了很多的jQuery插件 经常有人询问一些技巧，因此干脆写这么一篇文章给各位jQuery爱好者，算是抛砖引玉吧。 【基础】 a)样式 很多人会认为样式是个很复杂的东西，需要沉着冷静的心态加上非凡的审美观才能设计出赏心悦目的UI，抛开图片设计不说，其实css也就是那么些属性：position,margin,paddi ng,width,height,left,top,float,border,background... UI设计的漂亮与否在很大程度上依赖于设计人员对配色的把握和整体效果的协调。举个简单的例子，一个简单的页面，马虎的人： 复制代码代码如下:
细心的人： 复制代码代码如下:
JQUERY插件JQGRID常用属性说明
希望这个帮助文档能对jQuery插件的学习有所帮助 jqGrid包说明: jquery.js is the jQuery library, jquery.jqGrid.js主单元，包含的功能取决您的选择 grid.basic.js主插件其他插件包依赖于该插件正常运行 grid.custom.js Grid高级插件功能包 grid.formedit.js用于表格编辑、增加、删除功能 grid.inlinedit.js线条编辑 grid.subgrid.js一个处理表格的插件 grid.postext.js一个可以用来操作post数据的包 jqModal.js模态对话框的编辑 jqDnR.js可拖拉的表格编辑 themes包含gird需要的样式表 一、功能描述： jqGrid包主要用于将需要展示的数据动态的展示在页面的上，即动态画出表格，并封装了增、删、改、查、分类显示、在线编辑修改等功能。 二、关键使用说明： 1、导入jqGrid包，在首页属性里面添加如下包的信息 注：由于加载js包会耗费大量资源，建议动态加载这些js包，优化页面初始化效率。 2、在页面上需要添加表格的地方，增加