jQuery Mobile 数据过滤器,以防没有结果

2024-05-22

我目前正在探索 jQuery Mobile,以开发带有订单跟踪信息的移动版仪表板。计划是使用一个包含所有订单的简单无序列表,人们可以单击他们想了解更多信息的链接。 由于此列表可能会变得相当大,因此拥有过滤功能非常好,使用 jQuery Mobile 可以轻松实现这一功能。

就像这样:

<ul data-role="listview" data-filter="true">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul>

data-filter="true"负责显示搜索栏,它实际上工作得很好。

但我唯一的问题是,当没有找到任何东西时,它只是显示任何内容,我希望有一些文字说“抱歉,没有找到订单”。

有谁知道这对于 jQuery Mobile 是否可行,或者是否必须从头开始编码?


//wait to do event binding until the page is being initialized
$(document).delegate('[data-role="page"]', 'pageinit', function () {

    //cache the list-view element for later use
    var $listview = $(this).find('[data-role="listview"]');

    //delegate event binding since the search widget is added dynamically
    //bind to the `keyup` event so we can check the value of the input after the user types
    $(this).delegate('input[data-type="search"]', 'keyup', function () {

        //check to see if there are any visible list-items that are not the `#no-results` element
        if ($listview.children(':visible').not('#no-results').length === 0) {

            //if none are found then fadeIn the `#no-results` element
            $('#no-results').fadeIn(500);
        } else {

            //if results are found then fadeOut the `#no-results` element which has no effect if it's already hidden
            $('#no-results').fadeOut(250);
        }
    });
});​

这是一个演示:http://jsfiddle.net/6Vu4r/1/ http://jsfiddle.net/6Vu4r/1/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery Mobile 数据过滤器,以防没有结果 的相关文章

  • 根据分辨率更改字体大小

    我正在开发一个网页 它的不同段落 h 等使用不同的尺寸 我在用着em sizes 字体大小 2em 举个例子 但是 当我将屏幕分辨率更改为较低的分辨率时 我希望该尺寸也较小 为此 我尝试了以下代码
  • 如果 div 为空,则删除或隐藏该 div

    我知道这应该很简单 但无法弄清楚 这是代码 div class cols lmenu item1 div div div 如果 leftmenu 为空 我只需要删除 leftMenuWrapper 这是我一直在使用的 leftmenu em
  • 如何限制选择标签中的最小字符

    我想限制 Selectize 标签输入的最少 3 个字符 是否可以 select中有什么事件吗 我有同样的问题 正如 Rory 所提到的 通过插件 其实很简单 你可以找到标签最小字长过滤的官方示例here https github com
  • 修改某个类的所有html

    我有这个 p class comment date title a c p p class comment date title b b p 我想将标题放在任何元素的 html 中 所以我尝试这样做 comment date html co
  • 使用jquery在asp.net会话中存储值

    如何使用 jquery 在会话中存储值 我正在使用以下代码 var Link 从会话中获取数据 如何进行相反的过程 Problem I need this in my master page so i cant use ajax Geeth
  • 强制一个 javascript 函数等待运行,直到第一个函数完成

    下午 我遇到了一个问题 我需要运行一个函数 然后在完成后 运行下一个函数 并对四个函数执行此操作 我已经尝试了一段时间 试图找到正确的布局语法我的函数调用但似乎找不到任何东西来解决这个特定的场景 html div div div jquer
  • javascript获取字符前的字符串

    我有一个字符串 我正在尝试提取引号之前的字符 示例是提取14 from 14 14 99 我正在使用以下代码来实现此目的 menuItem text match 0 我的问题是 如果字符串类似于 0 88 我希望返回一个空字符串 不过我还是
  • HTTP 状态 415 - JQUERY 中的 AJAX 调用不支持的媒体类型到使用 JERSEY 实现的 Restful WS

    您好 我正在尝试将 json 数据发布到使用 Jersey 实现的 Restful WS 我通过 jquery ajax 发布数据 为什么我会收到 HTTP Status 415 unsupported Media type 谢谢 单击此处
  • jQuery,如何制作同步动画?

    我的页面布局看起来像这样 image image image 当您将鼠标悬停在其中一张图像上时 我想制作一个动画以获得类似这样的效果 image hover image image or image image hover mage or
  • 在弹出警报框之前将其删除[重复]

    这个问题在这里已经有答案了 我正在尝试使用 Grease Monkey 和 jQuery 删除外部站点上的警报框 HTML p Hello world p GreaseMonkey 脚本 目前没有 jQuery 部分 UserScript
  • jQuery .append 不起作用

    我想在我的表单中插入一些东西 这些东西被硬编码到插件中 我不想弄乱插件文件 所以我发现 append 我写过类似的东西 据我所知它应该有效 Chrome 中的控制台没有显示任何错误 这是有什么问题吗 由于 wordpress 安全模式 我正
  • 使用 parsley.js 支持每个字段多个自定义错误消息

    我正在尝试使用 parsley js 验证一个简单的表单 并且我对 parsley js 非常初学者 我想使用 window ParsleyValidator addValidator 方法在一个自定义验证方法中显示多个错误消息 所以我尝试
  • 匹配数组中的对象并合并

    UPDATE 我有一个名为的对象数组cars包含 li 标签 其中包含有关汽车的属性数据 例如价格 汽车类型等 我的目标是 如果这些汽车符合某些标准 则将它们合并到一个列表中 要求 快速性能 保持相同的汽车数组结构 Main Goal Ma
  • 如何获取传单标记簇中点击事件的图块?

    这是我的代码 function onMapClick e e originalEvent defaultPrevented true var orig e originalEvent console log orig target map
  • 如何在每个组件完成加载后在 Angular 2 中运行 jquery 函数

    我已经尝试了所有生命周期挂钩 但无法实现所需的结果 我需要的结果是触发一个函数 该函数在加载每个元素 组件 后初始化用于单个页面上不同元素的许多 jquery 插件 假设你有这个结构 主页 滑块 小部件 产品旋转器 ETC 这些元素中的每一
  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • 使用 jquery 通配符检查 cookie 名称

    我有一个生成动态 cookie 的表单 例如 webform 62 1234356 62 1234356 可以是任意数字 我需要使用一些通配符检查来检查名称以 webform 开头的 cookie 是否存在 下面不起作用 if cookie
  • 使用 jQuery UI 日期选择器选择日历更改 URL

    我正在使用 jQuery UI 选择器 我想知道当有人选择日期时是否有可能 它会自动将他们重定向到 URL 如下所示 index php date 2013 10 15 这是我正在使用的插件 Date
  • 一个接一个地淡入div

    大家好 我很擅长 HTML 和 CSS 但才刚刚开始接触 jQuery 的皮毛 我希望让 3 个 div 在页面加载时逐渐淡入 到目前为止我有这个 我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人
  • Jquery 两个字段的时间差(以小时为单位)

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2

随机推荐

  • 使用Python构建caffe(找不到-lboost_python3)

    我正在尝试用 python 构建 caffe 但它一直这样说 CXX LD o python caffe caffe so python caffe caffe cpp usr bin ld cannot find lboost pytho
  • 在 C# 中赋值后如何保留有关对象的信息?

    我一直在问我的想法可能是解决方案 https stackoverflow com questions 35254467 is it possible in c sharp to get the attributes attached to
  • 无法使用键盘导航特定高度的 Angular-ui Bootstrap Typeahead

    所以 我认为这更像是一个引导程序问题 而不是 Angular ui 但我在这个问题上花了 2 个晚上 但我找不到隧道尽头的光明 这是笨蛋 http plnkr co edit n39LVjbHQzmcwGkk2dR1 p preview h
  • 数据框更新后如何刷新绘图?

    假设您已经使用以下方法构建了一个图形px line 使用数据框 数据框稍后会添加新数据 用新数据刷新数据的好方法是什么 一个例子可以是px data stocks 从列的子集开始 GOOG AAPL AMZN FB NFLX MSFT 例如
  • Laravel 5.1 date_format 验证允许两种格式

    我对传入的 POST 请求使用以下日期验证 trep txn date gt date format Y m d H i s u 这只允许这种日期 即 2012 01 21 15 59 44 8 我还想允许没有时间的日期 例如2012 01
  • SSLHandShakeException 没有适当的协议

    我最近向我的网站添加了 SSL 可以通过 https 访问它 现在 当我的 java 应用程序尝试向我的网站发出请求并使用缓冲读取器从中读取时 它会生成此堆栈跟踪 我没有使用自签名证书 该证书来自 Namecheap 它使用 COMODO
  • 尝试在后台使用 AsyncTask 解析 JSON 时强制关闭

    我是 Android 开发新手 正在研究 json 数据 我设法让解析工作 我想显示一个 ProgressDialog 我读到我需要使用 AsyncTask 但由于某种原因 一旦我将相同的工作代码放入 doInBackground 中 即使
  • IE 开发工具断点不起作用

    我正在尝试在 IE 11 中调试一些 javascript 但无法强制它在断点处停止 debugger 行工作正常 停止该行中的调试器 相同的文件没有debugger 行但在同一位置设置断点不会执行任何操作 功能正常 但调试器不会在断点处停
  • 如何禁用 Angular 2 中的复选框

    我想禁用复选框输入 我的意思是 用户无法选中复选框 有一个属性可以禁用它吗 例如 启用 或 禁用 或者我该如何解决这个问题
  • 需要使用自定义类而不是在 Web 服务中生成(通过 wsimport)

    您能帮忙解决以下问题吗 当生成 WS 客户端代码 使用 wsimport ant 任务 时 所有类都会在与 Web 服务相同的包 例如 helloservice endpoint 中自动生成 例如如果我的网络服务有方法 公共节点 getNo
  • 不幸的是应用程序已在 Android 模拟器中停止

    我是 Android 新手 正在尝试一些小应用程序 例如 Compass 当我在模拟器中运行应用程序时 它会给出消息Unfortunately Compass has Stopped 我没有编译时错误 我该如何解决这个问题 是什么原因造成的
  • golang中通道缓冲容量0和1的区别

    我已将通道缓冲区大小设置为零 例如var intChannelZero make chan int 当从intChannelZero将被阻止 直到intChannelZero有价值 另外 我将通道缓冲区大小设置为 1 例如var intCh
  • Android smoothScrollTo 不调用 onScrollStateChanged

    我在用smoothScrollBy 滚动到 a 中的特定位置ListView 我希望在以下情况时得到通知ListView完成滚动以将其与当前集成onScrollStateChanged 当用户用手指滚动时触发的事件 目前我正在使用Timer
  • DOM 中不再存在缓存元素

    就像在类似的问题中一样 我使用appium java 尝试选择元素 在移动应用程序中 我要转到页面 之后有许多元素 android widget ImageView 0 我需要选择 6 个 例如 这样的元素并执行其他步骤 Byt 只能选择一
  • 运行pyspark时没有这样的文件或目录错误

    我安装了 Spark 但是当我运行时pyspark在终端上 我得到 usr local Cellar apache spark 2 4 5 1 libexec bin pyspark line 24 Users miguel spark 2
  • 如何恢复丢失的aws服务器实例的私钥?

    我丢失了 AWS 实例的私钥 我在控制台面板中搜索了该选项 恐怕你可能不走运 当您启动实例时 您应该指定密钥的名称 您计划用于连接到实例的对 如果你不指定 启动实例时现有密钥对的名称 您 将无法连接到实例 当您连接到 例如 您必须指定与密钥
  • Mongodb 以不区分大小写的方式排序

    我在 Nodejs express 中以 mongodb 作为数据库的一个项目中非常努力地构建 当我使用 sort 获取所有数据时 它以错误的方式返回数据 那么有没有办法按照我的预期得到正确的格式 如下所示 如果我们在数据库中有三个记录 i
  • <%: 和 <%= 与嵌入代码(表达式)块相同吗

    刚开始使用 MVC 2 我注意到他们在入门模板中使用 我确信在 MVC 1 中它是 它们是一样的吗 如果是这样 为什么从等号改为冒号 冒号语法意味着您将自动进行 html 编码 http haacked com archive 2009 0
  • 在keras自定义损失中使用层输出

    我正在 Keras 中开发自定义损失函数 我需要第一层输出 我怎样才能取回它 def custom loss y true y pred cross K mean K binary crossentropy y true y pred ax
  • jQuery Mobile 数据过滤器,以防没有结果

    我目前正在探索 jQuery Mobile 以开发带有订单跟踪信息的移动版仪表板 计划是使用一个包含所有订单的简单无序列表 人们可以单击他们想了解更多信息的链接 由于此列表可能会变得相当大 因此拥有过滤功能非常好 使用 jQuery Mob