Keywords:expose html,expose html jquery,javascript expose,stand out html javascript,javascript expose plugin
Description:Make your HTML elements stand out
Demo
Start entering text on the input fields below and you'll see the masking effect:
Username
Password
The story
Expose is a JavaScript tool that exposes selected HTML elements on the page so that the surrounding elements will gradually fade out. The exposing effect was first introduced in the overlay tool. Usually the effect is an integral part of the program and cannot be used separately. This tool takes the idea of exposing a little further. It is a separate tool that can be used as a general purpose masking utility. You can use it for overlays, forms, images, videos or Flash objects. You can use CSS to tweak the look of the mask.
Usage
Here are some most common ways of using the mask:
$(document).mask();
$(document).mask("#789");
$(document).mask{ closeOnEsc: false, closeOnClick: false });
$("div.to_be_exposed").expose();
$.mask.close();
There are two different calls: mask and expose. The mask method is only available for the document object and you cannot use any other selector. The expose() method can take any jQuery selector and all elements returned by the selector are placed on top of the mask.
The mask is loaded immediately after the expose or mask call. You can supply a different configuration on each call and the latest call is remembered. A subsequent expose call for example will use the previously used configuration if no arguments are given.
You can also use an existing element as a mask. By default the tool uses an element whose id is exposeMask and if it does not exist already exist then it will be created automatically.
Demos
We believe that the best way to learn is through demos. The following demos are fully documented and a standalone page is provided to get mask working on your site. It's really important to study the first demo "Minimal setup for mask" because it teaches you the basics of using the library.
Expose and Flowplayer demos
These demos show how to use a video player together with the mask tool:
Mask Graphics
You can use our graphics as the basis for your design. You can freely change the design as you see fit. Click the image on the right to download a zip file. Before using the graphics, you should consult the User's Guideon how graphics can be used when designing the look and feel of the tools.
Here are a few examples of what is included in the zip file:
Configuration
Here is a full list of available configuration options:
property
default
description
closeOnClick |
true |
Specifies whether the masking disappears when the mask is clicked. By default, this is set to true. |
closeOnEsc |
true |
Specifies whether masking disappears when the ESC key is pressed from the keyboard. By default, this is set to true. |
closeSpeed |
'fast' |
How quickly the mask disappears. Possible values are 'slow', 'normal' and 'fast or you can supply the number of milliseconds. For example, a value of 2000 will cause the mask to disappear in 2 seconds. By setting this to zero there is no animation and the mask disappears immediately. |
color |
'#fff' |
The background color of the mask. This will dramatically affect how it appears. If you supply a value of null here, you can control the background color with CSS. See themaskId property below for more information. |
loadSpeed |
'slow' |
How quickly the mask will appear. Possible values are 'slow', 'normal' and 'fast or you can supply the number of milliseconds. For example, a value of 2000 will cause the mask to appear in 2 seconds. By setting this to zero there is no animation and the mask appears immediately. |
maskId |
'exposeMask' |
The mask is a normal div element placed on top of your page and whose size is automatically adjusted to cover the user's screen completely. You can style it normally with CSS just like any other element on the page. By default, the mask's id is set to mask, but you can change that with tis configuration option. Since version 1.2.0 you can use an existing element as the mask if it's id matches the one given in this configuration option. |
opacity |
0.8 |
The transparency setting of the mask. A decimal value from 0 to 1. A bigger value means less transparency while a value of 0 is fully transparent (invisible). |
startOpacity |
0 |
since 1.2.0. The initial transparency level of the mask before it starts fading in to the desired opacity as specified by the opacity option. A decimal value from 0 to 1. A bigger value means less transparency while a value of 0 is fully transparent (invisible). For example, you can start with full opacity and gradually fade to a semi-transparent mask. |
zIndex |
9998 |
This is the z-index CSS property for the mask. The zIndex specifies the placement of the element along the z-axis of the document. The default zIndex value is very high, so it is unlikely that you will need to alter it; however, this value must be greater than the z-index of any other element on the page so that the overlay will always be visible when called. |
|
onBeforeLoad |
|
This callback function is triggered before the masking effect. Returning false or callingevent.preventDefault() in the callback prevents masking from occurring. |
onLoad |
|
This callback function is triggered after masking takes place. |
onBeforeClose |
|
This callback function is triggered before mask is closed. Returning false or callingevent.preventDefault() in the callback prevents it from closing. |
onClose |
|
This callback function is triggered when mask is closed. |
Here is an example of an onBeforeLoad callback function given in configuration. Inside any callback function the this variable is a pointer to the mask scripting API.
$("#mydiv").expose({
onBeforeLoad: function(event) {
this.getExposed().animate({width: '+=100'});
}
});
Note: unlike other jQuery Tools you can supply callbacks only from the configuration and you can assign only one callback for the same event.
Scripting API
Unlike other jQuery Tools in this library the mask is a singleton. Only one mask instance can exist at any given time. This singleton can be accessed directly with $.mask or via the this variable inside callback functions.
Method listing
method
return value
description/example
close() |
API |
Closes the mask. |
fit() |
API |
Forces the mask to fill the whole document. This is usually not needed since the tool itself does this. You'll need this on occasions when the mask is loaded and your document has grown in size in the meantime. |
isLoaded(fully) |
boolean |
Returns true if mask is loaded. Since 1.2.4 you can supply a boolean argument that makes sure that the function returns true only if the mask is fully visible in it's final position and opacity. |
getMask() |
jQuery |
Returns the mask as a jQuery object. You can use jQuery methods such as css oranimate to modify it. |
getExposed() |
jQuery |
Returns exposed elements (if any) as a jQuery object. |
getConf() |
Object |
Returns the masking configuration. |
原文地址:http://flowplayer.org/tools/toolbox/expose.html
分享到:
相关推荐
qvm-暴露端口 ... 要公开work VM的端口8000,请运行 user@dom0$ qvm-expose-port -a work 8000 ... 安装 您可以通过下载脚本来安装它。... user@dom0$ qvm-run --pass-io work 'cat qvm-expose-port' > qvm-expose-port
expose-loader器expose-loader器允许将模块(全部或部分)暴露于全局对象( self , window和global )。 有关兼容性问题的更多提示,请查看官方文档的 。 入门 首先,您需要安装expose-loader : $ npm install ...
不知不觉,已经进行到了jquery tools六大功能的第五个功能——expose的学习了,废话不多说,直接进入正题。
在运行时公开GC!...npm i expose-gc 我希望我的GC具有全球性! require ( 'expose-gc' ) ; global . gc ( ) ; 我只想要一个功能,没有全局性! const gc = require('expose-gc/function'); gc();
运行docker run -d -v /var/run/docker.sock:/var/run/docker.sock -p 1234:12375 --name expose -t tobilg/expose-socket在Docker / Boot2Docker主机上docker run -d -v /var/run/docker.sock:/va
暴露 完全开源的ngrok替代品-用纯PHP编写。 文献资料 有关安装说明,深入的用法和部署详细信息,请查看。 安全 如果发现任何与安全相关的问题,请发送电子邮件至而不要使用问题跟踪器。 学分 ...MIT许可证(MIT)。...
-- Add this line to expose `window.vlow.default` --> <!-- WARN: Make sure React is loaded before this line --> < script src =" vlow.min.js " > </ script > 概述 Vlow
客户持续性oc new-app java:8~...请检查 ) oc expose svc/sd-customer-eligibility{URL}/swagger-ui可以在以下{URL}/swagger-ui找到: {URL}/swagger-ui 为了设置Fuse控制台,创建一个服务,该服务将公开服务
The atom-ide-ui package to expose the functionality within Atom The language-vue package to ensure highlighting and activation within Vue files Development Clone this repo $ git clone ...
运行适配器$ docker run -d --name powerstrip-debug \ --expose 80 \ binocarlos/powerstrip-debug 在它自己的 shell 中运行调试适配器并保持连接是很方便的,这样你就可以在发出请求时看到它的输出: $ docker run...
:inbox_tray: Discord ... expose : - " yourport " 执行请求:版本2 导出格式 类型 ID 描述 文件扩展名 纯文本 0 导出到纯文本文件 文本 HtmlDark 1个 在黑暗模式下导出为HTML文件 html HtmlLight 2 以灯光
-web.listen-address ":9011" # Address on which to expose metrics and web interface. -etherpad.url "http://localhost:9001" # URL to connect with Etherpad -etherpad.api-token "" # "API Token
基础Java ...EXPOSE 8080 COPY target/myapp-1.0-SNAPSHOT-jar-with-dependencies.jar /app/myapp-1.0-SNAPSHOT-jar-with-dependencies.jar CMD java -jar /app/myapp-1.0-SNAPSHOT-jar-with-dependenci
Kubernetes中的分布式锁定 该存储库提供了在Kubernetes... kubectl run hazelcast --image hazelcast/hazelcast:4.2 --port 5701 --expose kubectl run application --image leszko/distributed-locking:hazelcast kube
注2:这些脚本是在Mac上编写的,在其他环境下使用的里程可能会有所不同如何使用: /japan-2014/resize.sh使用imagemagick(依赖项)将每张照片的大小调整为通用分辨率generate.sh生成html页面并放入Japan-2014 copy....
$ npm install expose-via-accessor 用法 | import { expose , via } from 'expose-via-accessor' ; var publicObject = { x : 'Public X' } , privateObject = { y : 'Private Y' } ; expose ( privateObject...
$ composer vendor-expose 用法 转到“测试模块”管理面板。 这是一个被入侵的ModelAdmin界面,该界面通过FormSchema渲染表单,该表单使用网格字段显示Note对象的列表。 (它们将在dev/build上dev/build )。 核心...
改用Transpiled class-transformer // import "reflect-metadata" into your main fileimport "https://esm.sh/reflect-metadata" ; // you need to --allow-envimport { Expose , plainToClass } from ...
从frolvlad / alpine-oraclejdk8:slimENV MONGO_URL mongodb:// localhost / belfastjug_sample_01 EXPOSE 8080运行mkdir -p / app /添加build / libs / mygradledocker-0.0.1-SNAPSHOT.jar /app/mygradledocker-...
You can redirect all of the output of your scripts to a function. For ; example, if you set output_handler to "mb_output_handler", character ; encoding will be transparently converted to the ...