JQuery Layout Demo
下载jquery
、jquery-ui
、jquery.layout
以下Demo可以展示上中下、左中右格局的样式
demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Layout Container</title>
<link type="text/css" rel="stylesheet" href="layout-default-latest.css" />
<style type="text/css">
html, body {
background: #666;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: auto; /* when page gets too small */
}
#container {
background: #999;
height: 100%;
margin: 0 auto;
width: 100%;
max-width: 900px;
min-width: 700px;
_width: 700px; /* min-width for IE6 */
}
.pane {
display: none; /* will appear when layout inits */
}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.layout.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#container').layout();
});
</script>
</head>
<body>
<div id="container">
<div class="pane ui-layout-center">
Center
<p><a href="http://layout.jquery-dev.net/demos.html"><b>Go to the Demos page</b></a></p>
</div>
<div class="pane ui-layout-north">North</div>
<div class="pane ui-layout-south">South</div>
<div class="pane ui-layout-east">East</div>
<div class="pane ui-layout-west">West</div>
</div>
</body>
</html>
- 大小: 15.2 KB
分享到：
相关推荐
**jQuery Layout：经典布局策略详解** 在Web开发中，页面布局设计是至关重要的，它决定了用户的交互体验和视觉效果。...同时，提供的示例文件`example.htm`可以作为实践参考，进一步加深对jQuery Layout的理解。
10. **文档与示例**：尽管是精简版，`jQuery.layout`仍应提供详细的文档和示例代码，帮助开发者快速上手并理解其工作原理。 总的来说，`jQuery.layout`精简版为开发者提供了一种轻量级的解决方案，用于创建动态、...
要深入了解 jQuery UI Layout，你可以查阅官方文档，那里有详细的配置选项和API说明，还有丰富的示例代码可供参考。同时，通过"DEMO例子"，你可以亲手实践，更快掌握这个强大的布局工具。 总结来说，jQuery UI ...
在"layout"压缩包中，可能包含了jQuery Layout的示例代码、bpop插件的源文件以及用于演示蒙版效果的HTML、CSS和JavaScript文件。通过研究这些文件，你可以深入了解这两个插件的工作原理，并在实际项目中应用它们。...
《jQuery Layout 示例与主题变换详解》 在网页开发中，布局设计是至关重要的一步，它决定了用户界面的美观性和易用性。jQuery Layout 是一款强大的前端布局工具，它提供了丰富的功能，帮助开发者轻松构建复杂的页面...
在文件列表中的"WebUI"可能包含了使用jQuery Layout插件创建的示例页面或者相关资源，这些文件可能包含HTML、CSS、JavaScript以及图片等，展示了如何实际应用该插件。 为了充分利用jQuery Layout插件，开发者需要...
jQuery UI.Layout参数 jQuery UI.Layout Plug-in 官方站点：http://layout.jquery-dev.net/ 必须的文件：jquery.js，jquery-ui.js，jquery.layout.js
**jQuery UI Layout** 是一个强大的JavaScript库，用于创建复杂的页面布局。它基于jQuery，提供了简单易用的API，使得开发者可以快速地构建出响应式的、多区域的网页布局。这个"jQuery UI Layout 中文文档包"包含了...
**jQuery入门小示例** jQuery 是一款非常流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画设计和Ajax交互等任务。对于初学者来说，掌握jQuery的基础知识可以大大提高开发效率，减少代码量。本文将...
学习这个示例，你将了解到如何组织 JavaScript 代码以处理复杂的用户交互，同时熟悉 jQuery 的基本用法。此外，你还可以探索如何通过 jQuery 优化性能，减少对 DOM 的频繁操作，提高用户体验。这是一项实用的技能，...
jQuery简易计算器是一个基于JavaScript库jQuery实现的简单计算工具，它为用户提供了一个直观的界面来执行基本的算术运算。这个项目对于初学者来说是很好的学习材料，因为它涉及到前端开发中的DOM操作、事件处理以及...
"jquery产品展示示例"这个主题聚焦于如何使用jQuery来创建一个吸引人的、动态的产品展示界面。下面我们将深入探讨相关的jQuery知识以及如何应用到产品展示上。 首先，jQuery的核心特性之一是选择器。它使得选取DOM...
在提供的压缩包文件中，通常包含有演示示例，通过查看这些示例，开发者可以直观地了解如何配置和使用 jQuery UI Layout。每个版本可能都包含了一些预设的布局实例，例如三列布局、头部和尾部固定布局等，通过这些...
《jQuery UI Layout 后台框架解析》 在前端开发领域，高效的页面布局是构建用户界面的关键环节。jQuery UI Layout 是一款强大的布局插件，它基于jQuery和jQuery UI库，为开发者提供了一种灵活且功能丰富的后台框架...
在描述中提到的"Mac插件Demo实验项目"，可能是指将jQuery Layout应用于Mac应用程序的Web视图中，或者是在开发Mac应用时使用的一个示例项目。这可能涉及到如何在本地环境中设置和测试布局，以及如何处理与Mac平台特有...
在“jquery tooltip插件示例”的项目中，我们可以看到如何利用 jQuery 和特定的 Tooltip 插件创建出美观且实用的页面效果。这个示例可能包括了各种定制选项，如自定义样式、动态触发事件、不同位置的定位以及内容的...
本资源包含了一些使用jQuery实现的插件示例，旨在帮助开发者理解和学习如何利用jQuery来创建功能丰富的网页元素。 首先，让我们探讨jQuery的放大镜效果。这个效果通常用于电商网站的产品展示，允许用户在鼠标悬停时...
本文将深入探讨“jquery-layout”库以及如何结合自定义滚动条来优化用户体验。 “jquery-layout”是一个强大的JavaScript插件，它允许开发者在网页上创建多区域、响应式的布局。该插件基于jQuery，提供了灵活的配置...
example-jquery-shim, 通过shim配置使用jQuery和jQuery插件的示例项目 在 shim 配置中使用jQuery和 require.js的示例。本示例显示一种用 require.js. jQuery本身寄存器加载jQuery和jQuery插件的方法，可以以轻松加载...
"jQuery AJAX简易计算器"是一个实用示例，展示了如何利用jQuery和AJAX实现一个简单的动态计算功能。通过这个项目，开发者可以学习到如何在客户端和服务器之间有效地交换数据，以及如何更新页面内容而无需刷新整个...