`
dcdc723
  • 浏览: 188067 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery ui 的一个菜单滑动效果

阅读更多
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script type="text/javascript">
		function setsize(){
			$('#cc').width(700).height(350);
			$('#aa').trigger('_resize');
		}
		function select(){
			$('#aa').accordion('select','title1');
		}
	</script>
</head>
<body>
	<div style="margin-bottom: 10px;">
		<a href="#" onclick="setsize()">setsize</a>
		<a href="#" onclick="select()">select</a>
	</div>
	<div id="cc" style="overflow:auto;width:600px;height:300px;padding:10px;border:1px solid #ccc;">
		<div id="aa" class="easyui-accordion" fit="true" style="width:300px;height:200px;">
			<div title="title1" icon="icon-save" style="overflow:auto;padding:10px;">
				<h3 style="color:#0099FF;">Accordion for jQuery</h3>
				<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
				<p>content1</p>
				<p>content1</p>
				<p>content1</p>
				<p>content1</p>
				<p>content1</p>
				<p>content1</p>
				<p>content1</p>
				<p>content12</p>
			</div>
			<div title="我的标题" icon="icon-reload" selected="true" style="padding:10px;">
				content2
			</div>
			<div title="title3">
			</div>
		</div>
	</div>
</body>
</html>

 附Jquery.js。。。jqeryui.js

  • 大小: 24.3 KB
2
0
分享到:
评论
3 楼 dcdc723 2010-01-30  
sniciq 写道
一句说明都没有,截个图也行啊!大哥!

不好意思。。。发得快了点。。。图已补上~~
2 楼 sniciq 2010-01-30  
一句说明都没有,截个图也行啊!大哥!
1 楼 dcdc723 2010-01-30  
jquery 的messager类。。(对话框、消息提醒样式)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function show1(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 4 seconds.',
showType:'show'
});
}
function show2(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 5 seconds.',
timeout:5000,
showType:'slide'
});
}
function show3(){
$.messager.show({
title:'My Title',
msg:'Message never be closed.',
timeout:0,
showType:'fade'
});
}
function alert1(){
$.messager.alert('My Title','Here is a message!');
}
function alert2(){
$.messager.alert('My Title','Here is a error message!','error');
}
function alert3(){
$.messager.alert('My Title','Here is a info message!','info');
}
function alert4(){
$.messager.alert('My Title','Here is a question message!','question');
}
function alert5(){
$.messager.alert('My Title','Here is a warning message!','warning');
}
function confirm1(){
$.messager.confirm('My Title', 'Are you confirm this?', function(r){
if (r){
alert('confirmed:'+r);
location.href = 'http://www.google.com';
}
});
}
function prompt1(){
$.messager.prompt('My Title', 'Please type something', function(r){
if (r){
alert('you type:'+r);
}
});
}
</script>
</head>
<body>
<h1>Messager</h1>
<div>
<a href="javascript:void(0)" onclick="show1()">show</a> |
<a href="#" onclick="show2()">slide</a> |
<a href="#" onclick="show3()">fade</a> |
</div>

<div>
<a href="#" onclick="alert1()">alert</a> |
<a href="#" onclick="alert2()">alert(error)</a> |
<a href="#" onclick="alert3()">alert(info)</a> |
<a href="#" onclick="alert4()">alert(question)</a> |
<a href="#" onclick="alert5()">alert(warning)</a>
</div>
<div>
<a href="#" onclick="confirm1();">confirm</a>
</div>
<div>
<a href="#" onclick="prompt1()">prompt</a>
</div>
</body>
</html>

相关推荐

    漂亮的jquery UI 渐变二级下拉导航菜单

    jQuery UI是一个强大的JavaScript库,它提供了丰富的UI组件,包括可拖动元素、可排序列表、日期选择器等。在这个项目中,我们将主要利用jQuery UI的交互性和样式定制能力来构建我们的下拉导航菜单。 首先,我们需要...

    jquery UI 下拉菜单

    jQuery UI 是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括下拉菜单(Dropdown Menu)。在Web开发中,下拉菜单常用于优化导航,节省页面空间,为用户提供更直观的操作方式。本文将深入探讨jQuery UI...

    jquery ui & themes

    在Web开发领域,jQuery UI是一个强大且广泛使用的JavaScript库,它基于jQuery核心库,提供了丰富的用户界面组件和交互效果。jQuery UI的主要目标是简化前端开发,通过提供一系列可定制的UI元素,使得开发者能够快速...

    jquery ui仿腾讯web qq界面desktop酷炫特效

    2. **窗口拖放(Draggable)和可调整大小(Resizable)**:腾讯Web QQ的窗口允许用户拖动和调整大小,jQuery UI提供了Draggable和Resizable两个插件,能轻松实现这一交互效果。 3. **下拉菜单(Dropdown)**:在Web...

    jQuery UI可拖拽弹性圆形菜单.zip

    jQuery UI库作为一个强大的JavaScript框架,提供了丰富的组件和特效,其中包括本文所探讨的“可拖拽弹性圆形菜单”。这个菜单设计独特,通过点击一个圆形按钮可以弹出四个子菜单按钮,不仅具有视觉吸引力,还增加了...

    最新jQueryUI组件下载

    这个“最新jQueryUI组件下载”应该指的是版本号为1.10.0的jQuery UI压缩包。 jQuery UI 包含了大量的可交互和视觉上吸引人的元素,它简化了网页开发,让开发者可以快速实现复杂且用户友好的界面设计。以下是一些...

    jQueryUI V1.12.1

    4. **效果(Effects)**:jQueryUI包含了各种动画效果,如淡入淡出(Fade)、滑动(Slide)、切换(Toggle)等,以及一个完整的特效库,包括基本效果、组合效果和自定义效果,让开发者能够轻松实现动态过渡和视觉...

    jQueryUI API文档资料

    jQuery UI 是一个基于 jQuery JavaScript 库的开源项目,它提供了丰富的用户界面组件和交互效果,如日期选择器、对话框、拖放功能、排序列表等。这个API文档资料旨在帮助开发者更有效地理解和使用jQuery UI的各种...

    jQuery UI 中文版 入门到精通 PDF

    2. **效果(Effects)**:jQuery UI提供了丰富的动画效果,包括淡入淡出(Fade)、滑动(Slide)、切换(Toggle)等基础效果,以及自定义组合效果和过渡动画,使得页面操作更加生动。 3. **交互(Interactions)**...

    jquery UI中文文档

    jQuery UI 是一个基于 jQuery JavaScript 库的开源用户界面插件集合,它提供了各种可交互的组件和美化效果,用于创建功能丰富的网页应用程序。这个中文文档集是为开发者提供关于如何使用 jQuery UI 的详细指南,包括...

    jqueryui-API.zip_jqueryui_jqueryui API

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的交互效果、可自定义的主题以及多种组件。这个压缩包中的“jqueryui-API(最完整).pdf”文档全面介绍了jQuery UI API,是开发者学习和...

    jqueryUI demo

    jQuery UI 是一个开源的 JavaScript 库,它基于广泛使用的 jQuery 库,为开发者提供了丰富的用户界面组件和交互效果。这个库旨在简化网页开发,通过简单的 API 能够实现复杂的界面设计,包括拖放功能、可自定义的...

    jQuery.ui.1.7.2中文文档

    jQuery UI 是一个基于 jQuery 的开源库,它提供了丰富的用户界面组件和交互效果,为开发者构建功能完善的Web应用程序提供了强大支持。1.7.2版本是该库的一个稳定版本,包含了众多实用的功能和组件。本文将对其中的...

    JQueryUI架包

    jQuery UI 是一个基于 jQuery JavaScript 库的可扩展的用户界面插件集合,它提供了丰富的交互效果、可自定义的主题以及多种可重用的UI小部件,大大简化了网页开发者创建功能丰富的交互式用户界面的过程。本篇文章将...

    jquery ui强大的UI功能组件源码

    确实,对于前端开发者来说,jQuery UI 提供的工具可以创建出具有吸引力的用户体验,如滑动效果、弹出窗口、下拉菜单等,这些都能让网站或应用看起来更专业,功能更完善。同时,“好看的页面效果”意味着 jQuery UI ...

    jqueryui可视化

    jQuery UI 是一个基于 jQuery 库的开源用户界面库,提供了丰富的组件和交互效果,让网页开发中的可视化设计变得更加简单和高效。它包含了一系列精心设计的可定制组件,如对话框(Dialog)、日历(Datepicker)、拖放...

    jquery-ui.min1.12.1.zip

    jQuery UI 是一个强大的JavaScript库,它基于jQuery,为开发者提供了丰富的用户界面组件,包括拖放功能、对话框、日期选择器、滑块以及我们今天将重点讨论的层级菜单。本文将详细介绍如何使用jQuery UI 1.12.1版本...

    jquery ui(里面包含demo)

    jQuery UI 是一个基于 jQuery JavaScript 库的开源项目,它提供了丰富的用户界面组件和交互效果,包括对话框、拖放功能、日期选择器、滑块、按钮等。这个压缩包"jquery-ui-1.9m6"包含了jQuery UI的1.9m6版本,不仅有...

    JQuery UI 中文帮助文档

    jQuery UI包含了多种内置的过渡效果,如淡入淡出、滑动、缩放等,同时提供了一个强大的动画API,可以自定义复杂的动画序列。 **5. 绑定和事件处理** jQuery UI组件通常与jQuery的事件处理机制相结合,如`$(element...

Global site tag (gtag.js) - Google Analytics