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 name="code">$('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});