某某茶叶有限公司欢迎您!
金沙棋牌在线 > 服务器&运维 > jQuery powerFloat万能浮动层下拉层插件使用介绍_jquery_脚本之家

jQuery powerFloat万能浮动层下拉层插件使用介绍_jquery_脚本之家

时间:2019-11-27 20:39

一、写插件的缘由

OrangeTree 下载地址:OrangeTree 首先大家先看下演示吧! 首先声明本人美术功底比较差!这个样式大家就将就一下吧!我将这个无限级树型插件命名为桔子树,它主要就分为3个级别的节点: 首级菜单,就是树上的一级菜单 父级菜单,也就是下面还有节点的菜单 子级菜单,也就是下面没有节点的菜单 每个节点都可以用CSS控制其样式,详细请看下表:

SimpleModal是一个轻量级的jQuery插件,它提供了一个模式对话框发展强大的接口。是一个模态对话框的框架。 SimpleModal使您可以灵活地构建任何你可以设想,而屏蔽相关的跨浏览器问题。

为什么想写此插件,想来想去,归结为一个字:“懒”。不想为明明两个类似的功能分别写代码,本应喝茶看美女的休闲时光晃荡在本可避免的代码上,对于我来讲,就是白白耗费自己的青春。于是,干脆,一鼓作气,把这些类似的功能集合到一起,一个插件搞定,一了百了了。这种感觉就好比《大话西游》里悟空一巴掌拍死唐僧这只苍蝇一样。那,这里提及的类似的功能是指?当当当当,就是与某元素有位置关系的浮动层(例如tip类效果,鼠标经过显示大图,下拉列表等)。

OrangeTree

写在前面

二、插件概述

.OrangeTree控件.first_node首级菜单的默认样式.first_node_hover首级菜单鼠标移上的样式.first_node_click首级菜单鼠标点击后的样式.first_node_subItem首级菜单下的子级菜单样式.Item父级菜单.Item_node父级菜单默认样式.Item_node_hover父级菜单鼠标移上的样式.Item_node_click父级菜单鼠标点击后的样式.Item_Img_bg父级菜单图标样式.subItem子级菜单.subItem span子级菜单默认样式.subItem_node_hover子级菜单鼠标移上的样式.subItem_node_click子级菜单鼠标点击后的样式.subItem_Img_bg子级菜单图标样式注:注释为的样式建议不要修改

jquery、simpleModal、浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上。

插件名为jquery-powerFloat.js。//zxx:之前我喜欢用”.”连接,后发现在使用combo合并脚本的时候会出问题,于是,现在使用”-”连接名称了。

JavaScript参数说明:

jquery-1.8.3.js

powerFloat顾名思意就是“强大的浮动”。使用库jQuery,大小20K多点,使用YUICompressor压缩后大小折半,是有史以来代码量写的最多的一个插件了。

OrangeTreewidth控件宽度height控件高度indent层级缩进view初始显示方式,expanded:全部打开,collapsed:全部关闭,firstNode:指定显示首级的第几级firstNodeview为firstNode此属性指定显示首级的第几级single指定显示方式,是否只能开打一级目录具体用法如下: 首先添加引用 复制代码 代码如下:

jquery.simplemodal.js 1.4.4

支持hover, click, focus以及无事件触发;支持多达12种位置的定位,出界自动调整;支持页面元素加载,Ajax加载,下拉列表,提示层效果,tip类效果等;可自定义装载容器;内置UI不错的装载容器;支持鼠标跟随等。

HTML 复制代码 代码如下:

去官网下载simpleModal,可以省去很多麻烦,比如名子一样但内容不一样,说多了都是泪啊

三、demo及下载

  • ……

将下列代码黏贴到你的html文件

demo您可以狠狠地点击这里:万能浮动插件powerFloat测试页面

Javascript 复制代码 代码如下: $.ready { $.OrangeTree({ width:"300px", height:"500px", indent:20, view: "collapsed", firstNode: 1, single:false }); });

很好,你可以继续看下去了关 闭 
 <br> $ <br> {<br> $; <br> });<br> 

下为demo页面中鼠标经过显示大图效果截图:

如果你看到lol元素在浏览器视口的位置是,左右居中,上下居中,点击关闭按钮隐藏,浏览器没报错,可以继续了。

下载JS文件下载:jquery-powerFloat.js 或 jquery-powerFloat-min.jszip打包下载:jquery-powerFloat.zip

详细介绍

//zxx:下载均右键 – [目标|链接]另存为

继续以往的观点,这里不是JQuery官网

四、如何使用

说一些比较常见的,新鲜的东西,了解这些,你就可以完成大部分工作,并知道怎么找到自己不知道的