jQuery Mobile 滑动条控件

基本用法不用多说了,看这里:

http://www.runoob.com/jquerymobile/jquerymobile-form-sliders.html

创建方法还是很简单的,runnoob里面还特地给出了四种不同的滑动条样式。

但是,唯独少了一种效果,就是去除旁边的输入框 (input 类型为number)。

一开始我用的方法是css修改法:

#slider{display:none;float:left}

这里的#slider是你创建的Slider Widget 的id。

隐藏完后再设置滑动条 .ui-slider-track 的css。

(主要是修改margin、pading之类的,这个打开chrome,按下F12对着改就好)。

后来发现不用这么麻烦,给它添加个 class="ui-hidden-accessible" 就能完美隐藏了。

还有就是用js代码控制它:

设置value的值
$("#slider").val(80).slider("refresh");

设置Min、Max的值
$("#slider").prop("min", 1).slider("refresh");
$("#slider").prop("max", 100).slider("refresh");

监听改变:
$(document).ready(function(){
  $( "#slider" ).on( 'slidestop', function( event ) {
  var slider_value = $("#slider").val();
  alert (slider_value);
  });
});

jQuery Mobile Slider Widget 使用js控制的更多相关文章

  1. jQuery Mobile Slider 禁用点击事件

    阿子原创,转载请注明出处. 在使用jQuery Mobile Slider时,发现在页面上下拖动时,很容易不小心触发Slider的点击事件,从而造成误操作.为此需要禁用Slider的点击事件. 官方A ...

  2. Jquery Mobile局部刷新后js和css失效,需局部渲染

    $(function () {    $("#submit").click(function(){      var storage = window.localStorage;  ...

  3. Jquery Mobile下设置radio控件选中

    问题: .html文件头部引入了: <script src="js/jquery.js"></script> <script src="js ...

  4. jQuery Mobile里xxx怎么用呀?(集成篇)

    jQuery Mobile如何使用GA(Google Analytics)? 什么是GA: http://baike.baidu.com/view/34729.htm http://www.googl ...

  5. jquery mobile 的loading提示“正在加载...”在不同版本中的不同实现方式

    在jquery mobile开发中,在页面的切换.或者ajax获取数据时由于网速慢等其他原因,会有一个加载的时间,如果能在这段时间给一个“正在加载...”的提示,用户体验会更好.下面来简单的介绍一下在 ...

  6. jQuery Mobile页面跳转后未加载外部JS(转)

    http://thewaychung.iteye.com/blog/1807447 在使用jQuery Mobile进行Web开发中,当页面跳转时(pageA => pageB),在pageB中 ...

  7. jquery mobile转场时加载js失效(转)

    jquery mobile拦截了所有的http请求,并使用ajax请求取代传统的http.请求发出后,框架会将请求的内容插入到页面中data- role="page"的部分,取代原 ...

  8. wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件

    场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...

  9. jquery mobile页面跳转后,必须重新刷新页面js方可有效

    最近在做个项目,用到jquery mobile,很陌生对他,问题一个个的来,那就要一个个解决,找了一天这个问题,放可明白:首先明白jqm里面页面跳转默认都是通过ajax请求的,必须重新刷新页面js方可 ...

随机推荐

  1. intellij idea http proxy config

    # custom IntelliJ IDEA properties #http proxy -DproxySet=true -Dhttp.proxyHost=127.0.0.1 -Dhttp.prox ...

  2. django xadmin安装

    安装方式一: 下载xadmin源码文件,下载之后,解压缩,将解压目录中的xadmin文件夹拷贝到项目项目文件中.下载地址:https://codeload.github.com/sshwsfc/xad ...

  3. oracle 中怎样实现分页和去处重复

    oracle 中用关键字 rownum 来进行分页 rownum  不能使用大于号,只能是使用小于号,可以使用子查询和rownum一起使用来创建分页 SELECT * FROM ( SELECT e. ...

  4. 学习UEFI 之你把C语言学好了码?学习UEFI 之你把C语言学好了吗?

    很多人在问我说: 怎样子把UEFI 学好?! 其实写BIOS 的人答案应该只有一个,把SPCE看懂看完然后融会贯通!这样子的答案好像跟没有是一样的! 小弟就以我的学习经验来分享给大家吧!(虽然我也没学 ...

  5. python:网络爬虫的学习笔记

    如果要爬取的内容嵌在网页源代码中的话,直接下载网页源代码再利用正则表达式来寻找就ok了.下面是个简单的例子: import urllib.request html = urllib.request.u ...

  6. 更换django自带的下载链接

    class Case(models.Model): file_type = MyFileField(verbose_name='file_obj', max_length=256, blank=Tru ...

  7. ul 加 li 实现 select 下拉选功能

    由于 select 没有选中事件(onchange 事件在内容改变时才会触发,选择同一个条目不会触发),只好用其他控件来实现. <!doctype html> <html lang= ...

  8. 使用ViewFlipper实现广告图片的自动轮播的效果

    轮播资源图片的实现 package com.loaderman.viewflipperdemo; import android.os.Bundle; import android.support.v7 ...

  9. matplotlib之直方图

    1.知识点 1.通过数据和组距得到组数 2.使用plt.hist(数据,组数)绘制频数直方图:使用plt.hist(数据,组数,normed=True)绘制频率直方图 3.使用plt.xticks(a ...

  10. Appium移动自动化测试(四)之元素定位

    做过UI自动化测试的童鞋都会发现, 在上一篇文章中居然没有万能定位方式Xpath. 是滴, 确实没有! ADT自带的uiautomatorviewer里面并没有属性xpath, 如果我们需要的话,还需 ...