JQuery插件使用小结
在前台对数据的验证处理,Jquery起着非常强大的作用。首先Jquery是对JS的代码的封装,相当于我们前台的框架,但是它只是一个基础的js框架,能够实现一些简单的功能,而对于一些比较复杂的功能,我们拿它来实现就非常麻烦了。但是不要着急,JQeury插件可以给我们解决很多问题,而且更重要的是使用非常简单。简单总结一下,使用过的JQuery插件。
一,Jquery.treeview:
见名之意,就是将页面的数据以树的形式展现出来。和上篇博客中的dhtmlXtree不同的是,它是将html文件中的数据进行显示,而html文件主要是用UL和li进行嵌套数据。看一下html如何存储数据:
<ul id="browser" class="filetree"><li class="folder"><span class="folder">流程管理引擎系统</span><ul><li class="closed"><span class="folder">故障管理</span><ul><li><span class="file"><a href="troubleTicket/index.html" target="workareaFrame">故障单维护</a></span></li><li><span class="file"><a href="troubleTicket/approving.html" target="workareaFrame">待审故障单</a></span></li><li><span class="file"><a href="troubleTicket/approved.html" target="workareaFrame">已审故障单</a></span></li><li><span class="file"><a href="troubleTicket/archive.html" target="workareaFrame">归档故障单</a></span></li></ul></li></ul></li></ul>
页面中也如Jquery.treeview的js代码和对应的css文件,然后进行这样简单Jquery代码的操作就可以实现了:
$(document).ready(function(){$("#browser").treeview();});
这样就实现了将数据以树的形式展示了。当然如果我们需要将数据库中的动态数据用这种方法进行显示的话,我们需要在后台利用字符串进行拼接成这个格式的html文件,然后进行获取显示即可,其实和dhtmlxTree的使用方法还是非常类似的,只不过实现的方式不同。
二,Jquery.form
这个Jquery插件是为了解决Ajax获取页面数据麻烦而提供的。常规我们通过Form进行表单的提交,然后将需要提交的数据提供name的属性,就可以通过struts2等MVC流程框架进行获取,这样就不需要我们进行手动获取了。而Jquery.form正是弥补Ajax异步通讯的不足的。这里在我的前边博客中写到过JQuery中Ajax的操作
三,jquery.pagination
这个是用来辅助我们进行分
页的Jquery插件,可以提供类似于百度查询的分页信息,看这张图,感觉还是非常实用的。
看一下如何使用吧,首先还是引入相关的js代码,然后在网页中对应的位置写入显示分页信息的div块: <divid="Pagination"></div>,然后就是我们的js代码的编写了:
//在页面中生成分页栏$("#Pagination").pagination(result.totalsize, {callback:pageQuery,// 回调方法分页查询的函数,上边的result.totalsize,为总共的页数items_per_page:pageSize, // 每页显示数据条数prev_text : "上一页",next_text : "下一页",link_to : "javascript:void(0)",//提供一个可以点击的按钮current_page :pageIndex //当前页码索引});
当然这是最简单的分页信息的查询,更多的信息还是模仿插件提供的例子进行编写即可。
四,jquery.autocomplete
这个是用来根据数据库的信息进行自动补全的插件。看看百度等很多浏览器,当我们输入我们想要的查询的信息时,随着输入字符的不断增加,提示的信息也在不断的变化着,这个插件也就可以帮助我们实现这样的功能。
实现原理:是通过将输入的字符传入后台进行(前)模糊匹配查询,将查询出来的数据进行提示,然后完成自动补全功能。当然后台查询出来的数据我们需要进行一定格式的转换,可以模仿插件中的例子,这里看一下前台的js代码的处理吧:
//指定根据输入内容进行模糊查询的action路径$("#orgCode").autocomplete( "/org/loadOrgByCode.action", {cellSeparator: "|",//根据此进行拆分lineSeparator: "\n",minChars: 2,//至少输入两个字符才会进行自动匹配maxItemsToShow: 10,//一页最多显示10条数据formatItem: function(row) {//提示的格式//alert(row[0] + ", " + row[1] + "," + row[2] + ", " + row[3]);return "代码->" + row[0] + " 名称->" + row[1] + " 类型->" + row[2];},onItemSelect: function(li) {//将提示的内容补全到文本框中$("#orgName").val(li.extra[0]);$("#orgType").val(li.extra[1]);$("#orgId").val(li.extra[2]);}});
五,jquery.ui
这是一个非常强大的Jquery插件,它能够实现很多特效功能例如自动补全,就像上边的Jquery.autocomplete,tabs选项卡风格的功能,日历的功能……这里简单看一下选项卡和日历的实现。
1,选项卡,首先在页面中提供这样的html代码,
<div id="tabs"><ul><li><a href="#tabs-1">用户信息</a></li><li><a href="#tabs-2">许可信息</a></li></ul><div id="tabs-1" style="background:#FFFFFF" ></div><div id="tabs-2" style="background:#FFFFFF"></div></div>
引入相关的js代码后,在script标签编写很简单的代码就可以实现了:
$(function(){$('#tabs').tabs();});
2,日历控件的简单使用,当单机某个文本框时,弹出日历来供我们来选择,还是非常不错的:
var cfg = {"dateFormat" : "yy-mm-dd",//日期的格式changeMonth: true,changeYear: true,showSecond: true,timeFormat: 'hh:mm:ss'}$("#expireTime").datetimepicker(cfg);//设定指定的文本框单击出来日历控件
Jquery ui,这是用了几个简单的功能,就感觉非常强大,非常实用了,更多的Jquery ui的知识,可以到官网上查看各种资料,包括API文档,和一些常用例子,照猫画虎还是非常重要的:http://api.jqueryui.com/ 当然了,都是英文的,但是确实最好的资料来源。
综上为Jquery一些插件的使用,虽然不多,但是有代表性,通过使用一些插件的经验,来学会学习使用插件是最重要的。IT这个行业是个飞速发展的行业,要想在这个行业中处于不被落下的地步,需要我们不断的学习,当然了,学习能力就体现的非常重要了。总而言之,不要怕遇见新东西,新的东西来了,证明自己要提高了……………
JQuery插件使用小结相关推荐
- 学习jQuery之旅--使用炫酷的jQuery插件
前两篇文章中,介绍了jQuery中强大的Selectors (选择器)以及开发中比较常用的方法的使用.今天和大家一起体验一下jQuery另一个吸引人的地方--强大炫酷实用的jQuery插件. 做网站的 ...
- 1. 概述--从零起步实现基于Html5的WEB设计器Jquery插件
当一个软件为了达到一定的业务扩展性时(产品上线后限定范围内的用户需求无需变更代码,通过简单的配置可满足用户的要求),必然要求软件是可配置的. 笔者过去开发过很多配置型的管理软件,从可配置的表单设计(F ...
- jQuery插件thickbox在ie下垂直居中问题
jQuery 插件 thickbox 3.1 在ie下总不能垂直居中,按"http://jamazon.co.uk/web/2008/03/17/thickbox-31-ie7-positi ...
- 自己开发开源jquery插件--给jquery.treeview加上checkbox
很多时候需要把树状的数据显示除来,比如分类,中国省份.城市信息,等,因此这方面的javascript插件也有很多.比如性能优异的jquery.treeview和国人开发的功能强大的zTree. 我最近 ...
- 推荐两款简单好用的图片放大jquery插件
一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件 引入该插件的js:zoomfiy.js 或 min 引入该插件的css:zoomfiy.css 或 min 前后顺序 ...
- 动感效果的TAB选项卡 jquery 插件
动感效果的TAB选项卡 jquery 插件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- 【JQUBAR1.1】jQuery 插件发布
[JQUBAR1.1]jQuery 插件发布 JQUBAR1.1 简介 2010-11-22在博客园发布了柱状图JQUBar1.0 jQuery 插件.现将该插件升级为1.1版本. 1.1版本修复了部 ...
- 240个jquery插件
240个jquery插件 http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/ File uplo ...
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考 ...
最新文章
- BZOJ 2038: [2009国家集训队]小Z的袜子(hose) 分块
- Android FFmpeg系列——5 音视频同步播放
- oracle自定义函数获取省份,oracle 自定义函数 方法 基本例子
- wxWidgets:不使用 C++ RTTI 时的注意事项
- java 中 Object XML 互转,最终选择Xstream
- 单片机按键防抖程序_这些单片机按键设计方案,请拿好,不谢!
- jzoj4671-World Tour【图论,bfs】
- linux 下的emoji在MariaDB中的字符集修改
- 美团面试题:Java-线程池 ThreadPool 专题详解
- Tomcat配置优化(一)
- 开幕在即!众星齐聚八泉峡推介会 为山西加油,为二青助力!
- Universal Robot——在Gazebo中模拟UR5机器人
- Machine Learning系列--L0、L1、L2范数
- Mybatis的where标签,还有这么多知识点
- 云渲染技术在虚拟仿真医疗培训中的应用
- [转]项目实施过程中的风险控制
- 关于recvfrom接收超时
- 诗琳通:中泰友谊使者,曾在汶川地震时曾为汶川灾区捐款1100万
- STM32的TIM边沿与周期对齐的坑
- 中南大学网络教育计算机基础,中南大学网络教育学计算机基础复习题.doc
热门文章
- linux kaiser补丁下载,kaiser凯撒
- SM5202系列 单节锂电池充电, 引脚兼容TP4056,ME4057,TP4066
- Docker技术原理
- mysql force作用_mysql force index 用途
- HPE服务器使用SPP刷新固件方法
- sourcetree安装及使用教程
- 商务汇报类PPT模板
- php打字文本,怎么做打字效果视频 制作文字像打字那样出现并且有打字声音的视频 画面文字一个一个出...
- java日志框架之JCL和SLF4J
- 关于 2022年数学建模美赛的一些总结