本文在于巩固基础

学习网址：http://jqueryui.com/

基本概念：jQuery UI[是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和GoogleChrome。

jQuery UI实际上是jQuery插件，专指由jQuery官方维护的UI方向的插件
jQuery UI 与 jquery 的主要区别是：
(1) jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
(2) jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。
下面介绍如何使用去使用JqueryUI来完成拖动
 
需要两个库jquery-ui.min.css，jquery-ui.min.js
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>播放音乐</title>

    <link rel="stylesheet" type="text/css" href="Css/myCss.css"/>

    <link rel="stylesheet" type="text/css" href="Css/jquery-ui.min.css">

</head>

<body>

<div id="sss">

    <h1>音乐播放</h1>

    <div id="music">

        <button id="btn">播放/暂停</button>

        <audio id="audio" src="Source/Happiness.mp3"></audio>

    </div>

</div>

<script src="Script/jquery-2.1.1.min.js"></script>

<script src="Script/jquery-ui.min.js"></script>

<script type="text/javascript" src="Script/myScript.js"></script>

</body>

</html
h1{

    color: blue;

}

#music {

    color: red;

}

#sss{

    width: 200px;

    height: 200px;

    border: 2px solid red;

}
/**

 * Created by Administrator on 2015/3/5 0005.

 */

$(document).ready(function(){

    $("#sss").draggable();

    $("#btn").click(function(){

        if($("#audio").get().paused)

        {

            $("#audio").get().play();

        }

        else

        {

            $("#audio").get().pause();

        }

    });

});



这样我们就可以去拖动这个div，而且能都点击其中的音乐播放暂停

JqueryUI-1的更多相关文章

  1. Jquery-UI使用

    =创建form对话框弹出登录 首先引入css样式和js. <link rel="stylesheet" href="<%=path%>/css/demo ...

  2. jqueryUI弹出框问题

    jqueryui dialog中 select选不中或比较慢 dialog = function(Window,dialogDivId,title,buttons,css) { css = css|| ...

  3. jQueryUI Draggable 和 Droppable 配合使用时遇到的两个坑

    jQueryUI 的 拖拽插件极大的方便了开发者对拖拽功能的实现,但是官方教程给的太笼统,在具体实现的时候很多地方不明确,这里说一下我遇到的两个 "小坑": 1:Draggable ...

  4. jqueryui 进度条使用

    <title></title> <script src="../Js/NewJs_CFJ/jquery.js" type="text/jav ...

  5. 用JqueryUI的Dialog+IFrame实现仿模态窗口效果

    大家有没有想过这样一个问题,当我点击某个图片的时候,我想弹出这个图片信息的详情并修改,于是你首先想到的是不是window.open?window.open方法确实可以,但是有它的局限性,比如,标题显示 ...

  6. 解决JqueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug

    前些日子不是在做 使用Jquery-UI实现一次拖拽多个选中的元素操作嘛,在持续完善这个组件时遇到了一个关于拖放排序的bug.今天就着图片和代码重现一下,也顺便告诉大家如何解决这个问题. 首先先上图描 ...

  7. 使用 Jquery-UI 实现一次拖拽多个选中的元素操作

    项目需要,实现一个拖放操作,要求每次可以拖拽选中的多个元素,释放到目标容器后可排序.考虑了一下,觉得jquery-ui比较合适,毕竟它提供了项目需要的交互性事件机制.拖拽.释放.排序.选择等效果.而在 ...

  8. [原创]首次制作JQueryUI插件-Timeline时间轴

    特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...

  9. Ajax与JqueryUI和EasyUI错题总结

    Ajax与JqueryUI和EasyUI错题总结 正确答案A,解析:此题考察的是JQuery UI下的menu插件的使用,menu提供ui-state-disabled class 方法禁用任何菜单项 ...

  10. jqueryUI 插件

    1,拖拽插件  draggable 拖拽插件draggable的功能是拖动被绑定的元素, 当这个jqueryUI插件与元素绑定后,可以通过调用draggable()方法,实现何种拖拽元素的效果 $(s ...

随机推荐

  1. UGUI Image控件

    今天一起学习Image控件O(∩_∩)O~ 介绍一下基本的属性 Source:Image:               指定图片源, 图片设置2DSprite(2D and UI)格式Color:   ...

  2. Android应用程序窗口（Activity）的绘图表面（Surface）的创建过程分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8303098 在前文中,我们分析了应用程序窗口连 ...

  3. Android_Fragment_Fragment具体解释

    Android_Fragment_Fragment具体解释 分类: Android基础2013-10-03 08:23 92人阅读 评论(0) 收藏 举报 AndroidFragmentFragmen ...

  4. tomcat应用服务器

    Tomcat性能调优方案 一.操作系统调优 对于操作系统优化来说,是尽可能的增大可使用的内存容量.提高CPU的频率,保证文件系统的读写速率等.经过压力测试验证,在并发连接很多的情况下,CPU的处理能力 ...

  5. Android开发_关于点击事件

    为了防止用户或者测试MM疯狂的点击某个button: 创建一个工具类 public class Tools { private static long lastClickTime; public st ...

  6. 基类的参考Expression能传一个lambda表达式

    using System;using System.Collections.Generic;using System.Data.Entity.Infrastructure;using System.L ...

  7. Foundation--NSArray+NSMutableArray

    C语言中数组只能存放一种类型 OC语言中数组可以存放多种类型,但是只能是对象类型,不可以是基本类型 我们实际中最好在一个数组中只存放一种类型的元素 nil表示数组的结尾,所以我们不能填写值为nil的对 ...

  8. USACO Chapter 1 解题总结

    USACO Chapter 1 解题总结 1.1.1 Your Ride Is Here 基本字符串操作,无压力. 1.1.2 Greedy Gift Givers 基础模拟题,弄明白题意,不怕麻烦, ...

  9. python面向对象(上)

    创建类 Python 类使用 class 关键字来创建.简单的类的声明可以是关键字后紧跟类名: class ClassName(bases): 'class documentation string' ...

  10. 屏蔽鼠标右键功能JS

    <script language="Javascript">     function hiderightKey(){    return false; } docum ...