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. 集训Day8
			
    旧试题Day2... bzoj3436 有若干个集合和一些信息 信息有3种: I.集合A比集合B至少多C个元素 II.集合A比集合B至多多C个元素 III.集合A和集合B元素一样多 求这些信息是否有矛 ...
    
			
    2. 
						
  2. bzoj3462DZY Loves Math II
			
    数据范围:$$2 \leq S \leq 2 * 10^6$$ $$1 \leq n \leq 10^{18}$$ $$ 1 \leq q \leq 10^5$$ 数学+dp 题解写一年系列... 观 ...
    
			
    3. 
						
  3. MySQL left join 20161024
			
    公司OA系统上部门上线了一套流程,总部和分公司部门提数据需求都要走线上流程,审批,想想也是不错的,能和绩效更加合理的挂钩,还有打分评价,双向互动. 下午接到一个需求,查看某分公司上周订单使用优惠券情况 ...
    
			
    4. 
						
  4. ACM学习历程—HDU4956 Poor Hanamichi（模拟）
			
    Poor Hanamichi Problem Description Hanamichi is taking part in a programming contest, and he is assi ...
    
			
    5. 
						
  5. 自己实现的vector
			
    #include <iostream> #include <memory> using std::cout; using std::endl; using std::alloc ...
    
			
    6. 
						
  6. Visual Studio 编译后去掉只读属性
			
    Visual Studio 编译后去掉只读属性 attrib $(TargetPath) -R attrib $(TargetDir)$(TargetName).pdb -R
    
			
    7. 
						
  7. 转载：数据库应用开发工具Toad使用笔记
			
    由于网上TOAD中文教程很少,在网上摘抄了此文章便于学习,感谢原创者. TOAD使用笔记 1.把鼠标停在sql所在行,然后ctrl+Enter直接执行当前sql. 2.解决Toad对中文显示乱码问题( ...
    
			
    8. 
						
  8. 利用java在服务器和客服端建立连接，进行通讯（代码实例）
			
    客服端代码:有注释 package javanet; import java.io.IOException; import java.io.InputStream; import java.io.Ou ...
    
			
    9. 
						
  9. 《精通Spring4.X企业应用开发实战》读后感第四章
			
    
			
    10. 
						
  10. XXX.h:143: error: expected declaration specifiers or ‘...’ before ‘YYY’
			
    出现上面头文件错误,原因是定义YYY的头和XXX.h互相包含了
    
			
    11.