UI继承 jQuery 简易使用特性，提供高度抽象接口，短期改善网站易用性。

jquery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库，您可以使用它创建高度交互的 Web 应用程序。

简单而言UI可以实现在网页上的一些效果 比如拖动按钮

引入需要的控件：

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.9.1.js"></script>

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">


<style>

        #feedback { font-size: 1.4em; }

        #selectable .ui-selecting { background: #FECA40; }

        #selectable .ui-selected { background: #F39814; color: white; }

        #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }

        #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

    </style>

    <script>

        $(function() {

            $( "#tabs" ).tabs();

            $("#btn").button();

            /*可以拖动*/

$("#btn2").button().draggable();

        });

        /*选择器*/

$(function () {

            $( "#selectable" ).selectable();

        })

        /*对话框*/

$(function() {

            $( "#dialog" ).dialog();

        });

        /*日期 控件*/

$(function() {

            $( "#date" ).datepicker();

        });

        /*滑块*/

$(function() {

            $( "#slider" ).slider();

        });

        $(function() {

            $( "#age" ).tooltip();

        });

    </script>

</head>

<body>

<div id="tabs">

    <ul>

        <li><a href="#tabs-1">第一个</a></li>

        <li><a href="#tabs-2">第二个</a></li>

    </ul>

    <div id="tabs-1">

        <a href="#" id="btn">哈哈</a>

    </div>

    <div id="tabs-2">

        <a href="#" id="btn2">可以拖动我</a>

    </div>

</div>


<div id="dialog" title="基本的对话框">

    <p>这是一个默认的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p>

</div>
												


											
简单ui的更多相关文章
	

    
						
  1. 【Android Developers Training】 3. 构建一个简单UI
		
    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
    
		
    2. 
						
  2. Struts2第十一篇【简单UI标签、数据回显】
		
    Struts2UI标签 Sturts2为了简化我们的开发,也为我们提供了UI标签-也就是显示页面的标签-.. 但是呢,Struts2是服务端的框架,因此使用页面的标签是需要在服务器端解析然后再被浏览器 ...
    
		
    3. 
						
  3. (转载)基于Unity~UGUI的简单UI框架（附UIFramework源码）
		
    此博客跟随siki老师的课程笔记生成,感谢siki老师的辛勤付出! 此框架功能较简单,适用于学习,可以很好的锻炼我们的设计思想 框架源码地址: UIFramework litjson.dll下载地址: ...
    
		
    4. 
								
  4. Struts 简单UI标签
		
    <!-- 服务器标签 : 最终别解析为html标签--> <s:form action="/user_login" method="post" ...
    
		
    5. 
						
  5. 第一篇 Springboot + Web MVC + MyBatis + 简单UI + Thymeleaf实现
		
    源码链接:https://pan.baidu.com/s/1-LtF56dnCM277v5lILRM7g 提取码:c374 第二篇 Springboot mybatis generate根据数据库表自 ...
    
		
    6. 
						
  6. CocoStudio 创建简单UI资源并加入�到project
		
    打开CocoStudio UI编辑器新项目,设置画布480*320, 加入�一个标签和一个button控件 导出项目,生成所须要的资源文件, 拷贝到cocos2dprojectResources文件夹 ...
    
		
    7. 
						
  7. 简单登陆UI设计
		
    简单UI设计 作品效果图: 关键技术:      用到了本地化控件:SharedPreferences,简单的说就是本地配置. 四大组件:Intent 基本思路请看代码: Java代码: import ...
    
		
    8. 
						
  8. go语言使用go-sciter创建桌面应用(一) 简单的通过html,css写ui
		
    我们使用go-sciter,就不得不提Sciter,Sciter 是一个嵌入式的 HTML/CSS/脚本引擎,旨在为桌面应用创建一个 UI 框架层. 说简单点就是我们通过它可以像写html,css那样 ...
    
		
    9. 
						
  9. laya fgui 超简单的UI框架
		
    FairyGUI 超简单的UI框架 Laya使用fgui的超简单UI框架 使用场景:用于使用fgui进行layaUI开发的程序人员 整个框架分为3个模块,共有4个类: FGUIManager :FGU ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 用CSS实现新闻轮播效果
			
    CSS: /* Make it a marquee */ .marquee { width: 450px;margin: 0 auto;overflow: hidden;white-space: no ...
    
			
    2. 
						
  2. ubuntu svn 常用命令
			
    1.svn svn update 更新 新增文件或文件夹并提交svn add "sss" test.py testw.pysvn add "dir" dir_p ...
    
			
    3. 
						
  3. EMQ开启mysql认证
			
    规定通过mqtt_user表格验证过的用户才能连接EMQ服务器,我们需要开启mysql插件认证.EMQ2.0自带mysql插件,下面开始配置. 新建mqtt_user表格 要想控制用户登录EMQ,肯定 ...
    
			
    4. 
						
  4. check_MK安装部署（nagios4版本）
			
    概述: 操作系统版本:CentOS release 6.3 (Final) 64位 nagios版本:Nagios Core 4.0.6 pnp4nagios版本:pnp4nagios-0.6.22  ...
    
			
    5. 
						
  5. JavaScript-Tool：three.js
			
    ylbtech-JavaScript-Tool:three.js Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.你可以在它的主页 ...
    
			
    6. 
						
  6. lwip 移植
			
    一.源码目录结构 api . core.netif. include core下又有IPV4 . IPV6 . SNMP 和.c文件 include下又有IPV4.IPV6.LWIP.netif ne ...
    
			
    7. 
						
  7. openStack高可用性和灾备方案
			
    1. 基础知识 1.1 高可用 (High Availability,简称 HA) 高可用性是指提供在本地系统单个组件故障情况下,能继续访问应用的能力,无论这个故障是业务流程.物理设施.IT软/硬件的 ...
    
			
    8. 
						
  8. JavaScript高级程序设计学习笔记第三章--基本概念
			
    一.标识符: 1.区分大小写 2.命名规则: 第一个字符必须是一个字母.下划线(_)或一个美元符号($) 其他字符可以是字母.下划线.美元符号或数字 标识符中的字母也可以包含扩展的 ASCII 或 U ...
    
			
    9. 
						
  9. 0003_Linux基础之常用命令
			
    1.pwd:查看当前所在目录 2.cd :切换目录 3.ls:查看当前目录下的文件及文件夹: 4.ls -l :列出当前目录下文件及详细信息         drwxr-xr-x   第一个字符为d则 ...
    
			
    10. 
						
  10. win764位安装mysql-5.6
			
    1配置mysql的MYSQL_HOME和PATH 增加环境变量: MYSQL_HOME=D:\mysql-5.6.14-winx64 修改环境变脸: 在path后面增加%MYSQL_HOME%\bin ...
    
			
    11.