jBookmarkEngine 0.7.2 b

jBookmarkEngine is a plugin developed for jQuery and improves the usage of bookmarks and is an innovation especialy for AJAX based websites without reload or websites which are useing tags with the onCLick-Attribute.

jBookmarkEngine simulate an a-tag in order to manipulate the url and add an anchor (#anchor) without an reload.

Update

General

News

• 20. November 2008 - The description of $.jBokmarEngine.nodeSplit() along with "define your own Anchor" is now available.

version 0.7.2 b

Changes

• Some bugs were fixed and a new function $.jBokmarEngine.nodeSplit (discription is following) was added to display temporarly the current anchor (or query), but the usage will be optimized. A test page envorld.de is online.

version 0.7.1 b

Changes

• you could use one element like <p></p>, <img>, <span> etc. and the anchor still be the text inside of the element and you could use the title attribute of the element to change the anchor text.

version 0.6.4 b

Changes

• new kind of formating
• the seperator is changeable
• $.jBookmarkEngine.URI.get(URI) is now $.jBookmarkEngine.URL.anchor(URL)

Bugfix

• each anchor is uncapitalised

Install jBookmarkEngine

Just include the following files in the head of your page

• jQuery Framework 1.2.6 or higher
• jBookmarkEngine Plugin
• jBookmarkEngine Plugin CSS

<script src="http://scripts.envo-media.de/jquery/jquery.js" type="text/javascript"></script>
<script src="http://scripts.envo-media.de/jquery/jBookmarkEngine.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://style.envo-media.de/jBookmarkEngine.css">

Now you can initilize jBookmarkEngine like this:

<script type="text/javascript">
$(document).ready( function(){
	
		$("#test li").jBookmarkEngine();
	
});
</script>

<script type="text/javascript">
$(document).ready( function(){
	
		$("#test li").jBookmarkEngine(
			$.jBookmarkEngine.format({
				seperator : '/',
				node: 'div',
				attr: ' dir="ltr" lang="de"'
			})		
		);
});
</script>

Usable Methods

• $(element).jBookmarkEngine(); [object] - Tranforms the text inside of 'element'. 'element' is using the CSS-Class declaration like this:
  • id: #id
  • class: .class
  • tag: p, a etc.
• $.jBookmarkEngine.format() - [Object] Edit formatsettings. only usable inside of $(element).jBookmarkEngine();.
  Add Values like this: {formatVal: val} !!more values have to separate by ',' (without ' ')!!
• $.jBokmarEngine.nodeSplit() [string] - return the anchor wich was defined by yourself (find more information in "Example: Define your own anchor")
• $.jBookmarkEngine.URL.anchor(URL) [string] - URL should be document.URL. return anchor (seperator anchor) while page (re)load
• $.jBookmarkEngine.info.re() [string] - Returns a String with Copyrightinformation

Parameters

• node [string] - Add a Node like like div, p, a etc. (defaults: 'p')
• attr [string] - Add some Atribute like title="something" etc. (defaults: '')
• nodeClass [string] - Add some Atribute like title="something" etc. (defaults: 'jBookmarkEngineNode')
• seperator[string] -
  • '/' is similar to file in url add content behind '/content_' files will call like this 'content_file.htm' otherwise 'file.htm'
  • '?' is similar to get in url
  • '/ ?' will add a GET-String to your file
    Example:
    1. '/ ?value=2' changed to 'file.htm?value=2'
    2. '/wp_ ?value=2' changed to 'wp_file.htm?value=2'
  • '#' is an anchor and set to default
• fileType [string] - if you use '/' you fileType will also be use (defaults '.htm')
• inside [function] - please useage of this function won't have a effect

CSS

• .jBookmarkEngineNode - Change the style of the Node-Parameter
• .jBookmarkEngineAnchor - Change the style of the simulated Anchor (<a></a>)

Real World Example

envorld.de is a test page of envo-media and use the jBookmarkEngine and additional jQuery.ajax and jScrollpane.

Example

Navigation

• Blog
• Archive
• Biography
• Home

<ul id="test" style="list-style-type:none;"> 
  <h2>Navigation</h2> 
  <li> Blog </li> 
  <li> Archive </li> 
  <li> Biography </li> 
  <li> Home </li> 
</ul>

Define your own anchor!!!

• Blog with anchor #blub
• 
• Biography
• Home

<ul id="test2" style="list-style-type:none;"> 
  <h2>View the anchor in you url!!!</h2> 
  <li> <span title="blub">Blog with anchor #blub</span> </li> 
  <li> <img id="xxl" title="Archive" src="http://www.penetrategrey.de/bblog/files/Image/Smileys/emoticon0106.gif"> </li> 
  <li> Biography </li> 
  <li> Home </li> 
</ul>

Discription
If you use an element like img, span etc., with title attribute inside of the jBookmarkEngine Fielad you could define an own anchor
Exp. <span title="help">?</span> will return help

Compatibility

• Firefox 3.x testet - works
• IE 5.x testet - works
• Safari testet - works
• Opera testet - works

If you test jBookmarkEngine in a browser which is untried, please send a short email to me, thereby i could fix bugs and update the browserlist.

Support

Links

• jQuery Plugin Homepage