首页>代码>jquery AppMenu仿苹果系统 alt+tab切换窗口的特效源代码下载下载打赏举报

yangweijie 2014-09-02 10:22:37

证

jquery AppMenu仿苹果系统 alt+tab切换窗口的特效源代码下载

官方验证：如果是windows操作系统则是ctrl+tab才有效果。

jQuery AppMenu – a Mac-style Alt+Tab menu on your website

After a few weeks and many late nights, my jQuery AppMenu plugin is ready for public release!

Please be aware that this plugin is not recommended for use on live websites – I haven’t had the time to turn it into something fully functional yet, and it won’t work in Windows because of the way alt+tab is handled. Also never really patched it for IE. Working on a solution though, and hope to have a totally rebuilt version done by 2012!

Introduction

AppMenu takes the default cmd+tab functionality on the Apple Mac and imitates it almost exactly on a website, instead using alt+tab (or option+tab).

A developer or site owner can use this plugin to provide a highly familiar, user-friendly navigation through a website or page with multiple tabs. Other possible uses are for online web apps, for scrolling within a long document or using it to make social bookmarking easy – see the demos page for more.

It’s flexible and easily customisable with plugin options and CSS, relying on only very simple markup, for example:

<div id="appMenu">
   <ul>
      <li><a href="#introduction" title="Introduction"><img src="icon-1.png" alt="" /></a></li>
      <li><a href="#downloads" title="Downloads"><img src="icon-2.png" alt="" /></a></li>

Features

Basic usage: Simply hold alt/option and press tab or shift+tab to navigate forwards or backwards through the menu items. You can also use the mouse to manually select items from the menu, while holding it open.

Reordering of menu items: You can specify whether items should be reordered (last-selected item comes to front of menu, as on Mac) or not (items are static).

Configurable Options: The plugin accepts a number of configurable options via the initial call, as outlined in the options section below.

Callbacks: A customisable callback function allows developers to tell the menu exactly how to behave when an item is selected.

Planned for 2.0: An API for adding/removing items on-the-fly, as well as resizing of items to fit all inside menu.

Demo & Examples

For a basic demo of how the plugin works with scrolling content in a long document, hit alt/option+tab now to navigate between sections!

Please note – the default AppMenu doesn’t currently look so hot in IE (any versions). It’s fine in FF/Webkit. Fixes for IE are coming within a week…

For more demos, including how the plugin handles tabbed content, custom design/CSS, external links, using it for social media sharing and more:

Check out the AppMenu demos page here.

Installation / Usage

… is as easy as it comes. Just upload the scripts to a subdirectory and add the scripts (latest jQuery, plus the AppMenu script and CSS stylesheet) inside the <head> of your document or website, like so:

<script src="/js/jquery-1.4.2.min.js"></script>
<script src="/js/jquery.appmenu-1.0.min.js"></script>
<link href="jquery.appmenu.css" rel="stylesheet" type="text/css" />

Make sure to check the paths to the files! The amount of times I’ve been debugging a plugin, only to find the path was wrong, it’s not even funny. People keen on saving on external requests can combine the CSS file into their main stylesheet, but I recommend keeping the plugin file separate for easy upgrading later on.

Then you’ll need to add the initial function call, like so:

<script>
	jQuery(document).ready(function($) {
		$('#appMenu').appMenu();
	});
</script>

Finally, you’ll need your HTML. Obviously the items you use will vary depending on your usage of the plugin, so here’s some I prepared earlier. Each of those demos has the source code ready to copy/paste into your pages, and instructions for customising the items.

For those of you who want to write it yourself, this is the format:

<div id="appMenu">
   <ul>
      <li><a href="[URL or #hash]" title="[Item Name]"><img src="[path/to/icon.png]" alt="" /></a></li>
      <li><a [...]

Here are a few pointers to get you started:

The href attribute for the item’s link will vary depending on the type of callback function you’re using (the function that actions an event once an item is called). The default callback function will show the tab with the same #id as the href, or if it’s a link (relative path or full URL), will attempt to load that page. See the Demos page for full examples.
The title attribute for the item’s link will be the name of the item, displayed below the icon.
For the image, a transparent PNG is recommended, at least 120px square. Drop shadows in the PNG make it look better too.
Add as many items this way as you please. In the next version, there will be an API to add/remove items on-the-fly!

Downloads

Please note – the default AppMenu doesn’t currently look so hot in IE (any versions). It’s fine in FF/Webkit. Fixes for IE are coming within a week…

The plugin is available to download as a zip containing the following files/directories:

jquery.appMenu-1.0.js (12.4kb) – the full plugin code, for editing and playing with
jquery.appMenu-1.0.min.js (3.5kb) – the minified plugin code, for production websites
jquery.appMenu.css (2.1kb) – the necessary CSS styles
jquery.appMenu.min.css (1.6kb) – the minified CSS styles
jquery-1.4.2.min.js – minified jQuery 1.4.2
documentation.html – options and documentation for the plugin
/demos/ – a folder with all the AppMenu demos and examples

Click here to download jQuery.AppMenu-1.0.zip (610kb)

There’s also a zip containing just the scripts (no demos/docs) which weighs in at about 1/20th of the size:

Click here to download jQuery.appMenu-1.0-just-the-scripts.zip (34kb)

Documentation

jQuery AppMenu has a number of customisable options, and a few known bugs, which are listed below.

Options are be passed into the plugin call as an {object}, for example:

jQuery(document).ready(function($) {
	$('#appMenu').appMenu({
		reorder: true,
		showControl: false,
		onSelect: function( obj, options ) {
			alert( 'howdy' );
		}
	});
});

Options

menuFadeSpeed
Speed at which the menu fades in/out, in milliseconds
default: 120
reorder
Whether to re-order the items when one is selected, bringing the latest-selected to the front of the menu
default: false
resize
Whether to resize the items when items are added/removed (not currently active – planned for 2.0)
default: false
updateHash
Update the location hash in the browser when item selected
default: true
debug
Enable debug mode
default: false
centerHoriz
Center the menu horizontally on the screen, and keep it centered. Default is false, as it messes with custom CSS – but it can be useful.
default: false
showControl
Show navigation control info above menu
default: true
showControlText
Text for the navigation control
default: ‘Alt + Tab (+ Shift) or mouse to navigate.’

onSelect
Callback function for selected item, which is passed the selected item (object) and the plugin options.
default:

function( obj, appMenuOpts ) {
	$.fn.appMenu.onSelectDefault( obj, appMenuOpts, { tabFadeSpeed: 360 } );
}

Known Bugs

The default AppMenu doesn’t currently look so hot in IE (any versions). It’s fine in FF/Webkit. Fixes for IE are coming within a week…
When menu is closed, if you hold alt on its own and click and hold somewhere, isAlt is set to true. You can then open the menu just by pressing tab, which is a usability bummer. Fix planned for v1.1.
…Found a bug? Please let me know in the comments.

More Stuff

jQuery AppMenu is totally free for you to use and modify – all I ask is that you let me know in the comments if you’re using the plugin, so I can see it in action! (You’ll even get a free backlink from the Showcase if it’s a good implementation…)

Also please give credit where credit’s due and leave the /* notice */ intact so more people can find out about this free plugin. Thanks!

由最代码官方编辑于2014-9-2 11:01:48

由最代码官方编辑于2014-9-2 13:48:56

猜你喜欢

打赏

1个评论

2个牛币 jQuery 仿苹果系统 APP menu JavaScript

文件名:jQuery.appMenu-1.0-full.zip,文件大小:608.875K 下载