Adding jquery ui themes Question

Topics: General
Mar 29, 2011 at 6:52 PM

I would like adding jQuery UI Themes (css-files) to my module.
Where should I add the stylesheets / images scripts to my module/project? This is in fact a question that generally is appicable for all kinds of styles / images / javascripts that are needed for a particular module.  When adding the stylesheet I get a message Element 'link' can not be nested within element 'link'. Reason for this would probably be that the view i develop is merged within an Orchard "master-page".

 

Coordinator
Mar 29, 2011 at 7:06 PM

Uh? How are you adding it?

Mar 29, 2011 at 7:29 PM

example: index.cshtml

@{
    <link href="../../Themes/redmond/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.5.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
   
    <script language="javascript" type="text/javascript">
        $(function () {
            $('#tabs').tabs;
        });
    </script>   
}

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
    </ul>
    <div id="tabs-1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div id="tabs-2">
        Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet
        ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum
        bibendum.</div>
    <div id="tabs-3">
        Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi
        urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor
        ullamcorper augue.</div>
</div>

Apr 1, 2011 at 6:50 PM

no one can say what i'm doing wrong?

Coordinator
Apr 1, 2011 at 6:57 PM

Why is this called index.cshtml? You should be using the Script and Style APIs to require stylesheets and scripts:

@{
  Style.Require("jQuery_Orchard").AtHead();
  Script.Require("jQueryUI_Tabs").AtHead();
}
Apr 1, 2011 at 8:51 PM
Edited Apr 1, 2011 at 9:07 PM

Thanks ok, sorry but what do you mean "why is this called index.cshtml"? Is it wrong calling my View index.cshtml?

It is not clear to me where i find alls these API's (Script, Style, ...) and javascript files "jQuery_Orchard", "jQueryUI_Tabs"?
When I want extra javascript and/or css files to my module project, should I add them at the module level (Scripts, Styles folders)?

Coordinator
Apr 1, 2011 at 8:53 PM

Well, it's very very generic and nondescriptive. Just asking.

Apr 2, 2011 at 6:09 AM
Edited Apr 2, 2011 at 6:10 AM

Well i'm still in experimenting mode therefore using index.cshtml (just standard things)

It is not clear to me where i find alls these API's (Script, Style, ...) (and description of these) and javascript files (for jQuery, jQueryUI, ...) that are "integrated in Orchard "jQuery_Orchard", "jQueryUI_Tabs"?
When I want extra javascript and/or css files to my module project, should I add them at the module level (Scripts, Styles folders)?

Thanks

Coordinator
Apr 2, 2011 at 6:22 AM

You don't need to find them, they are available from templates.

If you want to add extra javascript or styles, then it depends whether these files will be reused or if they are for your code only. In one case you'll want to create your own manifest for your files (see the Orchard.jQuery module for an example, the ResourceManifest file in particular). In the other case, just use Script.Include and Style.Include.

Apr 2, 2011 at 1:58 PM
Edited Apr 8, 2011 at 1:14 PM

Ok. and in the latter case (only for my code) adding the .javascript and css files to my module's Scripts and Style folders?