Helper Bar Framework

By caoglish — Last update Feb 20, 2013 — Installed 526 times.

Script Summary: Greasemonkey plugin development framework, add a useful and functional Helper menu bar in the page.



Version: 0.4.2a

Script homepage

Greasemonkey plugin development framework, add a useful and functional Helper menu bar in the page.

Brocco style code explanation:

API/Options/Code Document

--Pure Helperbar.js library--
you can 'require' this version in greasemonkey directly:click here to library page

-------------------------
Current code include:
1.plugin code
2.demo code
3.API demo code

Note: This framework required jquery.js

How to see the demo
1.install plugin
2.refresh page
3.see the page of the bottom.
4.see the demo Helper Bar

See Online Demo:Helper Bar DEMO
-
-

How to use
1. move over the Helper bar to see the menu
2. double click mouse to toggle the Helper Bar
3. mover over the root menu item to see the sub menu item

Development Hints

  1. Framework
    1. menu_tree
      • one column of menu tree contains 'root' and 'list'. 'root' contains a main menu item(object); 'list' contains a list(array) of menu items(ojbect)
      • menu item is a object, 'id' is the html tag id attribute(string),'title' is the menu item displaying name(string), 'click' is the event of onClick(function).
    2. menu_tree_list
      • contains several menu trees. how many column of menu items.
      • pass this menu tree in the menubar constructor.
  2. API
    1. bar = HelperBar.getbar(menu_tree_list,opts);
      • create a menubar in page bottom
      • menu_tree_list: setup a menu structure
      • opts: config options for the Helper bar.
      • singleton design pattern
    2. bar.msg(text,style)
      • display a text on the bar as a message
      • style(string) is the color, style(object) is css style sheet
      • return all text message(no html) on the bar if no parameter
    3. bar.cls()
      • clean the message on the bar
    4. bar.addmsg(text,style)
      • append a message in the Bar
      • style(string) is the color, style(object) is css style sheet
    5. bar.log(text)
      • append a message in the Bar
    6. bar.warn(text)
      • append a message in the Bar with default warning style
      • warning_size and warning_color of optsis the default warning style
    7. bar.html(html)
      • set a html code in message area of the Bar
      • return the html code in the message area if no parameter
    8. bar.append(html)
      • append a text in message area of the Bar
    9. bar.title(text)
      • append a text in title area of the Bar

change log

version 0.4.2:
+option add msg_click allow user attach event when user click message aera
+option add bar_click allow user attach event when user click anywhere on the bar(not on menu)
-no longer support $.tag

$.tag source code is below:
$.tag = function (tag, opts) {
return $('<'>', opts);
};

version 0.4.1:
1. bar.data() for save data into localStorage, support string,array and object
2. bar.delData() for delete data from localStorage

version 0.4.0:
+clickClsMsg: user can click the msg to cls the msg.
+Helpbar.menu: a set API to create Menu. (menu builder)
+menuList object structure change: 1) no need id, if no root, use the last menu item of list as a root buttton.

version 0.3.1:
+font_family option for font of text in Helper Bar

version 0.3.0:
*change a few options' name:
warning_size -> warn_size
warning_color -> warn_color
warning_mode -> warn_mode
menubar_style.background_color -> bar_bg_color
menubar_style.opacity -> bar_opacity
menubar_style.font_color -> bar_font_color
menubar_items_style.background_color -> menu_bg_color
menubar_items_sytle.hover_background_color -> menu_hover_bg_color
menubar_items_style.font_color -> menu_font_color
*default menu_width set to "auto"
*change bar css to compitable with more website
+menu_separator_color option. default is black

version 0.2.9:
+add a footer area
+add bar.foot() and bar.clsFoot()
+bar_foot,foot_mode, foot_size add into options.default foot_mode is hide, default foot_size is 6px

version 0.2.8:
+add bar.open(url) API to open a url
+add clsTitle() to reset bar title.
+border_radius to set right top concer's radius of the bar.

version 0.2.7:
+add The hide_mode in options, The modes are all,onBar,notOnBar,notOnMenu,noHide
+the default hide_mode is notOnMenu

version 0.2.6:
+hide() and show() api to hide and show
+add safe_mode to settings,if unsafe mode, user can use getMenuBar() and getSettings() API.
+getMenuBar()return a jquery object call menubar, menubar is a jquery plugin for developing HelperBar
+getSetting() return the options(settings) of the Helperbar.

version 0.2.5:
+allow chaining API style, chaining API return the bar itself

version 0.2.4:
+Stingleton API Apply. use HelperBar.getbar(menu_tree_list,options) to create HelperBar.
+HelperBar.version() to return the version number.
- bar = new HelperBar(menu_tree_list,options) is no longer used.