什么是Easy Widgets?
Easy Widgets:是一个jQuery的插件。通过它可以很容易的掌握布局。
首先展示下Easy Widgets的最简单的功能。
js层,我们只需要输入:
view plain print ?
$(function(){ // Prepare the Widgets $.fn.EasyWidgets(); }); html层,我们只需要定义:
view plain print ?
<div class="widget-place"> <div class="widget"> <div class="widget-header"> Widget title here </div> <div class="widget-editbox"> Widget edit stuff here </div> <div class="widget-content"> Widget content here </div> </div> </div> <div class="widget-place"></div> 上面的小例子,我定义了两个widget,其中一个widget可以拉到另外一个widget中。当然您可以通过Easy Widgets的简单的配置来改变这些。这里我们使用的是默认的插件设置。 当然Easy Widgets并不只是只能使用div作为容易,你可以使用其他的元素作为容器。比如说ul。Easy Widgets由header,editbox 和content三部分组成。 header:故名思意就是头部的意思。他用来包含widget标题,以及一些操作按钮。editbox:就是当您编辑widget所层现的东西。这里可以放一些form之类的。对他进行修改。content:就是widget的具体内容。 Easy Widgets默认的CSS:
view plain print ?
.widget-place { margin: 0; padding: 0; float: left; width: 33.3%; height: auto; list-style: none; min-height: 400px; } .widget-placeholder { border: #000 dashed 1px; } .widget {} .widget-header {} .widget-menu { } .widget-menu a { margin: 0 0 0 0.5em; } .widget-editbox {} .widget-content {} 当然您可以修改默认的样式来达到您想要的效果。网上已经有很多很炫的效果大家自己可以去参考。 Easy Widgets也是一种全球化的插件,它有自己的语言包,您可以改变它默认的显示,当然你也可以通过图片来代替对应的文字,用来显示menu。 view plain print ?
i18n : { editText : 'Edit', closeText : 'Close', extendText : 'Extend', collapseText : 'Collapse', cancelEditText : 'Cancel', editTitle : 'Edit this widget', closeTitle : 'Close this widget', confirmMsg : 'Remove this widget?', cancelEditTitle : 'Cancel edition', extendTitle : 'Extend this widget', collapseTitle : 'Collapse this widget' }你可以通过设置cookie去保存Easy Widgets的当前状态,默认情况下Easy Widgets是关闭cookie的,您只需通过一下代码去设置cookie状态 view plain print ?
cookies : { path : '', domain : '', expires : 90, secure : false, closeName : 'ew-close', disableName : 'ew-disable', positionName : 'ew-position', collapseName : 'ew-collapse' }, 同时Easy Widgets也可以让您定义多个task的callback事件。下面的代码列出所有的callback事件 view plain print ?
callbacks : { onAdd : null, onEdit : null, onShow : null, onHide : null, onClose : null, onEnable : null, onExtend : null, onDisable : null, onDragStop : null, onCollapse : null, onAddQuery : null, onEditQuery : null, onShowQuery : null, onHideQuery : null, onCloseQuery : null, onCancelEdit : null, onEnableQuery : null, onExtendQuery : null, onDisableQuery : null, onCollapseQuery : null, onCancelEditQuery : null, onChangePositions : null, onRefreshPositions : null },好了,介绍完插件的使用,下面列出Easy Widgets所有的默认设置。当然大家在使用的时候可以不修改就能使用,但是也可以通过一定的设置去完成自己想要的结果。 view plain print ?
Easy Widgets:是一个jQuery的插件。通过它可以很容易的掌握布局。
首先展示下Easy Widgets的最简单的功能。
js层,我们只需要输入:
view plain print ?
- $(function(){
- // Prepare the Widgets
- $.fn.EasyWidgets();
- });
$(function(){ // Prepare the Widgets $.fn.EasyWidgets(); }); html层,我们只需要定义:
view plain print ?
- <div class="widget-place"> <div class="widget"> <div class="widget-header"> Widget title here </div> <div class="widget-editbox"> Widget edit stuff here </div> <div class="widget-content"> Widget content here </div> </div> </div> <div class="widget-place"></div>
<div class="widget-place"> <div class="widget"> <div class="widget-header"> Widget title here </div> <div class="widget-editbox"> Widget edit stuff here </div> <div class="widget-content"> Widget content here </div> </div> </div> <div class="widget-place"></div> 上面的小例子,我定义了两个widget,其中一个widget可以拉到另外一个widget中。当然您可以通过Easy Widgets的简单的配置来改变这些。这里我们使用的是默认的插件设置。 当然Easy Widgets并不只是只能使用div作为容易,你可以使用其他的元素作为容器。比如说ul。Easy Widgets由header,editbox 和content三部分组成。 header:故名思意就是头部的意思。他用来包含widget标题,以及一些操作按钮。editbox:就是当您编辑widget所层现的东西。这里可以放一些form之类的。对他进行修改。content:就是widget的具体内容。 Easy Widgets默认的CSS:
view plain print ?
- .widget-place { margin: 0; padding: 0; float: left; width: 33.3%; height: auto; list-style: none; min-height: 400px; }
- .widget-placeholder { border: #000 dashed 1px; }
- .widget {}
- .widget-header {}
- .widget-menu { }
- .widget-menu a { margin: 0 0 0 0.5em; }
- .widget-editbox {}
- .widget-content {}
.widget-place { margin: 0; padding: 0; float: left; width: 33.3%; height: auto; list-style: none; min-height: 400px; } .widget-placeholder { border: #000 dashed 1px; } .widget {} .widget-header {} .widget-menu { } .widget-menu a { margin: 0 0 0 0.5em; } .widget-editbox {} .widget-content {} 当然您可以修改默认的样式来达到您想要的效果。网上已经有很多很炫的效果大家自己可以去参考。 Easy Widgets也是一种全球化的插件,它有自己的语言包,您可以改变它默认的显示,当然你也可以通过图片来代替对应的文字,用来显示menu。 view plain print ?
- i18n : {
- editText : 'Edit',
- closeText : 'Close',
- extendText : 'Extend',
- collapseText : 'Collapse',
- cancelEditText : 'Cancel',
- editTitle : 'Edit this widget',
- closeTitle : 'Close this widget',
- confirmMsg : 'Remove this widget?',
- cancelEditTitle : 'Cancel edition',
- extendTitle : 'Extend this widget',
- collapseTitle : 'Collapse this widget'
- }
i18n : { editText : 'Edit', closeText : 'Close', extendText : 'Extend', collapseText : 'Collapse', cancelEditText : 'Cancel', editTitle : 'Edit this widget', closeTitle : 'Close this widget', confirmMsg : 'Remove this widget?', cancelEditTitle : 'Cancel edition', extendTitle : 'Extend this widget', collapseTitle : 'Collapse this widget' }你可以通过设置cookie去保存Easy Widgets的当前状态,默认情况下Easy Widgets是关闭cookie的,您只需通过一下代码去设置cookie状态 view plain print ?
- cookies : {
- path : '',
- domain : '',
- expires : 90,
- secure : false,
- closeName : 'ew-close',
- disableName : 'ew-disable',
- positionName : 'ew-position',
- collapseName : 'ew-collapse'
- },
cookies : { path : '', domain : '', expires : 90, secure : false, closeName : 'ew-close', disableName : 'ew-disable', positionName : 'ew-position', collapseName : 'ew-collapse' }, 同时Easy Widgets也可以让您定义多个task的callback事件。下面的代码列出所有的callback事件 view plain print ?
- callbacks : {
- onAdd : null,
- onEdit : null,
- onShow : null,
- onHide : null,
- onClose : null,
- onEnable : null,
- onExtend : null,
- onDisable : null,
- onDragStop : null,
- onCollapse : null,
- onAddQuery : null,
- onEditQuery : null,
- onShowQuery : null,
- onHideQuery : null,
- onCloseQuery : null,
- onCancelEdit : null,
- onEnableQuery : null,
- onExtendQuery : null,
- onDisableQuery : null,
- onCollapseQuery : null,
- onCancelEditQuery : null,
- onChangePositions : null,
- onRefreshPositions : null
- },
callbacks : { onAdd : null, onEdit : null, onShow : null, onHide : null, onClose : null, onEnable : null, onExtend : null, onDisable : null, onDragStop : null, onCollapse : null, onAddQuery : null, onEditQuery : null, onShowQuery : null, onHideQuery : null, onCloseQuery : null, onCancelEdit : null, onEnableQuery : null, onExtendQuery : null, onDisableQuery : null, onCollapseQuery : null, onCancelEditQuery : null, onChangePositions : null, onRefreshPositions : null },好了,介绍完插件的使用,下面列出Easy Widgets所有的默认设置。当然大家在使用的时候可以不修改就能使用,但是也可以通过一定的设置去完成自己想要的结果。 view plain print ?
- $.fn.EasyWidgets.defaults = {
-
- // Behaviour of the plugin
- behaviour : {
-
- // Miliseconds delay between mousedown and drag start
- dragDelay : 100,
-
- // Miliseconds delay between mouseup and drag stop
- dragRevert : 100,
-
- // Determinme the opacity of Widget when start drag
- dragOpacity : 0.8,
-
- // Use cookies to store positions and states
- useCookies : false
- },
-
- // Some effects that can be apply sometimes
- effects : {
-
- // Miliseconds for effects duration
- effectDuration : 500,
-
- // Can be none, slide or fade
- widgetShow : 'none',
- widgetHide : 'none',
- widgetClose : 'none',
- widgetExtend : 'none',
- widgetCollapse : 'none',
- widgetOpenEdit : 'none',
- widgetCloseEdit : 'none',
- widgetCancelEdit : 'none'
- },
-
- // Only for the optional cookie feature
- cookies : {
-
- // Cookie path
- path : '',
-
- // Cookie domain
- domain : '',
-
- // Cookie expiration time in days
- expires : 90,
-
- // Store a secure cookie?
- secure : false,
-
- // Cookie name for close Widgets
- closeName : 'ew-close',
-
- // Cookie name for enable/disable Widgets
- disableName : 'ew-disable',
-
- // Cookie name for positined Widgets
- positionName : 'ew-position',
-
- // Cookie name for collapsed Widgets
- collapseName : 'ew-collapse'
- },
-
- // Options name to use in the HTML markup
- options : {
-
- // To recognize a movable Widget
- movable : 'movable',
-
- // To recognize a editable Widget
- editable : 'editable',
-
- // To recognize a collapse Widget
- collapse : 'collapse',
-
- // To recognize a removable Widget
- removable : 'removable',
-
- // To recognize a collapsable Widget
- collapsable : 'collapsable',
-
- // To recognize Widget that require confirmation when remove
- closeConfirm : 'closeconfirm'
- },
-
- // Callbacks functions
- callbacks : {
-
- // When a Widget is added on demand, send the widget object and place ID
- onAdd : null,
-
- // When a editbox is closed, send the link and the widget objects
- onEdit : null,
-
- // When a Widget is show, send the widget object
- onShow : null,
-
- // When a Widget is hide, send the widget object
- onHide : null,
-
- // When a Widget is closed, send the link and the widget objects
- onClose : null,
-
- // When Widgets are enabled using the appropiate public method
- onEnable : null,
-
- // When a Widget is extend, send the link and the widget objects
- onExtend : null,
-
- // When Widgets are disabled using the appropiate public method
- onDisable : null,
-
- // When a editbox is closed, send a ui object, see jQuery::sortable()
- onDragStop : null,
-
- // When a Widget is collapse, send the link and the widget objects
- onCollapse : null,
-
- // When a Widget is try to added, send the widget object and place ID
- onAddQuery : null,
-
- // When a editbox is try to close, send the link and the widget objects
- onEditQuery : null,
-
- // When a Widget is try to show, send the widget object
- onShowQuery : null,
-
- // When a Widget is try to hide, send the widget object
- onHideQuery : null,
-
- // When a Widget is try to close, send the link and the widget objects
- onCloseQuery : null,
-
- // When a editbox is cancel (close), send the link and the widget objects
- onCancelEdit : null,
-
- // When Widgets are enabled using the appropiate public method
- onEnableQuery : null,
-
- // When a Widget is try to expand, send the link and the widget objects
- onExtendQuery : null,
-
- // When Widgets are disabled using the appropiate public method
- onDisableQuery : null,
-
- // When a Widget is try to expand, send the link and the widget objects
- onCollapseQuery : null,
-
- // When a editbox is try to cancel, send the link and the widget objects
- onCancelEditQuery : null,
-
- // When one Widget is repositioned, send the positions serialization
- onChangePositions : null,
-
- // When Widgets need repositioned, get the serialization positions
- onRefreshPositions : null
- },
-
- // Selectors in HTML markup. All can be change by you, but not all is
- // used in the HTML markup. For example, the "editLink" or "closeLink"
- // is prepared by the plugin for every Widget.
- selectors : {
-
- // Container of a Widget (into another element that use as place)
- // The container can be "div" or "li", for example. In the first case
- // use another "div" as place, and a "ul" in the case of "li".
- container : 'div',
-
- // Class identifier for a Widget
- widget : '.widget',
-
- // Class identifier for a Widget place (parents of Widgets)
- places : '.widget-place',
-
- // Class identifier for a Widget header (handle)
- header : '.widget-header',
-
- // Class for the Widget header menu
- widgetMenu : '.widget-menu',
-
- // Class identifier for Widget editboxes
- editbox : '.widget-editbox',
-
- // Class identifier for Widget content
- content : '.widget-content',
-
- // Class identifier for editbox close link or button, for example
- closeEdit : '.widget-close-editbox',
-
- // Class identifier for a Widget edit link
- editLink : '.widget-editlink',
-
- // Class identifier for a Widget close link
- closeLink : '.widget-closelink',
-
- // Class identifier for Widgets placehoders
- placeHolder : 'widget-placeholder',
-
- // Class identifier for a Widget collapse link
- collapseLink : '.widget-collapselink'
- },
-
- // To be translate the plugin into another languages
- // But this variables can be used to show images instead
- // links text, if you preffer. In this case set the HTML
- // of the IMG elements.
- i18n : {
-
- // Widget edit link text
- editText : 'Edit',
-
- // Widget close link text
- closeText : 'Close',
-
- // Widget extend link text
- extendText : 'Extend',
-
- // Widget collapse link text
- collapseText : 'Collapse',
-
- // Widget cancel edit link text
- cancelEditText : 'Cancel',
-
- // Widget edition link title
- editTitle : 'Edit this widget',
-
- // Widget close link title
- closeTitle : 'Close this widget',
-
- // Widget confirmation dialog message
- confirmMsg : 'Remove this widget?',
-
- // Widget cancel edit link title
- cancelEditTitle : 'Cancel edition',
-
- // Widget extend link title
- extendTitle : 'Extend this widget',
-
- // Widget collapse link title
- collapseTitle : 'Collapse this widget'
- }
- };