mousewheel_lightbox_swfobject notebook

JS Plugs Learning NOTEBOOK2013/10/25 by OU KinSei1. lightbox_meFiles: jquery.lightbox_mev_1.jsPlug Name: Lightbox_meHome: http:/buckwilson.me/lightboxme/Download: /buckwilson/Lightbox_me/zipball/masterApi: http:/buckwilson.me/lightboxme/Introduce: Lightbox_me is an essential tool for the jQuery developers toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss.Lightbox_me handles all of those annoying edge cases that other lightbox solutions do not: Handles overlay resize when the window is resized Handles overlay size in cases where the document is smaller than the window Handles position: fixed in all browsers Position: fixed automatically swaps to position: absolute when the window size is smaller than the modal, so the user can scroll to see the contentsIn addition its got these other nice features: Tiny footprint (just over 1000 bytes gzipped & compressed) Small DOM overhead (adds 1 DOM element for the overlay) Dynamic iFrame shim is created and destroyed for the IE 6 select box peek issue (tested and working on https pages) Supports IE 6+, Firefox 2.5+, Safari, Chrome (havent tested in Opera yet)Usage:Include jQuery and lightbox_me in your web page, then invoke lightbox_me on a jQuery object:$(domobj).lightbox_me();or$(#id).lightbox_me();This will lightbox the DOM element immediately. Typically you would put this code inside the click handler of another element.1.This is a typical use-case for a modal: a sign in sheet. Create the sign in sheet in your document, then set it todisplay: none;, then attach a click handler to the item you want to invoke the sign in sheet:$(#try-1).click(function(e) $(#sign_up).lightbox_me( centered: true, onLoad: function() $(#sign_up).find(input:first).focus() ); e.preventDefault();); Be sure and resize the browser height and scroll around to observe the various cases outlined above.2.Triggering a closeYou can manually trigger a close event by calling .trigger(close) on the element you have lightboxed. For example:$ele.lightbox_me();$ele.trigger(close);3Triggering a repositionRepositioning happens on window resize or scroll, but sometimes you may need to trigger it manually. Call .trigger(reposition); on the element you have lightboxed. For example:$ele.lightbox_me();$ele.trigger(reposition);Options:OptionDefaultDescriptionappearEffectfadeInThe appear effect jQuery is to use on the modal.appearEaseThe easing effect jQuery is to use on the modal. (requiresjQuery easing)overlaySpeed300The time it takes (in ms, or slow, normal, fast) for the overlay to fade in.lightboxSpeedfastThe time it takes (in ms, or slow, normal, fast) for the lightbox modal to animate in.closeSelector.closeThe jQuery selector (in string format) you want lightbox_me to bind the close event to.closeClicktrueWhether or not to close the lightbox with the user clicks the overlay.closeEsctrueWhether or not to close the lightbox when the user presses escapedestroyOnClosefalseWhether or not to destroy the DOM element that has been lightboxed when the user closes it (this option is good if youre using ajax to create the DOM)showOverlaytrueWhether or not to show an overlay when presenting the modal.onLoadfunction() Function to call when the lightbox is completely open (after animation)onClosefunction() Function to call when the lightbox is completely closed (after animation)classPrefixlbThe class to prefix the overlay CSS classzIndex999The base zIndex for the overlay. The iframe shim is this + 1, the modal is this + 2centeredfalseWhether or not the modal is centered verticallymodalCSStop: 40pxCSS applied to the modal when lightbox_me is run. If you specify a top it will be overridden ifcenteredis set totrueoverlayCSSbackground: black,opacity: .6CSS applied to the overlay when lightbox_me is run.2. swfobjectFiles: swfobject.jsPlug Name: swfobjectHome: /p/swfobject/Download: /p/swfobject/downloads/listApi: /p/swfobject/wiki/apiIntroduce: Embedding Adobe Flash Player content用法：html部分.js部分 swfobject.embedSWF(test.swf, swf1, 300, 120, 9.0.0,);源码部分：这是2.2中的源码。看参数就明白怎么使用了。embedSWF: function(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj, callbackFn) .详解首先需要了解object标签。/tags/tag_object.asp/tags/tag_param.aspswfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr这些依次为，swf位置，html要替换成flash的元素的id，宽，高，flash版本，如果没有flash那就使用这个自动安装flash的文件 swfobject2.2源文件里有flashvarsObj：这里是flashvars的值。这个常用来作为html与flash之间传递参数，本来是在params对象中的属性，由于考虑到常用和方便，所以单独取了出来。可以设置为null。然后在param中写。param对象的属性:详细的介绍/cps/127/tn_12701.htmlplay，loop，menu，quality，scale，salign，bgcolor，base，swliveconnect，flahvars，devicefont ，allowscriptaccess ，seamlesstabbing ，allowfullscreen ，allownetworkingwmode 这个很重要，window，opaque，transparent（一般设为transparent透明或者opaque不透明）。当不设置时默认为window，这时已窗口方式呈现。这时object元素将始终显示在最上面，同时点击事件等也监听不到。attributes对象的属性：id，name，styleclass（不使用class，因为class也是ECMA4的保留关键字），aligncallbackFn：回调函数使用演示演示1swfobject.embedSWF(test6_flashvars.swf, content5, 300, 120, 6.0.0, expressInstall.swf, name1:hello,name2:world,name3:foobar, menu:false, id:dynamicContent5,name:dynamicContent5);演示2var flashvars = name1: hello, name2: world, name3: foobar;var params = menu: false;var attributes = id: dynamicContent2, name: dynamicContent2;swfobject.embedSWF(test6_flashvars.swf, content2, 300, 120, 6.0.0, expressInstall.swf, flashvars, params, attributes);演示3var flashvars = ; flashvars.xmlPath = data.xml; var params = ; params.wmode = transparent; var attributes = ; swfobject.embedSWF(xixi.swf,banner,960,250,9.0.0,expressInstall.swf,flashvars,params,attributes);演示4swfobject.embedSWF(gen_shu.swf, gen_swf1, 180, 105, 9.0.0,null,null,wmode:transparent,null,function()alert(已加载成功flash);js调用方法/p/swfobject/wiki/api3. mousewheelFiles: jquery.mousewheel.min.jsPlug Name: swfobjectHome: /mousewheel/ , /brandonaaron/jquery-mousewheelDownload: /brandonaaron/jquery-mousewheel/tagsApi: /brandonaaron/jquery-mousewheelIntroduce: A jQuery plugin that adds cross-browser mouse wheel support.Usage:In order to use the plugin, simply bind themousewheelevent to an element. It also provides two helper methods c