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. Python调试指南
			
    http://blog.sina.com.cn/s/blog_a15aa56901017u0p.html http://www.cnblogs.com/coderzh/archive/2009/12/ ...
    
			
    2. 
						
  2. bzoj 4275 Badania naukowe —— DP
			
    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4275 枚举 \( C \) 在 \( A \) 和 \( B \) 中的位置,然后取它前后的 ...
    
			
    3. 
						
  3. 好文章！转载嵌入式LINUX
			
    整理了嵌入式linux学习路线供参考,希望对您有所参考价值! 一.linux入门 目前嵌入式主要开发环境有 Linux.Wince等:Linux因其开源.开发操作便利而被广泛采用.而Linux操作系统 ...
    
			
    4. 
						
  4. python set集合的用法
			
    python的set和其他语言类似, 是一个无序不重复元素集, 基本功能包括关系测试和消除重复元素. 集合对象还支持union(联合), intersection(交), difference(差)和 ...
    
			
    5. 
						
  5. java 获取 HttpServletRequest 值 demo
			
    private void getHttpServletRequestInfo(HttpServletRequest request){ try { StringBuilder stringBuilde ...
    
			
    6. 
						
  6. tp框架下，数据库和编辑器都是utf-8, 输出中文却还是乱码
			
    输出: array(2) { [0]=> array(4) { ["id"]=> string(1) "1" ["user"]= ...
    
			
    7. 
						
  7. 打包python文件为exe文件（PyInstaller工具使用方法）
			
    最近做的新浪微博爬虫程序,打算打包成.exe软件以方便使用,网上找到一个很好的打包工具pyinstaller,这里记录一下打包的方法. 一.下载pyinstaller 我使用的版本为PyInstall ...
    
			
    8. 
						
  8. Centos 6.5 下Nginx安装部署https服务器
			
    一般我们都需要先装pcre, zlib,前者为了重写rewrite,后者为了gzip压缩.1.选定源码目录选定目录 /usr/local/cd /usr/local/2.安装PCRE库cd /usr/ ...
    
			
    9. 
						
  9. 下载win7/win8/win10镜像
			
    关于给电脑换系统,很多人会花钱去电脑店里换,或者是下载Ghost系统.但这些系统都不是微软原版的,制作者已经集成了很多常用软件或垃圾软件进去.我在这给大家介绍的是如何下载正版的Windows系统.这个 ...
    
			
    10. 
						
  10. select2，利用ajax高效查询大数据列表（可搜索、可分页）
			
    二.导入css和js到网站上 1.使用CDN,节省自己网站的流量 ? 1 2 <link href="https://cdnjs.cloudflare.com/ajax/libs/se ...
    
			
    11.