Hi,
here are the steps you need to follow to use the jQuery plug-in (of course there are other approaches that you can take this is only one of them):
1. Download jQuery plug-in and save it to
/YourAppName/Scripts/PluginName/ (Note: This is our practice you can save the files to any other location)
2. Now you need to register your plug-in script with MonoX
protected
void
Page_Load(
object
sender, EventArgs e)
{
...
JavascriptUtility.RegisterClientScriptInclude(
this
,
"/YourAppName/Scripts/PluginName/jQuery.File1.js"
);
JavascriptUtility.RegisterClientScriptInclude(
this
,
"/YourAppName/Scripts/PluginName/jQuery.File2.js"
);
}
3. Now you need to use your plug-in in your Web part of Web page and you can use it like this
- Register your script from the code-behind (Note: this is jQuery auto grow script sample)
protected
void
Page_PreRender(
object
sender, EventArgs e)
{
string
expandScript = @"
$(document).ready(function() {
$.registerAutoGrow(
""
jq_expandingTextBoxSmall
""
);
});
";
JavascriptUtility.RegisterStartupScript(
this
,
this
.GetType(),
"expandComment"
, expandScript,
true
);
}
- Use the plug-in in the mark-up
<script type=
"text/javascript"
language=
"javascript"
>
//<![CDATA[
$(
'div.demo'
).slideUp(
'fast'
,
null
);
//]]>
</script>
Here is the example of MonoX Demo indicator
Code-behind
protected
void
Page_Load(
object
sender, EventArgs e)
{
CheckVisibility();
}
/// <summary>
/// Determines if the demo indicator should be shown.
/// </summary>
protected
virtual
void
CheckVisibility()
{
...
if
(
this
.Visible)
JavascriptUtility.RegisterClientScriptInclude(
this
, Paths.MonoX.Scripts.jquery_cookie_js);
}
Mark-up
<
div
class
=
"demo"
>
<%= DefaultResources.DemoIndicator %>
<
a
href
=
"#"
class
=
"close"
></
a
>
</
div
>
<
script
type
=
"text/javascript"
language
=
"javascript"
>
//
<![CDATA[
$('div.demo > .close').click(function() {
$('div.demo').slideUp('fast', function() {
$.cookie("DemoIndicatorClosed", "true", { expires: 365 });
});
});
//]]>
</
script
>
I hope this gives you a proper overview of what needs to be done to get the jQuery plug-in up and running.
Regards