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 数据过滤器,以防没有结果 的相关文章

  • jQuery .append 不起作用

    我想在我的表单中插入一些东西 这些东西被硬编码到插件中 我不想弄乱插件文件 所以我发现 append 我写过类似的东西 据我所知它应该有效 Chrome 中的控制台没有显示任何错误 这是有什么问题吗 由于 wordpress 安全模式 我正
  • 如何在phonegap应用程序中使用存储在localStorage中的json feed?

    这就是我正在做的 向我的网络服务器发出请求 响应采用 json 格式 使用 jquery 模板在我的应用程序中呈现回调数据 非常简单 就像魅力一样 问题是 我想在本地存储一些数据 这样我的应用程序就不必每次都从服务器获取它 3g 很慢 每笔
  • 未捕获的类型错误:无法读取未定义的属性“toLowerCase”

    我收到此错误 它源自 jquery 框架 当我尝试加载准备好的文档上的选择列表时 出现此错误 我似乎无法找到为什么会出现此错误 它适用于更改事件 但在尝试手动执行该函数时出现错误 未捕获的类型错误 无法读取未定义的属性 toLowerCas
  • 防止jsTree节点选择

    我正在使用 jsTree 插件列出文件系统中的文件夹 我需要防止用户在满足特定条件之前更改到另一个节点 下面的代码不会停止传播 我看到了一些使用其他插件的解决方案 但这是一个简单的任务 没有其他插件它一定是可能的 jstree on sel
  • JQUERY 中用于加载 JQGRID 的选项卡

    我正在使用 jqgrid 制作网格 我想在我的应用程序中创建选项卡 单击选项卡应打开一个网格 选项卡的名称应显示在页面顶部 当我单击另一个选项卡时 它应该加载另一个网格 网格应该加载在同一页面上 并且选项卡也应该始终出现在页面上 我已经创建
  • 如何获取传单标记簇中点击事件的图块?

    这是我的代码 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 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • Javascript 中的线性回归 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在网络浏览器中用 Javascript 进行最小二乘拟合 目前 用户使用 HTML 文本输入输入数
  • 如何使用JQuery和Django(ajax + HttpResponse)?

    假设我有一个 AJAX 函数 function callpage ajax method get url abc data x 3 beforeSend function success function html IF HTTPRESPO
  • 将 jQuery 版本从 1.7.1 升级到 1.11.2

    在我当前的应用程序中 我使用的是 jQuery 版本 1 7 1 现在 我计划将jQuery版本升级到1 11 2 是否有任何补丁可以提供与现有应用程序的向后可比性 Thanks 尝试这个 http blog jquery com 2013
  • 由于图形处理单元配置,不支持 Windows Phone 模拟器(Mac 上的 Windows 7)

    启动 Windows Phone 模拟器时出现错误 不支持 Windows Phone 模拟器 因为您的计算机没有所需的图形处理单元配置 如果没有图形处理单元 XNA 框架页面将无法运行 您想继续启动模拟器吗 当我尝试访问网页 任何网页 时
  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex
  • 在 iframe 中打开的网页上调用我的 jquery 函数

    我想单击一个按钮 该按钮位于基于父页面中的类选择器的 iframe 中打开的网页上 我试过这个 each classname function i el setTimeout function el trigger click 30000
  • Kony应用程序是否必须使用Kony中间件?

    我正在使用 Kony Studio 创建跨平台应用程序 我们正在准备后端和网络服务 我们可以在不访问 Kony 中间件的情况下使用相同的服务吗 如果是 您能帮忙提供一些示例代码和教程吗 我们可以在不使用中间件的情况下调用使用服务HTTP请求
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容

随机推荐

  • 使用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