个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我刚刚发现，如何改变 slider 拇指的发光:
.ui-page-theme-a .ui-btn:focus {
box-shadow: 0 0 12px #FF0;
}
现在我不知道如何选择我的 ID 并为每个 slider 切换发光。我认为它可以像这样工作:
#slider1.ui-page-theme-a #slider1.ui-btn:focus {
box-shadow: 0 0 12px #FF0;
}
但不幸的是，这不起作用。我希望你能理解我的问题并能帮助我 :)
HTML:
<body>
<div data-role="page">
<div data-role="content">
<ul data-role="listview">
<li>
<input type="range" value="0" min="0" max="100" id="slider1" step="5" />
</li>
</ul>
</div>
</div>
最佳答案
将其应用于所有 slider :
.ui-slider .ui-btn:focus {
box-shadow: 0 0 12px #FF0;
}
评论更新:OP 希望页面上的各个 slider 具有不同的发光颜色
jQM 通过在输入旁边添加一个 div 来增强 slider 。因此，任何使用输入 id 的 CSS 或类都不会应用于 slider 标记。在您的情况下，每个 slider 都在 <LI> 中。在列表中。因此，一种解决方法是将颜色类应用于列表项，然后为列表项中包含的任何 slider 创建规则:
<ul data-role="listview">
<li class="glowBlue">
<input type="range" value="0" min="0" max="100" id="slider1" step="5" />
</li>
<li class="glowYellow">
<input type="range" value="0" min="0" max="100" id="slider2" step="5" />
</li>
<li class="glowRed">
<input type="range" value="0" min="0" max="100" id="slider3" step="5" />
</li>
<li class="glowGreen">
<input type="range" value="0" min="0" max="100" id="slider4" step="5" />
</li>
</ul>
那么CSS就是
.glowBlue .ui-slider .ui-btn:focus {
box-shadow: 0 0 12px #0080f0;
}
.glowYellow .ui-slider .ui-btn:focus {
box-shadow: 0 0 12px #FF0;
}
.glowRed .ui-slider .ui-btn:focus {
box-shadow: 0 0 12px #FF0000;
}
.glowGreen .ui-slider .ui-btn:focus {
box-shadow: 0 0 12px #00FF00;
}
Updated DEMO
另一种方法可能是使用 jQuery 找到最接近类 .ui-slider 的 DIV 并添加 glowClass。在这种情况下，您可以将发光类名称作为数据属性添加到输入中:
<ul data-role="listview">
<li >
<input type="range" value="0" min="0" max="100" id="slider1" step="5" data-glowclass="glowBlue" />
</li>
<li >
<input type="range" value="0" min="0" max="100" id="slider2" step="5" data-glowclass="glowYellow"/>
</li>
<li >
<input type="range" value="0" min="0" max="100" id="slider3" step="5" data-glowclass="glowRed"/>
</li>
<li >
<input type="range" value="0" min="0" max="100" id="slider4" step="5" data-glowclass="glowGreen"/>
</li>
</ul>
更新类:
.glowBlue .ui-btn:focus {
box-shadow: 0 0 12px #0080f0;
}
.glowYellow .ui-btn:focus {
box-shadow: 0 0 12px #FF0;
}
.glowRed .ui-btn:focus {
box-shadow: 0 0 12px #FF0000;
}
.glowGreen .ui-btn:focus {
box-shadow: 0 0 12px #00FF00;
}
运行以下javascript:
$(document).on("pagecreate", "#page1", function () {
$(".ui-slider-input").each(function(index){
var className = $(this).data("glowclass");
$(this).closest(".ui-slider").addClass(className);
});
});
关于css - 如何改变 jquerymobile slider 的发光，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22355816/
25
4
0
我正在构建一个小型移动应用程序，我有一个关于 JQM 的问题。 当用户登录时，用户将被重定向到页面 A。页面 A 通过 JQM 的 loadPage 进行加载(示例:$.mobile.loadPage
我正在尝试在 MVC 中创建一个 移动网站，我是 jquerymobile 的新手，我从 JQM 教程中复制了以下代码并将其粘贴到 MVC 中的 View 中 Home
我正在使用 jquerymobile 为网络应用程序创建一个 radio 组。在某一时刻，用户必须在“男性”和“女性”之间进行选择。我有点击(触摸)性别和未点击性别的图像。我想用具有两种状态的两个图像
我正在尝试构建一个虚拟页面来理解 Jquerymobile，但我无法在以下链接上实现“菜单”[单击页面上的菜单按钮]: http://jquerymobile.com/branches/popup-w
我尝试使用 jquery mobile 进行自动完成输入。 ' 所以我在这里找到了一个演示: http://demos.jquerymobile.com/1.4.0/listview-autocomp
var dw=function(string){ document.write(string+"-Hello"); } dw("Hi") //Hi-Hello 这很好用。但是当我将此 header
我想使用 jQuery 在发生某些事件时删除输入字段: $('#myInputId').remove(); 但是如果我尝试一下，周围的 div(由 jQueryMobile 自动添加)不会被删除。所以
在我的 jquery 移动应用程序中，我想在打开弹出窗口后自动将焦点设置在输入字段上。输入字段位于弹出窗口中，如下所示。焦点在开始时设置正确，但在弹出窗口完全降低后丢失。 open
我有一个包含五个单元格的 jQuery Mobile 网格系统。我想让这些单元格的内容与单元格的中间对齐。 我尝试添加: text 但这没有用。 还有: text 没用。 我创建了一个 fiddle检
我有一个多页面的 jQueryMobile 站点，它使用 data-title 属性来更新每个单独页面上的页面标题。这在大多数现代浏览器中都可以正常工作，但它不会反射(reflect)在 Google
如何使用 jQuertMobile 动态创建按钮。 最佳答案 非常简单: 首先创建一个按钮 HTML JQuery 元素: var button = $("My Button"); 接下来，将按钮插入
VERIFY 我使用上面的代码，它是一个带有 onClick() 设置的 jQM 按钮。调用 onclick 并执行 doSomething() 但之后，jQM 显示“错误加载页面”消息。 如何抑制该
我有这样的代码: function getData(){ $.ajax({ url: 'http://pechati.ru/extdata/baseparts/filialsW
我有一个使用 Jquery Mobile 的页面。我尝试过使用简单的 anchor Text text 但调用 Jquery Mobile 时似乎这是不可能的。有谁知道可用的解决方法？我搜索了一段
这是来自 jquerymobile 应用程序的片段。这是一个简单的文件管理器，允许删除文件，我想确认删除。我正在尝试使用 JavaScript confirm 来仔细检查操作是否应该继续；但似乎无论我
我正在开发一个使用 jquerymobile fb 滑动方法的应用程序，不知道它在哪里显示原始内容。然而。我最大的问题是它需要一个链接并尝试通过某种 ajax get 方法动态加载页面。这不是我想要的
我的 Phonegap 和 jQM 应用程序出现问题。其中，一个事件在 Android 设备上触发两次。 为了消除闪烁效果，我将页面过渡设置为“无”。当我单击菜单按钮时，它会导航到第 2 页。此外，该
如何捕获单击 jQueryMobile 中 ListView 组件的过滤器清除按钮的事件？ 我尝试过选择器 $('.ui-input-clear'), $('.ui-input-search a'),
我正在努力完成这个任务。 我有两列网格 A B C D
我正在使用JQueryMobile's experiment Datepicker有一段时间它在旧框架中工作了。昨天我将框架更改为最新的框架，发现当我单击外部时，它会破坏日期选择器的布局。 有人遇到过
我是一名优秀的程序员,十分优秀！