使用jQuery和QuickSearch、TableSorter插件来增强界面交互

在用jQuery和jTemplates插件实现客户端分页的表格展现一文中我们了解过jTempalte插件,它帮助我 们可以很轻松的通过订制模板来展现JSON数据集合,并且可以在客户端实现分页。jQuery提供了大量的 Plug-in,Quick Search允许我们通过将某个HTML元素附加给Search作为数据源来在数据源中进行动态搜 索;而Table Sorter插件则允许我们不用太多的代码就可以实现对表格的排序支持。今天我们就来看看如 何使用Quick Search和Table Sorter插件来让我们的界面具有更好的交互性。

Quick Search

通过Quick Search你可以很容易的在你的页面中提供一个动态查询的功能,虽然 这个查询只是在基于页面的某个HTML所容纳的数据作为数据源的,但这已经足够让你激动,不是吗?它确 实不用你做太多的工作,仅仅是几行Javascript代码而已。

首先你需要得到QuickSearch.js,你 可以从http://rikrikrik.com/jquery/quicksearch/#download下载得到。然后我们就来构建一个页面吧 ,复习一下上次的内容,用jQuery来调用页面内的方法并通过模板来显示数据。很简单,我们声明一个页 面方法来获取cnBlogs首页的blog列表:

[WebMethod]
  public static IEnumerable GetBlogList()
  {
     string strBlogUrl = "http://www.cnblogs.com/rss";
     XDocument doc = XDocument.Load(strBlogUrl);
    var items = from item in doc.Descendants("item")
          select new
           {
            Title = item.Element("title").Value,
             Link = item.Element("link").Value,
             Author = item.Element("author").Value,
            Published = System.DateTime.Parse(item.Element("pubDate").Value).ToShortDateString(),
             Description = item.Element("description").Value
           };
    return items;
  }

时间: 2024-10-23 15:12:39

使用jQuery和QuickSearch、TableSorter插件来增强界面交互的相关文章

推荐8款jQuery轻量级树形Tree插件_jquery

由于其拥有庞大,实用的插件库,使得jQuery变得越来越流行.今天将介绍一些最好的jQuery树形视图插件,具有扩展和可折叠的树视图.这些都是轻量级的,灵活的jQuery插件,它将一个无序列表转换为可展开和折叠的树. Treeview – Expandable and Collapsible Tree jQuery Plugin jQuery Treeview是一个轻巧和灵活的jQuery插件.它将一个无序列表转换成一个可扩展和可折叠的树,非常适合导航增强. 示例 jsTree – jQuery

基于jQuery的表格操作插件_jquery

大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式.但是我们在日常应用中仍然要用到table表格,其中最好的例子就是对照表.今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示.排序.筛选和操控.如jQuery表格排序插件.jQuery表格拖拽插件.jQuery树形表格插件.设置颜色.点击.替换等效果. 1.DataTables-强大的jQuery表格插件 DataTables是提供了大量特性的强大jQuery表格插件.例

jQuery起点教程之插件制作(7)

jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了.其他事情插件全包.我喜欢jquery的一个重要原因是发现她已经有了很多很好,很精彩的插件.写一个自己的jQuery插件是非常容易的,如果你按照下面的原则来做,可以让其他人也容易地结合使用你的插件. 为你的插件取一个名字,在这个例子里面我们叫它"foobar". 创建一个像这样的文件:jquery.[yourpluginname].j

WEBJX分享漂亮的jQuery图片切换效果插件

文章简介:10款非常时尚的 jQuery 焦点广告插件. 这篇文章向大家推荐几款非常漂亮的 jQuery图片切换效果插件.jQuery 是最流行和使用最广泛的 JavaScript框架,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,帮助 Web 开发人员更快速的实现各种精美的界面交互效果. 其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片切换效果.希望这些插件对你有所帮助,能够帮助你节省时间和精力. ZOOM –

一款比较实用齐全的jQuery表单验证插件

一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网址,数字,AJAX用户名验证以及自定义的正则等等几乎所有我们要用到的验证. 不多说,看DEMO吧:点些下载 如何使用? 第一步,当然是和使用其他jQuery插件一样,引入插件文件vanadium.js;第二步,根据你表单要使用的验证方法,在你的表单中加入对应的验证挂钩.比如你想使下面的表单为必填项:

Jquery日期选择datepicker插件用法实例分析

  本文实例讲述了Jquery日期选择datepicker插件用法.分享给大家供大家参考.具体如下: 1.首先将Jquery中的datepicker插件中的相关属性值改成中文的: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 $.datepicker.regional['zh-CN'] = { clearText: '清除', clearStatus: '清除已选日期',

jQuery弹出层插件Lightbox

  在使用discuzx中有一个Message以及Dialog方法来显示信息对话框.今天写项目的时候,需要一个信息对话框,所以就着手利用lightbox_me插件来写一个做备用. 网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下,支持完美.而在例如ie8一下的浏览器下显示不出应有的效果.例如jquery.avgrund插件在ie8下就无法显示. 本

jquery表单验证插件(jquery.validate.js)的3种使用方式

这篇文章主要介绍了jquery表单验证插件(jquery.validate.js)的3种使用方式,本文用详细的代码实例讲解jquery表单验证插件的使用,需要的朋友可以参考下     jquery 验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery 插件和 jquery 验证插件: 第一步:引入插件 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js

把jQuery的类、插件封装成seajs的模块的方法

 这篇文章主要介绍了把jQuery的类.插件封装成seajs的模块的方法,需要的朋友可以参考下 注:本文使用的seajs版本是2.1.1 一.把Jquery封装成seajs的模块    代码如下:define(function () {      //这里放置jquery代码 把你喜欢的jquery版本放进来就好了      return $.noConflict(); });     调用方法: 这样引进就可以像以前一样使用jquery    代码如下:define(function (req