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. CodeForces - 884F :Anti-Palindromize（贪心&费用流）
			
    A string a of length m is called antipalindromic iff m is even, and for each i (1 ≤ i ≤ m) ai ≠ am - ...
    
			
    2. 
						
  2. POJ1860(ford判环)
			
    Currency Exchange Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 24243   Accepted: 881 ...
    
			
    3. 
						
  3. maven 整合shh框架的pom.xml文件配置
			
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
    
			
    4. 
						
  4. js操作Iframe非当前最上层窗体
			
    如果当前窗口不是最上层窗口(比如是在Iframe中),那么就把自己变为最上层窗口.  <script language="javascript" type="tex ...
    
			
    5. 
						
  5. day1 java基础回顾-Junit单元测试
			
    Junit单元测试框架的基本使用 一.搭建环境: 导入junit.jar包(junit4) 二.写测试类: 0,一般一个类对应一个测试类. 1,测试类与被测试类最好是放到同一个包中(可以是不同的源文件 ...
    
			
    6. 
						
  6. 使用go实现基于命令行的计算器程序
			
    项目目录结构 calcs.go源文件 package main import ( "fmt" "os" "strconv" "my ...
    
			
    7. 
						
  7. dialog 设置maxHeight 最大高度
			
    WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);Displ ...
    
			
    8. 
						
  8. 数据库路由中间件MyCat - 使用篇（4）
			
    此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 配置MyCat 3. 配置conf/rule.xml 1.5GA版本中的规则配置比较笨,2.0中优化了一些, ...
    
			
    9. 
						
  9. 715. Range Module
			
    A Range Module is a module that tracks ranges of numbers. Your task is to design and implement the f ...
    
			
    10. 
						
  10. js混杂笔记
			
    1.判断对象为空的方法 1)Object.keys({}).length === 0 // true 2)Object.getOwnPropertyNames({}).length === 0 //  ...
    
			
    11.