web开发小记

zfwdl2005

浏览: 239432 次
性别:
来自: 西安

最近访客更多访客>>

DLL13321B

爱和阿米

mengxiang.com

lnl472428856

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web平台开发日志

【界面开发】
【布局】：这里有界面布局的很好的插件
http://layout.jquery-dev.net/index.cfm
1.很简单的demo

<html>
	<head>
		<title>布局界面1 只依赖jquery jquery.layout.js</title>
		<script type="text/javascript" src="../jquery/jquery-1.6.2.js"></script>
		<script type="text/javascript" src="../layout/jquery.layout.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('body').layout( {
					applyDefaultStyles : true
				});
			});
		</script>
	</head>
	<body>
		<div class="ui-layout-center">Center</div>
		<div class="ui-layout-north">North</div>
		<div class="ui-layout-south">South</div>
		<div class="ui-layout-east">East</div>
		<div class="ui-layout-west">West</div>
	</body>
</html>

2.在上面的例子中，我们可以通过调整默认的参数值来实现不同的效果
常用参数说明

$('body').layout( {
applyDefaultStyles: 	false		
// apply basic styles directly to resizers & buttons? If not, then stylesheet must handle it
		,	
closable:				true		// pane can open & close
		,	
resizable:				true		// when open, pane can be resized 
		,	
slidable:				true		// when closed, pane can 'slide' open over other panes - closes on mouse-out
		//,	paneSelector:			[ ]			// MUST be pane-specific!
		,	
contentSelector:		defaults.contentSelector	// INNER div/element to auto-size so only it scrolls, not the entire pane!
		,	contentIgnoreSelector:	defaults.contentIgnoreSelector	// elem(s) to 'ignore' when measuring 'content'
		,	paneClass:				defaults.paneClass		// border-Pane - default: 'ui-layout-pane'
		,	resizerClass:			defaults.resizerClass	// Resizer Bar		- default: 'ui-layout-resizer'
		,	togglerClass:			defaults.togglerClass	// Toggler Button	- default: 'ui-layout-toggler'
		,	buttonClass:			defaults.buttonClass	// CUSTOM Buttons	- default: 'ui-layout-button-toggle/-open/-close/-pin'
		,	resizerDragOpacity:		1			// option for ui.draggable
		//,	resizerCursor:			""			// MUST be pane-specific - cursor when over resizer-bar
		,	maskIframesOnResize:	true		// true = all iframes OR = iframe-selector(s) - adds masking-div during resizing/dragging
		//,	size:					100			// inital size of pane - defaults are set 'per pane'
		,	minSize:				0			// when manually resizing a pane
		,	maxSize:				0			// ditto, 0 = no limit
		,	spacing_open:			6			// space between pane and adjacent panes - when pane is 'open'
		,	spacing_closed:			6			// ditto - when pane is 'closed'
		,	togglerLength_open:		50			// Length = WIDTH of toggler button on north/south edges - HEIGHT on east/west edges
		,	togglerLength_closed: 	50			// 100% OR -1 means 'full height/width of resizer bar' - 0 means 'hidden'
		,	togglerAlign_open:		"center"	// top/left, bottom/right, center, OR...
		,	togglerAlign_closed:	"center"	// 1 => nn = offset from top/left, -1 => -nn == offset from bottom/right
		,	togglerTip_open:		"Close"		// Toggler tool-tip (title)
		,	togglerTip_closed:		"Open"		// ditto
		,	resizerTip:				"Resize"	// Resizer tool-tip (title)
		,	sliderTip:				"Slide Open" // resizer-bar triggers 'sliding' when pane is closed
		,	sliderCursor:			"pointer"	// cursor when resizer-bar will trigger 'sliding'
		,	slideTrigger_open:		"click"		// click, dblclick, mouseover
		,	slideTrigger_close:		"mouseout"	// click, mouseout
		,	hideTogglerOnSlide:		false		// when pane is slid-open, should the toggler show?
		,	togglerContent_open:	""			// text or HTML to put INSIDE the toggler
		,	togglerContent_closed:	""			// ditto
		,	showOverflowOnHover:	false		// will bind allowOverflow() utility to pane.onMouseOver
		,	enableCursorHotkey:		true		// enabled 'cursor' hotkeys
		//,	customHotkey:			""			// MUST be pane-specific - EITHER a charCode OR a character
		,	customHotkeyModifier:	"SHIFT"		// either 'SHIFT', 'CTRL' or 'CTRL+SHIFT' - NOT 'ALT'
		//	NOTE: fxSss_open & fxSss_close options (eg: fxName_open) are auto-generated if not passed
		,	fxName:					"slide" 	// ('none' or blank), slide, drop, scale
		,	fxSpeed:				null		// slow, normal, fast, 200, nnn - if passed, will OVERRIDE fxSettings.duration
		,	fxSettings:				{}			// can be passed, eg: { easing: "easeOutBounce", duration: 1500 }
		,	initClosed:				false		// true = init pane as 'closed'
		,	initHidden: 			false 		// true = init pane as 'hidden' - no resizer or spacing
});

3.一些常用的功能点
var layout = $("body").layout({xxxx:true});
layout.close("east");//关闭
layout.open("weast");//打开

4.对样式的一些设置
// 'important' required ONLY when applyDefaultStyles=true
.ui-layout-pane{
background-color: #ffeeff!important;
}
.ui-layout-resizer{
background-color: #ffeeff!important;
}
5.对tabs的处理
5.1 var tabArr = $( "li", $tabs ); 查找tabs下面的li
5.2 $tabs.tabs("select",tabArr.length-1); 选中tabs
5.3 $(ui.panel).append(tab_content); 增加内容

6.表格处理插件
Datatables
http://datatables.net/
7.树处理
http://code.google.com/p/jquerytree/
8.ext4.0 教程
http://www.uspcat.com/forum.php?mod=viewthread&tid=197

【搜索引擎Apache Lucene 】
【权限管理】
http://www.cnblogs.com/hxling/archive/2011/08/16/2141498.html
【数据库开发】

select org.id ,org.org_name
from sm_o_org org
connect by prior id = org.parent_id
start with id = '3f288484336c418501336c43d1b40003'

jquery.layout.all-1.2.0.zip (125.7 KB)
下载次数: 5

DataTables-1.8.2.zip (2.1 MB)
下载次数: 11

JQuery_zTree_v2.6.zip (1 MB)
下载次数: 2

JQuery_zTree_v3.0_beta.zip (163.9 KB)
下载次数: 3

treeview.rar (4.5 MB)
下载次数: 5

分享到：

android开发小记 | mule 开发使用包

2011-11-29 23:36
浏览 1255
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论