index.html

jquery插件。像iGOOGLE主页一样布局自己的网页。很好用

   <p>
    As you see, you can determine the language to use in the Widgets plugin
    with the "i18n" configuration settings, so, if you want to use images instead
    links, you can put the HTML of a image in the appropiate link text.
   </p>

   <h3>Plugin optional cookies</h3>
   <p>
    Easy Widgets can be responsible for the position of the Widgets into the
    columns, the collapse state of the Widgets, for example. You can determine
    to use cookies for this and can determine all about the cookies, take a look
    at the default "cookies" settings for Easy Widgets:
   </p>

   <form action="none">
    <div>
     <textarea cols="80" rows="11">

    // Only for the optional cookie feature
    cookies : {
      path : '',
      domain : '',
      expires : 90,
      secure : false,
      closeName : 'easywidgets-close',
      positionName : 'easywidgets-position',
      collapseName : 'easywidgets-collapse'
    },

     </textarea>
    </div>
   </form>

   <p>
    However, by default the plugin not use cookies, because as you can see
    bellow, you can determine how the Widgets is showing using the HTML
    markup, and some server stuff. But, if you want to use cookies, you can
    use the appropiate option in the "behaviour" settings of the plugin.
   </p>

   <h3>Plugin optional behaviour</h3>
   <p>
    Easy Widgets have some behaviour settings that you can change for your needs:
   </p>

   <form action="none">
    <div>
     <textarea cols="80" rows="11">

    // Plugin behaviour
    behaviour : {
      dragDelay : 100,
      dragRevert : 100,
      dragOpacity : 0.8,
      useCookies : false
    },

     </textarea>
    </div>
   </form>

   <p>
    Maybe the most relevant option in the behaviour settings is "useCookies".
    If you use cookies, the plugin can be responsible for store the Widgets
    positions and collapse and closed states, and of course the maintenence of
    this cookies, fixed this when a Widget is no more use, for example. In other
    words, the Widget store in cookies the position for a Widget, for example,
    and after you not print anymore this Widget: the plugin can detect this
    situation and clean the appropiate cookie to no store unexisting Widgets.
   </p>

   <h3>Plugin optional callbacks</h3>
   <p>
    Easy Widgets allow to handle a lot of task in the Widget via callbacks that
    you can attach to the appropiate configuration settings, here is all of the
    available Easy Widgets callbacks:
   </p>

   <form action="none">
    <div>
     <textarea cols="80" rows="11">

    // Callbacks functions
    callbacks : {
      onEdit : null,
      onClose : null,
      onExtend : null,
      onDragStop : null,
      onCollapse : null,
      onEditQuery : null,
      onCloseQuery : null,
      onCancelEdit : null,
      onExtendQuery : null,
      onCollapseQuery : null,
      onCancelEditQuery : null
    },

     </textarea>
    </div>
   </form>

   <h3>Give me all the power!</h3>
   <p>
    As you can see, the Easy Widgets plugin can be use without any option, using
    the default settings, but you can determine all the plugin stuff, between the
    Widget container, CSS selectors to use, option name, string to use, etc., etc.
    Here is all the default settings of the plugin, that you change if needed, but
    can use directly too, or change somethings, whatever you want:
   </p>

   <form action="none">
    <div>
     <textarea cols="80" rows="31">

  /**
   * Fill the plugin default settings
   */

  $.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,

      // Cookies (require Cookie plugin) to store positions and states
      useCookies : false
    },

    // 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 : 'easywidgets-close',

      // Cookie name for positined Widgets
      positionName : 'easywidgets-position',

      // Cookie name for collapsed Widgets
      collapseName : 'easywidgets-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 editbox is closed, send the link and the widget objects
      onEdit : null,

      // When a Widget is closed, send the link and the widget objects
      onClose : null,

      // When a Widget is extend, send the link and the widget objects
      onExtend : 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 editbox is try to close, send the link and the widget objects
      onEditQuery : 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 a Widget is try to expand, send the link and the widget objects
      onExtendQuery : 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
    },

    // 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 column)
      // The container can be "div" or "li", for example. In the first case
      // use another "div" as column, and a "ul" in the case of "li".
      container : 'div',

      // Class identifier for a Widget
      widget : '.widget',

      // Class identifier for a Widget handle (header)
      handle : '.widget-head',

      // Class for the Widget header links container
      menuLinks : '.widget-menu-links',

      // Class identifier for a Widget column (parents of Widgets)
      columns : '.widget-column',

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

     </textarea>
    </div>
   </form>
 
   <p>
    Now, please, see the plugin examples, enjoy it, test the plugin, change the
    default options, apply some style to the Widgets, in fact, enjoy Easy Widgets
    plugin and thanks a lot for your interest!
   </p>

  </div>
  <!-- /content -->

  <div id="footer">
   Copyrights 2008 <a href="http://www.bitacora.davidesperalta.com/jquery-easywidgets" title="This plugin in my weblog">Easy Widgets jQuery plugin</a> by
   <a href="http://www.bitacora.davidesperalta.com/"
    title="David Esperalta blog">David Esperalta</a>
  </div>

 </body>
</html>