Manipulate Data In URL Parameters - jQuery gp-link

File Size: 4.99 KB
Views Total: 778
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Manipulate Data In URL Parameters - jQuery gp-link

gp-link is a small jQuery plugin which helps developers add, remove, update parameters in the URL without loading the current web page.

See also:

How to use it:

1. Include jQuery library and the gp-link plugin (minified version) on the web page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/gp-link.min.js"></script>

2. Add a parameter to the URL using the gplink method.

<a href="index.html?param=1" class="full">Param 1</a>
$(document).ready(function() {
  $('a.full').gplink({
    'type': 'full'
  });
})

3. Add a parameter to the URL using the gplink method.

<a href="index.html?param=1" class="full">Param 1</a>
$(document).ready(function() {
  $('a.full').gplink({
    'type': 'full'
  });
})

4. Add & update the URL parameters using data attributes.

<button data-gplink-param="say" data-gplink-value="hello">
  Custom Param 1 (say=hello)
</button>
<button data-gplink-param="color" data-gplink-value="green">
  Custom Param 2 (color=green)
</button>
<button data-gplink-param="name" data-gplink-value="john">
  Custom Param 3 (name=john)
</button>
<button data-gplink-param="page" data-gplink-value="about" data-gplink-full="current">
  Custom Param 4 (name=john)
</button>
<button data-gplink-param="s" data-gplink-value="mykey" data-gplink-full="http://127.0.0.1:5500/about.html">
  Custom Param 5 (name=john)
</button>

5. Remove a specific parameter from the URL.

<span data-gplink-rm="say">Remove Say Param</span>

6. Remove all URL parameters.

<span data-gplink-rm="clear-all">Remove All</span>

Changelog:

2019-08-16

  • Fixed "Remove Param" function

This awesome jQuery plugin is developed by ucoder92. For more Advanced Usages, please check the demo page or visit the official website.