JavaScript DHTML/GUI Components/ToolBar
Содержание
Dragable and sortable toolbar
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head>
<title>Toolbars</title>
<style rel="stylesheet" type="text/css"> body {
font-family: Verdana, Arial, sans-serif; font-size: 14px; margin: 0px; padding: 0px 20px; min-width: 30em;
} h1, h2, h3, h4, h5, h6 {
margin: 0px;
} h2, h3, h4, h5, h6 {
font-family: Optima, Verdana, sans-serif; margin: 1em -10px 0.5em -10px;
} h2 { margin-top: 1.5em; } h1 {
font-size: 22px; margin-top: 0px; margin-bottom: 0px; padding: 5px 10px 5px 10px; color: #fff; text-shadow: #8760c1 0px 0px 5px;
} .breadcrumb {
list-style-type: none; padding: 0px; padding-left: 20px; margin: 0px; margin-bottom: 10px; border-style: solid; border-color: #8760c1; border-width: 1px 0px; height: 19px;
} .breadcrumb li.first {
border-left: 1px solid #8760c1;
} .breadcrumb li {
float: left; border-right: 1px solid #8760c1; padding: 3px 10px;
} .breadcrumb li a {
display: block; text-decoration: none;
} .breadcrumb li a:hover {
text-decoration: underline;
} h1, .breadcrumb {
font-family: Skia; background-color: #ccaaff; margin-left: -20px; margin-right: -20px;
} h2 { font-size: 22px; } h3 { font-size: 20px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14px; } p {
margin-top: 0px; margin-bottom: 1em; text-align: justify; max-width: 40em;
} li p {
margin-bottom: 0.75em;
} br.clear {
clear: both; margin: 0px;
} .sidebar {
margin: 0px 10px 30px 30px; clear: right; float: right; width: 134px; border: 1px solid #8760c1; background-color: #ccaaff; padding: 5px; font-size: 11px; font-family: "Lucida Grande", Geneva, Verdana, Helvetica, Arial, sans-serif; -moz-border-radius: 0px 10px 0px 10px; border-radius: 0px 10px 0px 10px;
} .sidebar, .sidebar p, .sidebar li {
text-align: left;
} .sidebar ul {
margin: 0px; margin-left: 1.5em; padding: 0px; list-style-type: circle;
} td.caption {
font-size: 12px; text-align: center;
}
- copyright {
margin-bottom: 1em; text-align: center; font-size: 11px;
} blockquote {
font-size: 13px; font-style: italic;
} blockquote .attribution {
font-weight: normal; font-style: normal; text-align: right;
} a { text-decoration: none; } a:hover { text-decoration: underline; } a:active { background-color: #ffd700; }
</style>
<style rel="stylesheet" type="text/css"> ul.toolbar {
list-style-type: none; background-color: #f0e7d7; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; margin: 0px; padding: 0px;
} ul.verticaltoolbar {
width: 25px; padding-left: 1px;
} ul.horizontaltoolbar {
height: 25px; padding-top: 1px; overflow: hidden;
} ul.toolbar li {
display: block;
} ul.horizontaltoolbar li {
float: left;
} ul.toolbar li.button {
height: 24px; width: 24px;
} ul.verticaltoolbar li.space {
height: 12px; width: 24px;
} ul.horizontaltoolbar li.space {
height: 24px; width: 12px;
} ul.verticaltoolbar li.separator {
height: 0px; width: 20px; margin-top: 5px; margin-left: 2px; margin-bottom: 5px; border-width: 1px; border-style: solid; border-color: #aaab9c #fff #fff #ccc;
} ul.horizontaltoolbar li.separator {
height: 20px; width: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; border-width: 1px; border-style: solid; border-color: #aaab9c #fff #fff #ccc; border-color: #fff #fff #ccc #aaab9c;
} ul.toolbar li.button a {
text-decoration: none; color: #000;
} ul.toolbar li.button a img, ul.toolbar li.button a b {
height: 22px; width: 22px; text-align: center; vertical-align: middle; display: block; border-width: 1px; border-color: #f0e7d7; border-style: solid;
} ul.verticaltoolbar li.button a img, ul.verticaltoolbar li.button a b {
margin: 1px 0px;
} ul.horizontaltoolbar li.button a img, ul.horizontaltoolbar li.button a b {
margin: 0px 1px;
} ul.toolbar li.button a img:hover, ul.toolbar li.button a b:hover {
border-color: #ffe #aaab9c #ccc #fff; background: #f7f2ea;
} ul.toolbar li.button a img:active, ul.toolbar li.button a img.active, ul.toolbar li.button a b:active, ul.toolbar li.button a b.active {
border-color: #aaab9c #fff #fff #ccc; background: #f7f2ea;
} ul.toolbar li label {
display: block; font-family: Arial; font-size: 12px; color: #000; margin-top: 1px; margin-right: 6px; vertical-align: baseline;
} ul.toolbar li label input, ul.toolbar li input, ul.toolbar li label select, ul.toolbar li select {
font-size: 11px; color: #000;
}
</style> <style type="text/css">
.statusbox {
font-size: 13px;
font-family: Monaco, monospace;
width: 15em;
}
b {
font-weight: normal;
}
b.bold {
font-weight: bold;
}
b.underline {
text-decoration: underline;
}
b.italic {
font-variant: italic;
}
</style>
<script language="JavaScript" type="text/javascript">
/*
Copyright (c) 2005 Tim Taylor Consulting <http://tool-man.org/>
Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
- /
var ToolMan = {
events : function() {
if (!ToolMan._eventsFactory) throw "ToolMan Events module isn"t loaded";
return ToolMan._eventsFactory
},
css : function() {
if (!ToolMan._cssFactory) throw "ToolMan CSS module isn"t loaded";
return ToolMan._cssFactory
},
coordinates : function() {
if (!ToolMan._coordinatesFactory) throw "ToolMan Coordinates module isn"t loaded";
return ToolMan._coordinatesFactory
},
drag : function() {
if (!ToolMan._dragFactory) throw "ToolMan Drag module isn"t loaded";
return ToolMan._dragFactory
},
dragsort : function() {
if (!ToolMan._dragsortFactory) throw "ToolMan DragSort module isn"t loaded";
return ToolMan._dragsortFactory
},
helpers : function() {
return ToolMan._helpers
},
cookies : function() {
if (!ToolMan._cookieOven) throw "ToolMan Cookie module isn"t loaded";
return ToolMan._cookieOven
},
junkdrawer : function() {
return ToolMan._junkdrawer
}
} ToolMan._helpers = {
map : function(array, func) {
for (var i = 0, n = array.length; i < n; i++) func(array[i])
},
nextItem : function(item, nodeName) {
if (item == null) return
var next = item.nextSibling
while (next != null) {
if (next.nodeName == nodeName) return next
next = next.nextSibling
}
return null
},
previousItem : function(item, nodeName) {
var previous = item.previousSibling
while (previous != null) {
if (previous.nodeName == nodeName) return previous
previous = previous.previousSibling
}
return null
},
moveBefore : function(item1, item2) {
var parent = item1.parentNode
parent.removeChild(item1)
parent.insertBefore(item1, item2)
},
moveAfter : function(item1, item2) {
var parent = item1.parentNode
parent.removeChild(item1)
parent.insertBefore(item1, item2 ? item2.nextSibling : null)
}
} /**
* scripts without a proper home * * stuff here is subject to change unapologetically and without warning */
ToolMan._junkdrawer = {
serializeList : function(list) {
var items = list.getElementsByTagName("li")
var array = new Array()
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]
array.push(ToolMan.junkdrawer()._identifier(item))
}
return array.join("|")
},
inspectListOrder : function(id) {
alert(ToolMan.junkdrawer().serializeList(document.getElementById(id)))
},
restoreListOrder : function(listID) {
var list = document.getElementById(listID)
if (list == null) return
var cookie = ToolMan.cookies().get("list-" + listID)
if (!cookie) return;
var IDs = cookie.split("|")
var items = ToolMan.junkdrawer()._itemsByID(list)
for (var i = 0, n = IDs.length; i < n; i++) {
var itemID = IDs[i]
if (itemID in items) {
var item = items[itemID]
list.removeChild(item)
list.insertBefore(item, null)
}
}
},
_identifier : function(item) {
var trim = ToolMan.junkdrawer().trim
var identifier
identifier = trim(item.getAttribute("id"))
if (identifier != null && identifier.length > 0) return identifier;
identifier = trim(item.getAttribute("itemID"))
if (identifier != null && identifier.length > 0) return identifier;
// FIXME: strip out special chars or make this an MD5 hash or something
return trim(item.innerHTML)
},
_itemsByID : function(list) {
var array = new Array()
var items = list.getElementsByTagName("li")
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]
array[ToolMan.junkdrawer()._identifier(item)] = item
}
return array
},
trim : function(text) {
if (text == null) return null
return text.replace(/^(\s+)?(.*\S)(\s+)?$/, "$2")
}
} </script>
<script language="JavaScript" type="text/javascript"> /* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */ ToolMan._eventsFactory = {
fix : function(event) {
if (!event) event = window.event
if (event.target) {
if (event.target.nodeType == 3) event.target = event.target.parentNode
} else if (event.srcElement) {
event.target = event.srcElement
}
return event
},
register : function(element, type, func) {
if (element.addEventListener) {
element.addEventListener(type, func, false)
} else if (element.attachEvent) {
if (!element._listeners) element._listeners = new Array()
if (!element._listeners[type]) element._listeners[type] = new Array()
var workaroundFunc = function() {
func.apply(element, new Array())
}
element._listeners[type][func] = workaroundFunc
element.attachEvent("on" + type, workaroundFunc)
}
},
unregister : function(element, type, func) {
if (element.removeEventListener) {
element.removeEventListener(type, func, false)
} else if (element.detachEvent) {
if (element._listeners
&& element._listeners[type]
&& element._listeners[type][func]) {
element.detachEvent("on" + type,
element._listeners[type][func])
}
}
}
} </script>
<script language="JavaScript" type="text/javascript"> /* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */ // TODO: write unit tests ToolMan._cssFactory = {
readStyle : function(element, property) {
if (element.style[property]) {
return element.style[property]
} else if (element.currentStyle) {
return element.currentStyle[property]
} else if (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle(element, null)
return style.getPropertyValue(property)
} else {
return null
}
}
}
</script>
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
/* FIXME: assumes position styles are specified in "px" */
ToolMan._coordinatesFactory = {
create : function(x, y) {
// FIXME: Safari won"t parse "throw" and aborts trying to do anything with this file
//if (isNaN(x) || isNaN(y)) throw "invalid x,y: " + x + "," + y
return new _ToolManCoordinate(this, x, y)
},
origin : function() {
return this.create(0, 0)
},
/*
* FIXME: Safari 1.2, returns (0,0) on absolutely positioned elements
*/
topLeftPosition : function(element) {
var left = parseInt(ToolMan.css().readStyle(element, "left"))
var left = isNaN(left) ? 0 : left
var top = parseInt(ToolMan.css().readStyle(element, "top"))
var top = isNaN(top) ? 0 : top
return this.create(left, top)
},
bottomRightPosition : function(element) {
return this.topLeftPosition(element).plus(this._size(element))
},
topLeftOffset : function(element) {
var offset = this._offset(element)
var parent = element.offsetParent
while (parent) {
offset = offset.plus(this._offset(parent))
parent = parent.offsetParent
}
return offset
},
bottomRightOffset : function(element) {
return this.topLeftOffset(element).plus(
this.create(element.offsetWidth, element.offsetHeight))
},
scrollOffset : function() {
if (window.pageXOffset) {
return this.create(window.pageXOffset, window.pageYOffset)
} else if (document.documentElement) {
return this.create(
document.body.scrollLeft + document.documentElement.scrollLeft,
document.body.scrollTop + document.documentElement.scrollTop)
} else if (document.body.scrollLeft >= 0) {
return this.create(document.body.scrollLeft, document.body.scrollTop)
} else {
return this.create(0, 0)
}
},
clientSize : function() {
if (window.innerHeight >= 0) {
return this.create(window.innerWidth, window.innerHeight)
} else if (document.documentElement) {
return this.create(document.documentElement.clientWidth,
document.documentElement.clientHeight)
} else if (document.body.clientHeight >= 0) {
return this.create(document.body.clientWidth,
document.body.clientHeight)
} else {
return this.create(0, 0)
}
},
/**
* mouse coordinate relative to the window (technically the
* browser client area) i.e. the part showing your page
*
* NOTE: in Safari the coordinate is relative to the document
*/
mousePosition : function(event) {
event = ToolMan.events().fix(event)
return this.create(event.clientX, event.clientY)
},
/**
* mouse coordinate relative to the document
*/
mouseOffset : function(event) {
event = ToolMan.events().fix(event)
if (event.pageX >= 0 || event.pageX < 0) {
return this.create(event.pageX, event.pageY)
} else if (event.clientX >= 0 || event.clientX < 0) {
return this.mousePosition(event).plus(this.scrollOffset())
}
},
_size : function(element) {
/* TODO: move to a Dimension class */
return this.create(element.offsetWidth, element.offsetHeight)
},
_offset : function(element) {
return this.create(element.offsetLeft, element.offsetTop)
}
} function _ToolManCoordinate(factory, x, y) {
this.factory = factory this.x = isNaN(x) ? 0 : x this.y = isNaN(y) ? 0 : y
} _ToolManCoordinate.prototype = {
toString : function() {
return "(" + this.x + "," + this.y + ")"
},
plus : function(that) {
return this.factory.create(this.x + that.x, this.y + that.y)
},
minus : function(that) {
return this.factory.create(this.x - that.x, this.y - that.y)
},
min : function(that) {
return this.factory.create(
Math.min(this.x , that.x), Math.min(this.y , that.y))
},
max : function(that) {
return this.factory.create(
Math.max(this.x , that.x), Math.max(this.y , that.y))
},
constrainTo : function (one, two) {
var min = one.min(two)
var max = one.max(two)
return this.max(min).min(max)
},
distance : function (that) {
return Math.sqrt(Math.pow(this.x - that.x, 2) + Math.pow(this.y - that.y, 2))
},
reposition : function(element) {
element.style["top"] = this.y + "px"
element.style["left"] = this.x + "px"
}
} </script>
<script language="JavaScript" type="text/javascript"> /* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */ ToolMan._dragFactory = {
createSimpleGroup : function(element, handle) {
handle = handle ? handle : element
var group = this.createGroup(element)
group.setHandle(handle)
group.transparentDrag()
group.onTopWhileDragging()
return group
},
createGroup : function(element) {
var group = new _ToolManDragGroup(this, element)
var position = ToolMan.css().readStyle(element, "position")
if (position == "static") {
element.style["position"] = "relative"
} else if (position == "absolute") {
/* for Safari 1.2 */
ToolMan.coordinates().topLeftOffset(element).reposition(element)
}
// TODO: only if ToolMan.isDebugging()
group.register("draginit", this._showDragEventStatus)
group.register("dragmove", this._showDragEventStatus)
group.register("dragend", this._showDragEventStatus)
return group
},
_showDragEventStatus : function(dragEvent) {
window.status = dragEvent.toString()
},
constraints : function() {
return this._constraintFactory
},
_createEvent : function(type, event, group) {
return new _ToolManDragEvent(type, event, group)
}
} function _ToolManDragGroup(factory, element) {
this.factory = factory this.element = element this._handle = null this._thresholdDistance = 0 this._transforms = new Array() // TODO: refactor into a helper object, move into events.js this._listeners = new Array() this._listeners["draginit"] = new Array() this._listeners["dragstart"] = new Array() this._listeners["dragmove"] = new Array() this._listeners["dragend"] = new Array()
} _ToolManDragGroup.prototype = {
/*
* TODO:
* - unregister(type, func)
* - move custom event listener stuff into Event library
* - keyboard nudging of "selected" group
*/
setHandle : function(handle) {
var events = ToolMan.events()
handle.toolManDragGroup = this
events.register(handle, "mousedown", this._dragInit)
handle.onmousedown = function() { return false }
if (this.element != handle)
events.unregister(this.element, "mousedown", this._dragInit)
},
register : function(type, func) {
this._listeners[type].push(func)
},
addTransform : function(transformFunc) {
this._transforms.push(transformFunc)
},
verticalOnly : function() {
this.addTransform(this.factory.constraints().vertical())
},
horizontalOnly : function() {
this.addTransform(this.factory.constraints().horizontal())
},
setThreshold : function(thresholdDistance) {
this._thresholdDistance = thresholdDistance
},
transparentDrag : function(opacity) {
var opacity = typeof(opacity) != "undefined" ? opacity : 0.75;
var originalOpacity = ToolMan.css().readStyle(this.element, "opacity")
this.register("dragstart", function(dragEvent) {
var element = dragEvent.group.element
element.style.opacity = opacity
element.style.filter = "alpha(opacity=" + (opacity * 100) + ")"
})
this.register("dragend", function(dragEvent) {
var element = dragEvent.group.element
element.style.opacity = originalOpacity
element.style.filter = "alpha(opacity=100)"
})
},
onTopWhileDragging : function(zIndex) {
var zIndex = typeof(zIndex) != "undefined" ? zIndex : 100000;
var originalZIndex = ToolMan.css().readStyle(this.element, "z-index")
this.register("dragstart", function(dragEvent) {
dragEvent.group.element.style.zIndex = zIndex
})
this.register("dragend", function(dragEvent) {
dragEvent.group.element.style.zIndex = originalZIndex
})
},
_dragInit : function(event) {
event = ToolMan.events().fix(event)
var group = document.toolManDragGroup = this.toolManDragGroup
var dragEvent = group.factory._createEvent("draginit", event, group)
group._isThresholdExceeded = false
group._initialMouseOffset = dragEvent.mouseOffset
group._grabOffset = dragEvent.mouseOffset.minus(dragEvent.topLeftOffset)
ToolMan.events().register(document, "mousemove", group._drag)
document.onmousemove = function() { return false }
ToolMan.events().register(document, "mouseup", group._dragEnd)
group._notifyListeners(dragEvent)
},
_drag : function(event) {
event = ToolMan.events().fix(event)
var coordinates = ToolMan.coordinates()
var group = this.toolManDragGroup
if (!group) return
var dragEvent = group.factory._createEvent("dragmove", event, group)
var newTopLeftOffset = dragEvent.mouseOffset.minus(group._grabOffset)
// TODO: replace with DragThreshold object
if (!group._isThresholdExceeded) {
var distance =
dragEvent.mouseOffset.distance(group._initialMouseOffset)
if (distance < group._thresholdDistance) return
group._isThresholdExceeded = true
group._notifyListeners(
group.factory._createEvent("dragstart", event, group))
}
for (i in group._transforms) {
var transform = group._transforms[i]
newTopLeftOffset = transform(newTopLeftOffset, dragEvent)
}
var dragDelta = newTopLeftOffset.minus(dragEvent.topLeftOffset)
var newTopLeftPosition = dragEvent.topLeftPosition.plus(dragDelta)
newTopLeftPosition.reposition(group.element)
dragEvent.transformedMouseOffset = newTopLeftOffset.plus(group._grabOffset)
group._notifyListeners(dragEvent)
var errorDelta = newTopLeftOffset.minus(coordinates.topLeftOffset(group.element))
if (errorDelta.x != 0 || errorDelta.y != 0) {
coordinates.topLeftPosition(group.element).plus(errorDelta).reposition(group.element)
}
},
_dragEnd : function(event) {
event = ToolMan.events().fix(event)
var group = this.toolManDragGroup
var dragEvent = group.factory._createEvent("dragend", event, group)
group._notifyListeners(dragEvent)
this.toolManDragGroup = null
ToolMan.events().unregister(document, "mousemove", group._drag)
document.onmousemove = null
ToolMan.events().unregister(document, "mouseup", group._dragEnd)
},
_notifyListeners : function(dragEvent) {
var listeners = this._listeners[dragEvent.type]
for (i in listeners) {
listeners[i](dragEvent)
}
}
} function _ToolManDragEvent(type, event, group) {
this.type = type this.group = group this.mousePosition = ToolMan.coordinates().mousePosition(event) this.mouseOffset = ToolMan.coordinates().mouseOffset(event) this.transformedMouseOffset = this.mouseOffset this.topLeftPosition = ToolMan.coordinates().topLeftPosition(group.element) this.topLeftOffset = ToolMan.coordinates().topLeftOffset(group.element)
} _ToolManDragEvent.prototype = {
toString : function() {
return "mouse: " + this.mousePosition + this.mouseOffset + " " +
"xmouse: " + this.transformedMouseOffset + " " +
"left,top: " + this.topLeftPosition + this.topLeftOffset
}
} ToolMan._dragFactory._constraintFactory = {
vertical : function() {
return function(coordinate, dragEvent) {
var x = dragEvent.topLeftOffset.x
return coordinate.x != x
? coordinate.factory.create(x, coordinate.y)
: coordinate
}
},
horizontal : function() {
return function(coordinate, dragEvent) {
var y = dragEvent.topLeftOffset.y
return coordinate.y != y
? coordinate.factory.create(coordinate.x, y)
: coordinate
}
}
} </script>
<script language="JavaScript" type="text/javascript"> /* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */ ToolMan._dragsortFactory = {
makeSortable : function(item) {
var group = ToolMan.drag().createSimpleGroup(item)
group.register("dragstart", this._onDragStart)
group.register("dragmove", this._onDragMove)
group.register("dragend", this._onDragEnd)
return group
},
/**
* Iterates over a list"s items, making them sortable, applying
* optional functions to each item.
*
* example: makeListSortable(myList, myFunc1, myFunc2, ... , myFuncN)
*/
makeListSortable : function(list) {
var helpers = ToolMan.helpers()
var coordinates = ToolMan.coordinates()
var items = list.getElementsByTagName("li")
helpers.map(items, function(item) {
var dragGroup = dragsort.makeSortable(item)
dragGroup.setThreshold(4)
var min, max
dragGroup.addTransform(function(coordinate, dragEvent) {
return coordinate.constrainTo(min, max)
})
dragGroup.register("dragstart", function() {
var items = list.getElementsByTagName("li")
min = max = coordinates.topLeftOffset(items[0])
for (var i = 1, n = items.length; i < n; i++) {
var offset = coordinates.topLeftOffset(items[i])
min = min.min(offset)
max = max.max(offset)
}
})
})
for (var i = 1, n = arguments.length; i < n; i++)
helpers.map(items, arguments[i])
},
_onDragStart : function(dragEvent) {
},
_onDragMove : function(dragEvent) {
var helpers = ToolMan.helpers()
var coordinates = ToolMan.coordinates()
var item = dragEvent.group.element
var xmouse = dragEvent.transformedMouseOffset
var moveTo = null
var previous = helpers.previousItem(item, item.nodeName)
while (previous != null) {
var bottomRight = coordinates.bottomRightOffset(previous)
if (xmouse.y <= bottomRight.y && xmouse.x <= bottomRight.x) {
moveTo = previous
}
previous = helpers.previousItem(previous, item.nodeName)
}
if (moveTo != null) {
helpers.moveBefore(item, moveTo)
return
}
var next = helpers.nextItem(item, item.nodeName)
while (next != null) {
var topLeft = coordinates.topLeftOffset(next)
if (topLeft.y <= xmouse.y && topLeft.x <= xmouse.x) {
moveTo = next
}
next = helpers.nextItem(next, item.nodeName)
}
if (moveTo != null) {
helpers.moveBefore(item, helpers.nextItem(moveTo, item.nodeName))
return
}
},
_onDragEnd : function(dragEvent) {
ToolMan.coordinates().create(0, 0).reposition(dragEvent.group.element)
}
} </script> <script language="JavaScript"> </script></head>
<body>
Toolbars
These toolbars represent a rough proof-of-concept. More like a "Golly gee, look what I can do" than an actually suggestion for how to do something. So in this case, golly gee, you can rearrange the toolbar buttons...
|
|
Open
|
The horizontal toolbar is built from an identical list as the vertical toolbar. Different CSS styles make the difference.
Copyright 2005 Tim Taylor Consulting
(<a href="http://tool-man.org/examples/LICENSE.txt">license</a>)
</body></html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/toolbars_files.zip">toolbars_files.zip( 9 k)</a>
The Complete Source of the Toolbar
<source lang="html4strict">
/* JavaScript Unleashed, Third Edition by Richard Wagner and R. Allen Wyke ISBN: 067231763X Publisher Sams CopyRight 2000
- /
<html> <head>
<title>JavaScript Unleashed</title> <script type="text/javascript" language="JavaScript1.2"> </script>
</head> <body bgcolor="#ffffff">
<a href="javascript:process("back")"
onmouseup="rollImage("0","up")"
onmousedown="rollImage("0","down")"
onmouseout="rollImage("0","out")"
onmouseover="rollImage("0","over")">
<img border="0" src="back.gif" width="24" height="24" alt="Back">
</a>
|
<a href="javascript:process("forward")"
onmouseup="rollImage("1","up")"
onmousedown="rollImage("1","down")"
onmouseout="rollImage("1","out")"
onmouseover="rollImage("1","over")">
<img border="0" src="forward.gif" width="24" height="24"
alt="Forward"></a>
|
<a href="javascript:process("home")"
onmouseup="rollImage("2","up")"
onmousedown="rollImage("2","down")"
onmouseout="rollImage("2","out")"
onmouseover="rollImage("2","over")">
<img border="0" src="home.gif" width="24" height="24"
alt="Home"></a>
|
<a href="javascript:process("reload")"
onmouseup="rollImage("3","up")"
onmousedown="rollImage("3","down")"
onmouseout="rollImage("3","out")"
onmouseover="rollImage("3","over")">
<img border="0" src="reload.gif" width="24" height="24"
alt="Reload"></a>
|
<a href="javascript:process("find")"
onmouseup="rollImage("4","up")"
onmousedown="rollImage("4","down")"
onmouseout="rollImage("4","out")"
onmouseover="rollImage("4","over")">
<img border="0" src="search.gif" width="24" height="24"
alt="Search"></a>
|
<a href="javascript:process("print")"
onmouseup="rollImage("5","up")"
onmousedown="rollImage("5","down")"
onmouseout="rollImage("5","out")"
onmouseover="rollImage("5","over")">
<img border="0" src="print.gif" width="24" height="24"
alt="Print"></a>
|
<form name="netsite">
Location:
<input type="text" size="40" value="Enter a URL here" name="where">
<input type="button" value="Go" onclick="takeBrowser(this.form)">
</form>
|
|||||
Result of Date.getTime() (reload verification):
<script type="text/javascript" language="JavaScript1.2">
</script>
|
|||||
</body> </html>
</source>
<source lang="html4strict">
<html> <script language="JavaScript" src="widgets/jsobjects.js"></script> <script>
//Definindo linguagem - pt = portugues. Mensagens de erro serao apresentadas nesta lingua
lang = "pt";
//criando o documento base para adicionar os objetos
docbody = new JsDocument("docbody");
//Funcoes extras para mostrar a adicao de eventos aos objetos:
//Esta funcaum eh adicionada ao evento change do combobox
function testeChange(e)
{
alert("mudou");
}
//funcao utilizada pelos botoes para transferir itens de um listbox para outro
function transfer1_2()
{
transferListItens(listbox1, listbox2);
}
//funcao utilizada pelos botoes para transferir itens de um listbox para outro
function transfer2_1()
{
transferListItens(listbox2, listbox1);
}
//funcao so para retornar o valor atual do calendario
function teste(e)
{
alert(cal.getValue());
}
//funcao para ver se o treeview esta retornando ok
function toolbarClick()
{
alert("Clicou no toolbar");
}
//funcaum para adicionar itens no listview
function lstvaddItems()
{
//gerador de valor randomico para o nome dos objetos criados
itemname = randomizer();
//Menu do Item
menu = eval(itemname + "_menu = new JsMenu(""+itemname+"_menu");");
menu_adicionar = eval(itemname + "_menu_adicionar = new JsMenuItem("" + itemname + "_menu_adicionar")");
menu_adicionar.setValue("Adicionar");
menu_adicionar.setIcon("images/new.gif");
menu_adicionar.setEvent("click", lstvaddItems);
menu.addItem(menu_adicionar);
menu_remover = eval(itemname + "_menu_remover = new JsMenuItem("" + itemname + "_menu_remover")");
menu_remover.setValue("Remover");
menu_remover.setIcon("images/delete.gif");
menu_remover.setEvent("click", lstvdelItems);
menu_remover.setAttribute("lstparent",itemname);
menu.addItem(menu_remover);
listviewitem = eval (itemname + " = new JsListViewItem(""+itemname+"");");
list_teste.addItem(listviewitem);
check = eval ("check_test"+itemname+" = new JsCheckBox("check_test"+itemname+"")");
check.setLabel("Teste");
check.setValue("true");
listviewitem.addItem(randomizer(),"",true);
listviewitem.addItem(check);
listviewitem.addItem("Vai!!! Da um duplo clique logo!","",true);
listviewitem.setMenu(menu);
}
//funcaum para remover itens do listview
function lstvdelItems(e)
{
if (browserType == "ie")
{
e = window.event;
obj = e.srcElement;
}
else
{
obj = e.target;
}
var lsitem = eval(obj.lstparent);
list_teste.delItem(lsitem);
temMudanca = true;
}
function treeaddItems()
{
//gerador de valor randomico para o nome dos objetos criados
itemname = randomizer();
//Menu do Item
menu = eval(itemname + "_menu = new JsMenu(""+itemname+"_menu");");
menu_adicionar = eval(itemname + "_menu_adicionar = new JsMenuItem("" + itemname + "_menu_adicionar")");
menu_adicionar.setValue("Adicionar");
menu_adicionar.setIcon("images/new.gif");
menu_adicionar.setEvent("click", treeaddItems);
menu.addItem(menu_adicionar);
menu_adicionarsub = eval(itemname + "_menu_adicionarsub = new JsMenuItem("" + itemname + "_menu_adicionarsub")");
menu_adicionarsub.setValue("Adicionar SubItem");
menu_adicionarsub.setIcon("images/new.gif");
menu_adicionarsub.setEvent("click", treeaddSubItems);
menu_adicionarsub.setAttribute("lstparent",itemname);
menu.addItem(menu_adicionarsub);
menu_remover = eval(itemname + "_menu_remover = new JsMenuItem("" + itemname + "_menu_remover")");
menu_remover.setValue("Remover");
menu_remover.setIcon("images/delete.gif");
menu_remover.setEvent("click", treedelItems);
menu_remover.setAttribute("lstparent",itemname);
menu.addItem(menu_remover);
listviewitem = eval (itemname + " = new JsListViewItem(""+itemname+"");");
tree_teste.addItem(listviewitem);
check = eval ("check_test"+itemname+" = new JsCheckBox("check_test"+itemname+"")");
check.setLabel("Teste");
check.setValue("true");
listviewitem.addItem(randomizer(),"",true);
listviewitem.addItem(check);
listviewitem.addItem("Vai!!! Da um duplo clique logo!","",true);
listviewitem.setMenu(menu);
}
function treeaddSubItems(e)
{
if (browserType == "ie")
{
e = window.event;
obj = e.srcElement;
}
else
{
obj = e.target;
}
var lsitem = eval(obj.lstparent);
//gerador de valor randomico para o nome dos objetos criados
itemname = randomizer();
//Menu do Item
menu = eval(itemname + "_menu = new JsMenu(""+itemname+"_menu");");
menu_adicionar = eval(itemname + "_menu_adicionar = new JsMenuItem("" + itemname + "_menu_adicionar")");
menu_adicionar.setValue("Adicionar");
menu_adicionar.setIcon("images/new.gif");
menu_adicionar.setEvent("click", treeaddItems);
menu.addItem(menu_adicionar);
menu_adicionarsub = eval(itemname + "_menu_adicionarsub = new JsMenuItem("" + itemname + "_menu_adicionarsub")");
menu_adicionarsub.setValue("Adicionar SubItem");
menu_adicionarsub.setIcon("images/new.gif");
menu_adicionarsub.setEvent("click", treeaddSubItems);
menu_adicionarsub.setAttribute("lstparent",itemname);
menu.addItem(menu_adicionarsub);
menu_remover = eval(itemname + "_menu_remover = new JsMenuItem("" + itemname + "_menu_remover")");
menu_remover.setValue("Remover");
menu_remover.setIcon("images/delete.gif");
menu_remover.setEvent("click", treedelItems);
menu_remover.setAttribute("lstparent",itemname);
menu.addItem(menu_remover);
listviewitem = eval (itemname + " = new JsListViewItem(""+itemname+"");");
lsitem.addItem(listviewitem);
check = eval ("check_test"+itemname+" = new JsCheckBox("check_test"+itemname+"")");
check.setLabel("Teste");
check.setValue("true");
listviewitem.addItem(randomizer(),"",true);
listviewitem.addItem(check);
listviewitem.addItem("Vai!!! Da um duplo clique logo!","",true);
listviewitem.setMenu(menu);
}
function treedelItems(e)
{
if (browserType == "ie")
{
e = window.event;
obj = e.srcElement;
}
else
{
obj = e.target;
}
var lsitem = eval(obj.lstparent);
lsitem.parent.delItem(lsitem);
temMudanca = true;
}
//MenuBar
menubar = new JsMenuBar("menubar");
menubaritem1 = new JsMenu("menubaritem1");
menubaritem2 = new JsMenu("menubaritem2");
submenubaritem2 = new JsMenu("submenubaritem2");
menubaritemsubitem1_1 = new JsMenuItem("menubaritemsubitem1_1");
menubaritemsubitem1_2 = new JsMenuItem("menubaritemsubitem1_2");
menubaritemsubitem1_3 = new JsMenuItem("menubaritemsubitem1_3");
menubaritemsubitem1_4 = new JsMenuItem("menubaritemsubitem1_4");
menubaritemsubitem2_1 = new JsMenuItem("menubaritemsubitem2_1");
menubaritemsubitem2_2 = new JsMenuItem("menubaritemsubitem2_2");
menubaritemsubitem2_3 = new JsMenuItem("menubaritemsubitem2_3");
menubaritemsubitem2_4 = new JsMenuItem("menubaritemsubitem2_4");
submenubaritemsubitem2_1 = new JsMenuItem("submenubaritemsubitem2_1");
submenubaritemsubitem2_2 = new JsMenuItem("submenubaritemsubitem2_2");
submenubaritemsubitem2_3 = new JsMenuItem("submenubaritemsubitem2_3");
submenubaritemsubitem2_4 = new JsMenuItem("submenubaritemsubitem2_4");
menubaritem1.setValue("Menu 1");
menubaritemsubitem1_1.setValue("Item 1");
menubaritemsubitem1_2.setValue("Item 2");
menubaritemsubitem1_3.setValue("Item 3");
menubaritemsubitem1_4.setValue("Item 4");
menubaritem2.setValue("Menu 2");
menubaritemsubitem2_1.setValue("Item 1");
menubaritemsubitem2_2.setValue("Item 2");
menubaritemsubitem2_3.setValue("Item 3");
menubaritemsubitem2_4.setValue("Item 4");
submenubaritem2.setValue("SubMenu 2");
submenubaritemsubitem2_1.setValue("SubItem 1");
submenubaritemsubitem2_2.setValue("SubItem 2");
submenubaritemsubitem2_3.setValue("SubItem 3");
submenubaritemsubitem2_4.setValue("SubItem 4");
menubar.addItem(menubaritem1);
menubar.addItem(menubaritem2);
menubaritem1.addItem(menubaritemsubitem1_1);
menubaritem1.addItem(menubaritemsubitem1_2);
menubaritem1.addItem(menubaritemsubitem1_3);
menubaritem1.addItem(menubaritemsubitem1_4);
menubaritem2.addItem(menubaritemsubitem2_1);
menubaritem2.addItem(menubaritemsubitem2_2);
menubaritem2.addItem(menubaritemsubitem2_3);
menubaritem2.addItem(menubaritemsubitem2_4);
menubaritem2.addItem(submenubaritem2);
submenubaritem2.addItem(submenubaritemsubitem2_1);
submenubaritem2.addItem(submenubaritemsubitem2_2);
submenubaritem2.addItem(submenubaritemsubitem2_3);
submenubaritem2.addItem(submenubaritemsubitem2_4);
docbody.addItem(menubar);
//Toolbar
toolbar = new JsToolBar("toolbar");
toolbarbt1 = new JsToolBarButton("toolbarbt1");
toolbarbt2 = new JsToolBarButton("toolbarbt2");
toolbarbt3 = new JsToolBarButton("toolbarbt3");
toolbarbt1.setSource("images/filenew.gif");
toolbarbt2.setSource("images/fileopen.gif");
toolbarbt3.setSource("images/trash.gif");
toolbarbt1.setEvent("click",toolbarClick);
toolbar.addItem(toolbarbt1);
toolbar.addItem(toolbarbt2);
toolbar.addDiv();
toolbar.addItem(toolbarbt3);
docbody.addItem(toolbar);
//Grid principal, e de conteudo, que contera o tab
//Serve pricipalmente para fazer o alinhamento dos elementos na tela
maingrid = new JsWidgetGrid("grid");
maingrid.setHeight(300);
maingrid.addRow();
maingrid.addCell("100%","10","center","top");
maingrid.addRow();
maingrid.addCell("100%","","center","top");
docbody.addItem(maingrid);
contentgrid = new JsWidgetGrid("grid");
contentgrid.setWidth("95%");
contentgrid.addRow();
contentgrid.addCell("100%","","","top");
maingrid.addItem(contentgrid);
//Exemplo de tab
tab_teste = new JsTab("tab_teste");
tab_teste.addTab("Listview e TreeView (menu de contexto)");
tab_teste.addTab("Combobox e Lineedit");
tab_teste.addTab("Listbox e botao");
tab_teste.addTab("Calendario e dateedit");
tab_teste.setWidth("100%");
tab_teste.setHeight("450");
contentgrid.addItem(tab_teste);
//Exemplo de listview com menu de contexto
adigenmenu = new JsMenu("adigenmenu");
adigenmenuitem = new JsMenuItem("adigenmenuitem");
adigenmenuitem.setValue("Adicionar");
adigenmenuitem.setIcon("images/new.gif");
adigenmenuitem.setEvent("click", lstvaddItems);
adigenmenu.addItem(adigenmenuitem);
list_teste = new JsListView("list_teste");
list_teste.setHeight(190)
list_teste.addColumn("Coluna 1",200);
list_teste.addColumn("Coluna 2",300);
list_teste.addColumn("Coluna 3",400);
list_label = new JsLabel("list_label");
list_label.setValue("ListView");
list_label.setHeight(30);
list_teste.setMenu(adigenmenu);
tab_teste.addItemToTab(list_label,0);
tab_teste.addItemToTab(list_teste,0);
//Exemplo de TreeView com menu de contexto
adigentreemenu = new JsMenu("adigentreemenu");
adigentreemenuitem = new JsMenuItem("adigentreemenuitem");
adigentreemenuitem.setValue("Adicionar");
adigentreemenuitem.setIcon("images/new.gif");
adigentreemenuitem.setEvent("click", treeaddItems);
adigentreemenu.addItem(adigentreemenuitem);
tree_teste = new JsListView("tree_teste");
tree_teste.setTreeView();
tree_teste.setHeight(190)
tree_teste.addColumn("Coluna 1",200);
tree_teste.addColumn("Coluna 2",300);
tree_teste.addColumn("Coluna 3",400);
tree_label = new JsLabel("tree_label");
tree_label.setValue("TreeView");
tree_label.setHeight(30);
tree_teste.setMenu(adigentreemenu);
tab_teste.addItemToTab(tree_label,0);
tab_teste.addItemToTab(tree_teste,0);
//Exemplo de lineedit
//criamos um grid para distribuir melhor os elementos na tela
lineeditgrid = new JsWidgetGrid("lineeditgrid");
lineeditgrid.setHeight(60);
//label 1
label1 = new JsLabel("label1");
label2 = new JsLabel("label2");
lineedit1 = new JsLineEdit("lineedit1");
lineedit2 = new JsLineEdit("lineedit2");
label1.setValue("Label 1");
label2.setValue("Label 2");
lineeditgrid.addRow();
lineeditgrid.addCell("60");
lineeditgrid.addItem(label1);
lineeditgrid.addCell();
lineeditgrid.addItem(lineedit1);
lineeditgrid.addRow();
lineeditgrid.addCell("60");
lineeditgrid.addItem(label2);
lineeditgrid.addCell();
lineeditgrid.addItem(lineedit2);
tab_teste.addItemToTab(lineeditgrid,1);
//Exemplo de combobox
combobox_teste = new JsComboBox("combobox_teste");
for (var i=1; i < 20; i++)
combobox_teste.addItem(i, "test - " + i, "images/user_small.gif");
combobox_teste.setEvent("change", testeChange);
tab_teste.addItemToTab(combobox_teste,1);
//listbox example
lsitboxgrid = new JsWidgetGrid("lsitboxgrid");
listbox_bt1 = new JsPushButton("listbox_bt1");
listbox_bt1.setValue(">>");
listbox_bt1.setEvent("click", transfer1_2);
listbox_bt1.setWidth("50");
listbox_bt2 = new JsPushButton("listbox_bt2");
listbox_bt2.setValue("<<");
listbox_bt2.setEvent("click", transfer2_1);
listbox_bt2.setWidth("50");
listbox1 = new JsListBox("listbox1");
listbox1.setHeight("300");
listbox1.setWidth("100%");
listbox2 = new JsListBox("listbox2");
listbox2.setHeight("300");
listbox2.setWidth("100%");
for (var i=0; i < 20; i++)
listbox1.addItem("test - " + i, "","");
lsitboxgrid.addRow();
lsitboxgrid.addCell("45%");
lsitboxgrid.addItem(listbox1);
lsitboxgrid.addCell(10);
lsitboxgrid.addCell(50,null,"center");
lsitboxgrid.addItem(listbox_bt1);
lsitboxgrid.addItem(listbox_bt2);
lsitboxgrid.addCell(10);
lsitboxgrid.addCell("45%");
lsitboxgrid.addItem(listbox2);
tab_teste.addItemToTab(lsitboxgrid,2);
//Calendario
cal = new JsCalendar("cal");
data = new JsDateEdit("data");
cal.setEvent("click", teste);
tab_teste.addItemToTab(data,3);
tab_teste.addItemToTab(cal,3);
//for (i=0;i<50;i++)
//lstvaddItems();
</script> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/jsobjects.zip">jsobjects.zip( 366 k)</a>
