Create a gist now

Instantly share code, notes, and snippets.

@Golpha /jquery.interlink.js Secret
Last active Jan 17, 2016

What would you like to do?
jQuery Interlink Plugin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Page: regular example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="jquery.interlink.js" data-debug="false"></script>
</head>
<body>
<div class="example-target" data-foo="foo">
</div>
<div class="example-target" data-foo="bar">
</div>
<script type="text/babel">
$('.example-target').interlink({
components: {
common: {
render: function()
{
return (
<p className="foo">{this.props.message}</p>
);
},
},
},
links: {
foo: {
match: {
foo: 'bar',
},
style: {
backgroundColor: 'silver',
},
handler: function(event, element, components)
{
ReactDOM.render(
<components.common message="string matching" />,
element
);
},
},
bar: {
match: {
foo: /f(.*)/g,
},
style: {
backgroundColor: 'blue',
color: 'white',
},
handler: function(event, element, components)
{
ReactDOM.render(
<components.common message="regular expression matching" />,
element
);
},
},
},
}, 'ui:init');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Page: regular example</title>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="jquery.interlink.js" data-debug="false"></script>
</head>
<body>
<div class="example-target" data-foo="foo">
</div>
<div class="example-target" data-foo="bar">
</div>
<script>
$('.example-target').interlink({
foo: {
match: {
foo: 'bar',
},
style: {
backgroundColor: 'silver',
},
handler: function(event, element)
{
element.html(
'<p>string matching</p>'
);
},
},
bar: {
match: {
foo: /f(.*)/g,
},
style: {
backgroundColor: 'blue',
color: 'white',
},
handler: function(event, element)
{
element.html(
'<p>regex matching</p>'
);
},
},
}, 'ui:init');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment