嘉兴型网站系统总部,做一个同城app得多少钱,自适应网站优点缺点,网站开发维护专员岗位职责LobiPanel是一款基于jQuery UI的Bootstrap Panel面板功能增强插件。通过该插件可以为Bootstrap的原生Panel面板增加编辑标题#xff0c;最大化#xff0c;最小化#xff0c;面板拖动关闭面板等功能。使用方法使用该Bootstrap面板功能增强插件需要引入jquery#xff0c;jque…LobiPanel是一款基于jQuery UI的Bootstrap Panel面板功能增强插件。通过该插件可以为Bootstrap的原生Panel面板增加编辑标题最大化最小化面板拖动关闭面板等功能。使用方法使用该Bootstrap面板功能增强插件需要引入jqueryjquery ui相关文件和bootstrap相关文件以及lobipanel.css和lobipanel.js文件。HTML结构LobiPanel最基本的HTML结构如下它完全是bootstrap标准的panel结构Panel titleLorem ipsum...初始化插件在页面DOM元素加载完毕之后可以通过lobiPanel()方法来初始化该插件。$(function(){$(.panel).lobiPanel({// 配置参数...});});完成上面的操作之后就可以得到类似下图的Panel面板。使用面板右上角的图标按钮你可以执行以下一些操作按钮将从文档中移除该Panel面板。注意这个操作是不可撤销的。按钮可以使面板全屏打开。按钮从指定的URL中加载内容到.panel-body中。按钮可以使面板浮动起来并可以通过鼠标进行拖拽。再次点击这个按钮就可以使面板回到原来的位置上。按钮有2个功能1、收缩已经展开的面板。2、最小化该面板。配置参数以下所有的参数都可以通过data-*来设置你只需要将参数的驼峰格式修改为连线格式即可。例如connectWith参数使用data-*来表示就是data-connect-with。你也可以在data-*属性中插入一个对象例如data-close{tooltip: Something}。参数类型默认值描述draggableBooleantrue面板是否可以拖动。注意该选项需要jQuery ui draggable的支持sortableBooleanfalse面板是否可以排序。注意该选项需要jQuery ui sortable的支持connectWithString.ui-sortablejQuery ui排序插件选项resizeStringboth设置面板缩放的方向可选值有both, vertical, horizontal, noneminWidthInteger200面板的最小宽度minHeightInteger100面板的最小高度maxWidthInteger1200面板的最大宽度maxHeightInteger700面板的最大高度loadUrlString加载内容的URL地址如果没有提供reload按钮就不会加载任何东西tooltipsBooleantrue是否在面板控制按钮上显示tooltipstoggleIconStringglyphicon glyphicon-cog下拉菜单切换图标expandAnimationInteger100扩展到全屏的动画持续时间collapseAnimationInteger100从全屏收缩回来的动画持续时间unpinObject{icon : glyphicon glyphicon-move,tooltip : Unpin}icon属性是切换拖动按钮的图标tooltip属性是按钮的提示文本reloadObject{icon : glyphicon glyphicon-refresh,tooltip : Reload}icon属性是重新加载按钮的图标tooltip属性是按钮的提示文本minimizeObject{icon : glyphicon glyphicon-minus,icon2 : glyphicon glyphicon-plus,tooltip : Minimize}icon属性是全屏按钮的图标icon2是收缩按钮的图标tooltip属性是按钮的提示文本closeObject{icon : glyphicon glyphicon-remove,tooltip : Close}icon属性是关闭按钮按钮的图标tooltip属性是按钮的提示文本editTitleObject{icon: glyphicon glyphicon-pencil,icon2: glyphicon glyphicon-floppy-disk,tooltip: Edit title}方法可以通过2个方法来调用该插件的方法。1、你可以获取LobiPanel的对象实例然后调用方法。//get the LobiPanel instancevar instance $(.lobipanel).data(lobiPanel);//call the methodsinstance.unpin();instance.setPosition(400, 360);instance.setLoadUrl(htpp://www.example.com);var position instance.getPosition();//method chaining is also availableinstance.setSize(400, 400).setPosition(400, 360).setLoadUrl(htpp://www.example.com).load();2、或者你也可以直接调用方法。$(.lobipanel).lobiPanel(startLoading);$(.lobipanel).lobiPanel(setPosition, 400, 360);var position $(.lobipanel).lobiPanel(getPosition);方法参数返回类型描述isPanelInitnoneBoolean检查面板是否被初始化。面板被初始化后会带有.lobipanel class和data-inner-id属性isPinnednoneBoolean检测面板是否是固定的pinnoneLobiPanel对象固定面板unpinnoneLobiPanel对象将面板浮动togglePinnoneLobiPanel对象将面板在固定和浮动之间切换isMinimizednoneLobiPanel对象检测面板是否被最小化minimizenoneLobiPanel对象最小化面板maximizenoneLobiPanel对象最大化面板toggleMinimizenoneLobiPanel对象在最大化和最小化之间切换isOnFullScreennoneBoolean检测面板是否扩展到全屏toFullScreennoneLobiPanel对象将面板扩展到全屏toSmallSizenoneLobiPanel对象将面板收缩到最小toggleSizenoneLobiPanel对象在全屏和最小面板之间切换closenoneLobiPanel对象关闭面板(将面板从文档中移除)setWidth(width)width - Integer, REQUIRED new width of the panelLobiPanel对象改变面板的宽度如果宽度超出minWidth和maxWidth之间的范围将使用minWidth或maxWidth来作为宽度setHeight(height)height - Integer, REQUIRED new height of the panelLobiPanel对象改变面板的高度如果高度超出minHeight和maxHeight之间的范围将使用minHeight或maxHeight来作为高度setSize(width, height)width - Integer, REQUIRED new width of the panelheight - Integer, REQUIRED new height of the panelLobiPanel对象通过指定的宽度和高度来设置面板的尺寸getPositionnone{x: left coordinate,y: top coordinate}获取面板的当前位置getWidthnone面板的Integer类型宽度获取面板的宽度getHeightnone面板的Integer类型高度获取面板的高度bringToFrontnoneLobiPanel对象如果面板被其它元素遮盖使用该方法将面板放置在前面enableDragnoneLobiPanel对象使面板可以被拖动在浮动面板中该方法自动被调用disableDragnoneLobiPanel对象禁止拖动面板enableResizenoneLobiPanel对象使面板可以修改尺寸disableResizenoneLobiPanel对象禁止面板修改尺寸startLoadingnoneLobiPanel对象开始加载stopLoadingnoneLobiPanel对象停止加载setLoadUrl(url)url - String , REQUIREDLobiPanel对象设置loadUrl属性load(params)params - MixedOPTIONALLobiPanel对象通过ajax来加载内容到.panel-body中destroynonejQuery元素销毁LobiPanel实例startTitleEditingnoneLobiPanel对象编辑面板的标题isTitleEditingnoneBoolean检测面板标题是否在编辑中cancelTitleEditingnoneLobiPanel对象取消新编辑的标题恢复原来的面板标题finishTitleEditingnoneLobiPanel对象完成面板标题的编辑enableTooltipsnoneLobiPanel对象允许在面板控制按钮上显示提示文本disableTooltipsnoneLobiPanel对象禁止在面板控制按钮上显示提示文本事件使用事件$(.lobipanel).on(init.lobiPanel, function(ev, lobiPanel){window.console.log(init event called);});$(.lobipanel).on(beforeUnpin.lobiPanel, function(ev, lobiPanel){window.console.log(Before unpin, lobiPanel);});$(.lobipanel).on(onSmallSize.lobiPanel, function(ev, lobiPanel){window.console.log(On small size, ev, lobiPanel);});$(.lobipanel).on(loaded.lobiPanel, function(ev, lobiPanel, result, status, xhr){window.console.log(Loaded, ev, lobiPanel, result, status, xhr);});事件描述init.lobiPanel当面板初始化时调用beforeUnpin.lobiPanel面板浮动前被调用onUnpin.lobiPanel面板浮动后被调用beforeClose.lobiPanel面板被关闭前调用onClose.lobiPanel面板被移除后调用beforeToFront.lobiPanel面板通过z-index属性被显示时调用onToFront.lobiPanel当面板被点击并通过z-index属性被显示时调用beforePin.lobiPanel面板被固定前调用onPin.lobiPanel面板被固定后调用beforeMinimize.lobiPanel面板最小化前调用onMinimize.lobiPanel面板最小化后调用beforeMaximize.lobiPanel面板最大化前调用onMaximize.lobiPanel面板最大化后调用beforeFullScreen.lobiPanel面板扩展到全屏前调用onFullScreen.lobiPanel面板扩展到全屏后调用beforeSmallSize.lobiPanel面板扩展从全屏时尚前调用onSmallSize.lobiPanel面板扩展从全屏时尚后调用beforeLoad.lobiPanel在面板内容被加载前调用startLoading.lobiPanel当通过ajax调用内容时触发loaded.lobiPanel当面板内容被加载后触发resizeStart.lobiPanelresize操作开始时触发onResize.lobiPanel在resize操作期间触发resizeStop.lobiPanel在浮动面板resize操作结束时触发dragged.lobiPanel在排序结束DOM元素位置改变后触发
