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. BZOJ_5359_[Lydsy1805月赛]寻宝游戏_DP
			
    BZOJ5359_[Lydsy1805月赛]寻宝游戏_DP Description begin.lydsy.com/JudgeOnline/upload/201805.pdf 我们需要找到一条权值最大 ...
    
			
    2. 
						
  2. 【Lintcode】087.Remove Node in Binary Search Tree
			
    题目: Given a root of Binary Search Tree with unique value for each node. Remove the node with given v ...
    
			
    3. 
						
  3. KCF+Opencv3.0+Cmake+Win10 测试
			
    配置 需要的文件下载 安装CMake,安装opencv3.0.0 在KCFcpp-master 目录下新建一个文件夹,命名为build 打开CMake-GUI配置如下: 点击Configure,编译器 ...
    
			
    4. 
						
  4. java之装箱拆箱
			
    参考http://how2j.cn/k/number-string/number-string-wrap/22.html 封装类 所有的基本类型,都有对应的类类型 比如int对应的类是Integer  ...
    
			
    5. 
						
  5. jmeter压力测试报告
			
    XXX压力测试报告 时间:2015-08-04                                             测试人员:xxx 目录 XXX压力测试报告... 1 一  测试 ...
    
			
    6. 
						
  6. 用 Heapster 监控集群
			
    Heapster 是 Kubernetes 原生的集群监控方案.Heapster 以 Pod 的形式运行,它会自动发现集群节点.从节点上的 Kubelet 获取监控数据.Kubelet 则是从节点上的 ...
    
			
    7. 
						
  7. 转载-聊一聊深度学习的activation function
			
    目录 1. 背景 2. 深度学习中常见的激活函数 2.1 Sigmoid函数 2.2 tanh函数 2.3 ReLU函数 2.4 Leaky ReLu函数 2.5 ELU(Exponential Li ...
    
			
    8. 
						
  8. 使用PowerDesigner创建物理模型并生成SQL语句在MySQL中生成表
			
    我使用的PowerDesigner的版本为16.5,创建物理模型后,使用PowerDesigner生成的SQL语句,在MySQL中创建表. 1. 打开Power Designer软件,在弹出的欢迎对话 ...
    
			
    9. 
						
  9. Unity 5着色器系统代码介绍（上）
			
    http://forum.china.unity3d.com/thread-25724-1-10.html Unity 5着色器系统代码介绍(上) Unity在着色器开发方面提供了很大的灵活性.有些工 ...
    
			
    10. 
						
  10. 2016vr 相关白皮书
			
    腾讯2016VR技术白皮书:盘点VR前沿技术 http://mt.sohu.com/20170329/n485424234.shtml 工信部<VR产业白皮书>全文 官方解读虚拟现实 ht ...
    
			
    11.