A while back I wrote a Quicklook plugin that displayed some text related to image files.
But I wanted to be able to show additional information when the user clicked a button or hovers over an image . The plugin uses a HTML construction to put the preview together. Apple has examples on how to do this in its Qucklook Plugin introduction . So I am not going to go into that here. But what I was missing was how to use Jquery. The Quicklook plugin is sandboxed and is not allowed to load any data from the outside world.
The simple answer is add the jquery Library file to your bundle and then reference it in the html.
This example will toggle hide/show a text area in the quick look preview.
My jquery file was in a directory name jq. So I simply dragged it into my project as normal. Making sure it was set to copy and create folders.
Then
1, Declare a URL variable as a CFURLRef .
#include <QuickLook/QuickLook.h>
CFURLRef URLRef;
2, Inside the OSStatus GeneratePreviewForURL( …
Declare the Bundle.
CFBundleRef bundle1;
bundle1 = QLPreviewRequestGetGeneratorBundle ( preview);
And Set the URL to the file in the bundle using CFBundleCopyResourceURL
Which returns the location of a resource contained in the specified bundle.
URLRef = CFBundleCopyResourceURL (bundle1, CFSTR ( “jquery.min.js” ), NULL , CFSTR ( ” jq/ ” ));
“jquery.min.js” the full file name. “jq/” the subfolder path .
3, Use the appendFormat to reference the query file.
[html appendString:@”<html><head>”];
[html appendFormat : @” <script src=%@></script>” , URLRef ];
4, How to make a command
[html appendString : @”<script>$(document).ready(function(){$(‘button’).click(function(){$(‘#textF’).toggle(1000);});});</script>” ];
5, The HTML
[html appendString : @”<button>toggle</button>” ];
[html appendString : @”</span> ><span data-mce-bogus=”1″ class=”mceItemHidden mceItemNbsp”> </span> This is the text to hide<span data-mce-bogus=”1″ class=”mceItemHidden mceItemNbsp”> </span>”];
The structure of the html is the same as normal html. <Head>,<script,<style>,<Body> and so on all go in the normal places..
But here we have to construct it using appendFormat and appendString.
Normal Javascript works also.
[html appendString : @”<a href=\”javascript:;\” onClick=\”document.getElementById(‘textF’).style.display=’none’;\”>Hide content again</a>” ];