jQuery(ing) with Lift Webframework and jQuery UI
a short startup description
jQuery UI is an extension JavaScript for the jQuery JavaScript library which provides widgets and effects for web userinterfaces. The Lift Webframework provides some elementary support for the bundled jQuery library. jQuery UI is not included...
But if you know it is not difficult to use the UI extension with the provided API in Lift.
First you have to download the jQuery UI bundle. On http://jqueryui.com/download you can customize the download with the components and example theme you want to use.
Then extract the css and js paths from the bundle to the public accessible part of you project.
I've used the root directory.
Now update your code or templates to include a link to the CSS file and script tags for the jquery-ui-1.7.2.custom.min.js file:
<head>
<link href="/css/smoothness/jquery-ui-1.7.2.custom.css" type="text/css" rel="stylesheet" media="screen, projection"/>
<script src="/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"/>
</head>
Think about Lift Webframework provides a functionality called "Head Merge"!
Now the jQuery UI functions are ready for use in your application...
For example to open a dialog you can do this:
import net.liftweb.http.js.JE
import net.liftweb.http.js.jquery.JqJE
def openDialog:String = {
(JqJE.JqId(JE.Str("dialogpopup")) ~>
JE.JsFunc("dialog")).cmd.toJsCmd
}
<div id="dialogpopup" title="Dialog Title"></div>
Please click <a href="" onclick={openDialog}>here</a> to open a new window.
This should provide you an idea how to use the jQueryUI API with Lift.
But if you know it is not difficult to use the UI extension with the provided API in Lift.
First you have to download the jQuery UI bundle. On http://jqueryui.com/download you can customize the download with the components and example theme you want to use.
Then extract the css and js paths from the bundle to the public accessible part of you project.
I've used the root directory.
Now update your code or templates to include a link to the CSS file and script tags for the jquery-ui-1.7.2.custom.min.js file:
<head>
<link href="/css/smoothness/jquery-ui-1.7.2.custom.css" type="text/css" rel="stylesheet" media="screen, projection"/>
<script src="/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"/>
</head>
Think about Lift Webframework provides a functionality called "Head Merge"!
Now the jQuery UI functions are ready for use in your application...
For example to open a dialog you can do this:
import net.liftweb.http.js.JE
import net.liftweb.http.js.jquery.JqJE
def openDialog:String = {
(JqJE.JqId(JE.Str("dialogpopup")) ~>
JE.JsFunc("dialog")).cmd.toJsCmd
}
<div id="dialogpopup" title="Dialog Title"></div>
Please click <a href="" onclick={openDialog}>here</a> to open a new window.
This should provide you an idea how to use the jQueryUI API with Lift.