Easy Widgets拖拽框架

什麼是Easy Widgets？

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'
}
};

Easy Widgets拖拽框架

rhel6使用centos6.3的源，使redhat能使用yum源

js中的hashmap實現

oracle11g導出DMP不能導空表解決方法

java 遠程調試weblogic/java的DEBUG

ldap AD整合工具類

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結