JavaScript DHTML/Ajax Layer/Float
Содержание
Drag and drop float window
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Application Menubar Example</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<style type="text/css">
body {
background-color:#dfb8df;
}
/* Define a new style for each menubar */
div.yuimenubar {
border-width:1px 0;
border-color:#666;
border-style:solid;
background-color:#ccc;
}
div.yuimenubar div.bd {
border-width:1px 0;
border-color:#ddd;
border-style:solid;
}
div.yuimenubar li.yuimenubaritem {
border-width:0;
border-style:none;
padding:4px 12px;
}
div.yuimenubar li.yuimenubaritem img {
margin:0;
border:0;
height:1px;
width:1px;
}
/* Define a new style for each menu */
div.yuimenu {
border:solid 1px #666;
background-color:#ccc;
}
div.yuimenu div.bd {
border-width:0;
border-style:none;
}
/* Define a new style for each menu item */
div.yuimenu li.yuimenuitem {
padding-top:4px;
padding-bottom:4px;
}
div.yuimenu li.yuimenuitem img {
height:8px;
width:8px;
margin:0 -16px 0 10px;
border:0;
}
div.yuimenu ul {
border:solid 1px #666;
border-width:1px 0 0 0;
}
/* Define a new style for an item"s "selected" state */
div.yuimenu li.selected,
div.yuimenubar li.selected {
background-color:#039;
}
div.yuimenu li.selected a.selected,
div.yuimenubar li.selected a.selected {
text-decoration:none;
}
/* Define a new style for an item"s "disabled" state */
div.yuimenu li.disabled a.disabled,
div.yuimenu li.disabled em.disabled,
div.yuimenubar li.disabled a.disabled {
color:#666;
}
</style>
</head>
<body>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="./build/animation/animation.js"></script>
<script type="text/javascript" src="./build/container/container.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
/**
* Constant representing the path to the image to be used for the
* submenu arrow indicator.
* @final
* @type String
*/
YAHOO.widget.MenuBarItem.prototype.SUBMENU_INDICATOR_IMAGE_PATH =
"promo/m/irs/blank.gif";
/**
* Constant representing the path to the image to be used for the
* submenu arrow indicator when a MenuBarItem instance is selected.
* @final
* @type String
*/
YAHOO.widget.MenuBarItem.prototype.SELECTED_SUBMENU_INDICATOR_IMAGE_PATH =
"promo/m/irs/blank.gif";
/**
* Constant representing the path to the image to be used for the
* submenu arrow indicator when a MenuBarItem instance is disabled.
* @final
* @type String
*/
YAHOO.widget.MenuBarItem.prototype.DISABLED_SUBMENU_INDICATOR_IMAGE_PATH =
"promo/m/irs/blank.gif";
// "load" event handler for the window
YAHOO.example.onWindowLoad = function(p_oEvent) {
// "click" event handler for each item in the root MenuBar instance
function onMenuBarItemClick(p_sType, p_aArguments) {
this.parent.hasFocus = true;
var oActiveItem = this.parent.activeItem;
// Hide any other submenus that might be visible
if(oActiveItem && oActiveItem != this) {
this.parent.clearActiveItem();
}
// Select and focus the current MenuItem instance
this.cfg.setProperty("selected", true);
this.focus();
// Show the submenu for this instance
var oSubmenu = this.cfg.getProperty("submenu");
if(oSubmenu) {
if(oSubmenu.cfg.getProperty("visible")) {
oSubmenu.hide();
}
else {
oSubmenu.show();
}
}
}
// "mouseover" event handler for each item in the root MenuBar instance
function onMenuBarItemMouseOver(p_sType, p_aArguments) {
var oActiveItem = this.parent.activeItem;
// Hide any other submenus that might be visible
if(oActiveItem && oActiveItem != this) {
this.parent.clearActiveItem();
}
// Select and focus the current MenuItem instance
this.cfg.setProperty("selected", true);
this.focus();
if(this.parent.hasFocus) {
// Show the submenu for this instance
var oSubmenu = this.cfg.getProperty("submenu");
if(oSubmenu) {
if(oSubmenu.cfg.getProperty("visible")) {
oSubmenu.hide();
}
else {
oSubmenu.show();
}
}
}
}
var oApplicationsMenu = new YAHOO.widget.Menu("applications");
oApplicationsMenu.addItem("Application 1");
oApplicationsMenu.addItem("Application 2");
oApplicationsMenu.addItem("Application 3");
oApplicationsMenu.addItem("Application 3");
var oFileMenu = new YAHOO.widget.Menu("filemenu", { zIndex:2 });
oFileMenu.addItem(new YAHOO.widget.MenuItem("New File", { helptext: "Ctrl + N" } ));
oFileMenu.addItem("New Folder");
oFileMenu.addItem(new YAHOO.widget.MenuItem("Open", { helptext: "Ctrl + O" }));
oFileMenu.addItem(new YAHOO.widget.MenuItem("Open With...", { submenu: oApplicationsMenu }));
oFileMenu.addItem(new YAHOO.widget.MenuItem("Print", { helptext: "Ctrl + P" }));
var oEditMenu = new YAHOO.widget.Menu("edit", { zIndex:2 });
oEditMenu.addItem(new YAHOO.widget.MenuItem("Undo", { helptext: "Ctrl + Z" }));
oEditMenu.addItem(new YAHOO.widget.MenuItem("Redo", { helptext: "Ctrl + Y", disabled: true }));
oEditMenu.addItem(new YAHOO.widget.MenuItem("Cut", { helptext: "Ctrl + X", disabled: true }), 1);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Copy", { helptext: "Ctrl + C", disabled: true }), 1);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Paste", { helptext: "Ctrl + V" }), 1);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Delete", { helptext: "Del", disabled: true }), 1);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Select All", { helptext: "Ctrl + A" }), 2);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Find", { helptext: "Ctrl + F" }), 3);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Find Again", { helptext: "Ctrl + G" }), 3);
var oMenuBar = new YAHOO.widget.MenuBar("menubar");
oMenuBar.addItem(new YAHOO.widget.MenuBarItem("File", { submenu: oFileMenu }));
oMenuBar.addItem(new YAHOO.widget.MenuBarItem("Edit", { submenu: oEditMenu }));
oMenuBar.addItem("View");
oMenuBar.addItem("Favorites");
oMenuBar.addItem("Tools");
oMenuBar.addItem("Tools");
oMenuBar.addItem("Help");
oMenuBar.addItem(new YAHOO.widget.MenuBarItem("Examples Home", { url: "index.html" }));
// Render the MenuBar instance and corresponding submenus
oMenuBar.render(document.body);
/*
Add a "click" and "mouseover" event handler to each item
in the root MenuBar instnace
*/
var i = oMenuBar.getItemGroups()[0].length - 1,
oMenuBarItem;
do {
oMenuBarItem = oMenuBar.getItem(i);
if(oMenuBarItem) {
oMenuBarItem.clickEvent.subscribe(
onMenuBarItemClick,
oMenuBarItem,
true
);
oMenuBarItem.mouseOverEvent.subscribe(
onMenuBarItemMouseOver,
oMenuBarItem,
true
);
}
}
while(i--);
// "click" event handler for the document
function onDocumentClick(p_oEvent) {
var oTarget = YAHOO.util.Event.getTarget(p_oEvent);
if(
oTarget != oMenuBar.element &&
!YAHOO.util.Dom.isAncestor(oMenuBar.element, oTarget)
) {
oMenuBar.hasFocus = false;
if(oMenuBar.activeItem) {
var oSubmenu = oMenuBar.activeItem.cfg.getProperty("submenu");
if(oSubmenu) {
oSubmenu.hide();
}
oMenuBar.clearActiveItem();
oMenuBar.activeItem.blur();
}
}
}
// Add a "click" handler for the document
YAHOO.util.Event.addListener(
document,
"click",
onDocumentClick
);
var oPanel = new YAHOO.widget.SimpleDialog(
"exampleinfo",
{
constraintoviewport: true,
fixedcenter:true,
width:"400px",
zIndex:1
}
);
oPanel.setHeader("Application Menubar Example");
oPanel.setBody("This example demonstrates how to create an application-like menubar using nothing by JavaScript.");
oPanel.render(document.body);
oPanel.show();
}
// Add a "load" handler for the window
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
floating gallery
<A href="http://www.wbex.ru/Code/JavaScriptDownload/floating_gallery.zip">floating_gallery.zip( 52 k)</a>
1. <A href="/Code/JavaScript/Ajax-Layer/Draganddropfloatwindow.htm">Drag and drop float window</a> <A href="/Code/JavaScript/Ajax-Layer/Draganddropfloatwindow.htm"></a> 2. <A href="/Code/JavaScript/Ajax-Layer/Floatwindowwhenmousein.htm">Float window when mouse in</a> 3. <A href="/Code/JavaScript/Ajax-Layer/OverlayExample.htm">Overlay Example</a> <A href="/Code/JavaScript/Ajax-Layer/OverlayExample.htm"></a> 4. <A href="/Code/JavaScript/Ajax-Layer/OverlayManagerExample.htm">Overlay Manager Example</a> <A href="/Code/JavaScript/Ajax-Layer/OverlayManagerExample.htm"></a>
Float window when mouse in
<source lang="html4strict">
<html> <head>
<style type="text/css"> /* quickSub Style Sheet */
/* www.methodize.org/quicksub/ */
- quickSub {
position: absolute; font: normal 7pt verdana; border: 1px solid #000066; visibility: hidden; z-index: 1000; width: 160px;
} /* header - contains title and window closer ([x]) */
- quickSub .qsheader {
background-color: #006699; color: #FFFFFF; font: bold 7pt verdana; padding: 2px 2px 2px 3px; border-bottom: 1px solid #000066;
}
- quickSub .qsheader a {
margin-left: 3px; color: #FFFFFF; text-decoration: none;
} /* content - contains aggregator and newsreader links */
- quickSub .qscontent {
background-color: #EEEEEE; color: #000000; padding: 1px 3px 2px 2px; font: normal 7pt verdana;
}
- quickSub a {
margin-left: 3px; text-decoration: none; font: normal 7pt verdana;
}
- quickSub a:hover {
text-decoration: underline;
}
- quickSub .qscontent a:visited { color: #800080; }
- quickSub .qscontent a:link { color: #0000ff; }
- quickSub .qsfooterWhat a:visited { color: #800080; }
- quickSub .qsfooterWhat a:link { color: #0000ff; }
/* footerWhat - contains "What Is This?" link */
- quickSub .qsfooterWhat {
background-color: #EEEEEE; text-align: right; padding: 1px 3px 2px 3px; font: 7pt verdana;
} /* footer - contains quickSub link */
- quickSub .qsfooter {
background-color: #006699; color: #FFFFFF; text-align: right; font: 7pt verdana; padding: 2px 2px 2px 3px; border-bottom: 1px solid #000066;
}
- quickSub .qsfooter a {
color: #FFFFFF; text-decoration: none;
}
</style> <script type="text/javascript" language="JavaScript">
//\////////////////////////////////////////////////////////////////////////////////// //\ quickSub 0.3.5 //\ Copyright Jason Brome 2003-2005. All rights reserved. //\ //\ By Jason Brome (jason@methodize.org). Last modified 2005-05-30 //\ http://www.methodize.org/quicksub/ //\ //\ Inspired by the overLIB script by Erik Bosrup (erik@bosrup.ru) //\ http://www.bosrup.ru/web/overlib/ //\ //\ This program is free software; you can redistribute it and/or //\ modify it under the terms of the GNU General Public License //\ as published by the Free Software Foundation; either version 2 //\ of the License, or (at your option) any later version. //\ //\ This program is distributed in the hope that it will be useful, //\ but WITHOUT ANY WARRANTY; without even the implied warranty of //\ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the //\ GNU General Public License for more details. //\ //\ You should have received a copy of the GNU General Public License //\ along with this program; if not, write to the Free Software //\ Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. //\ //\ Revision History //\ 0.3.5 Added FeedDemon, Moved Fyuze, Syndirella to Others... var ESCAPED = 1; var UNESCAPED = 2; var aggregators = new Array(
"AmphetaDesk", "http://127.0.0.1:8888/index.html?add_url=", ESCAPED, "Awasu", "http://127.0.0.1:2604/subscribe?url=", ESCAPED, "Bloglines", "http://www.bloglines.ru/sub/", UNESCAPED, "Bot A Blog", "http://www.botablog.ru/botthisblog.php?blog=", ESCAPED, "BottomFeeder", "http://127.0.0.1:8666/btf?rss=", ESCAPED, "FeedDemon", "feed:", UNESCAPED, "Headline Viewer", "http://127.0.0.1:8900/add_provider?url=", ESCAPED, "mobilerss", "http://www.mobilerss.net/fastfeed.php?url=", ESCAPED, "My Yahoo!", "http://add.my.yahoo.ru/rss?url=", ESCAPED, "NetNewsWire", "feed:", UNESCAPED, "NewsGator Online Services", "http://services.newsgator.ru/subscriber/subext.aspx?url=", ESCAPED, "NewsMonster", "newsmonster-subscription:", UNESCAPED, "NewzCrawler", "feed:", UNESCAPED, "nntp//rss", "http://127.0.0.1:7810/?action=addform&URL=", ESCAPED, "Python Desktop Server", "http://127.0.0.1:4334/aggregator/add_redir?url=", ESCAPED, "Radio UserLand", "http://127.0.0.1:5335/system/pages/subscriptions?url=", ESCAPED, "RSS Bandit", "feed:", UNESCAPED, "SharpReader", "http://127.0.0.1:5335/system/pages/subscriptions?url=", ESCAPED, "Shrook", "feed:", UNESCAPED, "Vox Lite", "feed:", UNESCAPED, "Wildgrape", "http://127.0.0.1:8888/NewsDesk.html?add_url=", ESCAPED, "WINKsite", "http://winksite.ru/site/quick_add_logon_form.cfm?partner_name=&feed_url=", ESCAPED, "WinRSS", "rss://addrss/", ESCAPED, "Others...", "http://www.methodize.org/quicksub/subscribe.php?url=", ESCAPED
); var txtSubscribe = "Subscribe to this feed:"; var txtContentHeader = "Newsreader/Aggregator:"; var txtWhatIsThis = "What is this?"; var txtVersion = "0.3.5"; // Color and font settings for Netscape 4 (CSS Style Sheet used for modern browsers) var q_hdrfont = "Verdana"; var q_hdrsize = "1"; var q_hdrcolor = "#FFFFFF"; var q_bgcolor = "#006699"; var q_contentfont = "Verdana"; var q_contentsize = "1"; var q_contentbgcolor = "#EEEEEE"; // Internal vars var q_frame = self; var over = null; var oTimer; // Determine browser type var ns4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) == 4); var ns6 = (document.getElementById)? true:false; var ie4 = (document.all)? true:false; if (ie4) {
var docRoot = "document.body";
} if (ns4) {
var oW = window.innerWidth;
var oH = window.innerHeight;
window.onresize = function () {if (oW!=window.innerWidth||oH!=window.innerHeight) location.reload();}
} if (ie4) {
if ((navigator.userAgent.indexOf("MSIE 5") > 0) || (navigator.userAgent.indexOf("MSIE 6") > 0)) {
if(document.rupatMode && document.rupatMode == "CSS1Compat") {
docRoot = "document.documentElement";
}
}
if (ns6) {
ns6 = false;
}
} // quicksub(url) // Loads parameters into global runtime variables. function quicksub(oLink, originalUrl) {
if (oTimer) {
clearTimeout(oTimer);
}
var url = escape(originalUrl);
var text = "" + txtContentHeader + "
";
for(var iCount = 0; iCount < aggregators.length; iCount +=3) {
text += ("<a href=\""
+ aggregators[iCount + 1]
+ (aggregators[iCount + 2] == ESCAPED ? url : originalUrl)
+ "\">"
+ aggregators[iCount]
+ "</a>
");
}
if ( (ns4) || (ie4) || (ns6) ) {
q_frame = self;
if (ns4) over = q_frame.document.quickSub
if (ie4) over = q_frame.quickSub.style
if (ns6) over = q_frame.document.getElementById("quickSub");
}
if(!ns4) {
var layerhtml = " } else {
var closing = "<TD ALIGN=RIGHT><A HREF=\"javascript:return closeqs();\" onMouseOver=\"return closeqs();\">[x]</A></TD>";
var layerhtml = ""
+"
|
