jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器，jQuery UI 都是一个完美的选择。

jQuery UI 包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 拖动（Draggable） - 自动滚动</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <style>
  11.   #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
  12.   </style>
  13.   <script>
  14.   $(function() {
  15.     $( "#draggable" ).draggable({ scroll: true });
  16.     $( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 });
  17.     $( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 });
  18.   });
  19.       $(document).ready(function () {
  20.         $("#a_btn").button()
  21.     })
  22.   </script>
  23. </head>
  24. <body>
  25.  
  26. <div id="draggable" class="ui-widget-content">
  27.   <p>Scroll 设置为 true，默认设置</p>
  28. </div>
  29.  
  30. <div id="draggable2" class="ui-widget-content">
  31.   <p>scrollSensitivity 设置为 100</p>
  32. </div>
  33.  
  34. <div id="draggable3" class="ui-widget-content">
  35.   <p>scrollSpeed 设置为 100</p>
  36. </div>
  37.  
  38. <div style="height: 5000px; width: 1px;"></div>
  39. <a href="https://www.baidu.com/" id="a_btn">baidu</a>
  40.  
  41. </body>
  42. </html>

jQuery UI练习的更多相关文章

  1. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  2. jQuery UI与jQuery easyUI的冲突解决办法

    jQuery UI与jQuery easyUI都是基于jQuery开发的.难免里面会有些方法名冲突! 因此对jQuery.easyui其中的两个方法名:resizable 和 draggable进行替 ...

  3. 【转】推荐10款最热门jQuery UI框架

    推荐10款最热门jQuery UI框架 原创 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...

  4. Jquery UI

    jQuery UI简介 jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的 ...

  5. JQuery UI dialog 弹窗实例及参数说明

    按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...

  6. Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路

    通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法 ...

  7. jQuery UI Datepicker使用介绍

    本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...

  8. 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...

  9. 使用requireJS的shim参数 解决插件 jquery.ui 等插件问题

    没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载, 这个时候jquery框架生成全局变量$和jQuery等全局变量.如果项目中 ...

  10. Struts2 JQuery UI常用插件

    一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...

随机推荐

  1. 【转】htop使用详解--史上最强（没有之一）

    在管理进程时通常要借助一些工具,比较常用的就是ps和top了:不过CentOS还为我们提供了一个更加强大的工具htop,下面就来了解一下此工具的使用方法.一.安装htop htop工具在epel源中提 ...

  2. 调用链系列一、Zipkin架构介绍、Springboot集承（springmvc，HttpClient）调用链跟踪、Zipkin UI详解

    1.Zipkin是什么 Zipkin分布式跟踪系统:它可以帮助收集时间数据,解决在microservice架构下的延迟问题:它管理这些数据的收集和查找:Zipkin的设计是基于谷歌的Google Da ...

  3. 源码编译安装nginx1.4.7

    传统上基于进程或线程模型架构的web服务通过每进程或每线程处理并发连接请求,这势必会在网络和I/O操作时产生阻塞,其另一个必然结果则是对内存或CPU的利用率低下.生成一个新的进程/线程需要事先备好其运 ...

  4. Ex3_15 判断图是否是一个强连通分量 判断点是否在汇点强连通分量中_十一次作业

    (a) 可以用图中的每一个顶点表示街道中的每个十字路口,由于街道都是单行的,所以图是有向图,若从一个十字路口都有一条合法的路线到另一个十字路口,则图是一个强连通图.即要验证的是图是否是一个强连通图. ...

  5. ThinkPHP 3.1.3及之前的版本使用不当可造成SQLi

    Lib/Core/Model.class.php中解析SQL语句的函数parseSql没有对SQL语句进行过滤,使用不当可导致SQL注入.(哈哈,其实用再安全的框架使用不当都可能造成SQLi) 函数: ...

  6. android录音实现不再担心—一个案例帮你解决你的问题

    最近有小伙伴经常android的录音怎么实现,有没有相关的案例.今天给大家推荐一个android中实现录音和播放的小案例. 效果图: 一.实现录音的 Service 关键代码: // 开始录音 pub ...

  7. java多线程快速入门（五）

    常用线程api方法 多线程运行状态 1.新建状态 用new创建一个线程 2.就绪状态 当调用线程的start()方法 3.运行状态 当线程获得cpu,开始执行run方法 4.阻塞状态 线程通过调用sl ...

  8. 【linux】16进制格式查看命令hexdump

    test.txt内容 asdfsg ewtwfsdf1Hello World! hexdump -Cv test.txt   输出 |asdfsg ewtwfsdf1| 6c 6c 6f 6f 6c ...

  9. Zookeeper简介（一）

    使用Zookeeper已经有几年时间了,零零散散的积累了一些经验,但从未想过能写出一些列的文章分享出来.从今天起,计划持续更新关于Zookeeper相关的文章,从基本的搭建使用.原理分析.典型场景分析 ...

  10. whiledo循环输出数组中的分数

    var scores = [24, 32, 17]; var arrayLength = scores.length; var i =0; while(i < arrayLength){ var ...