How can I include JQuery UI into my own module...?

Talk about writing modules and plugins for CMS Made Simple, or about specific core functionality. This board is for PHP programmers that are contributing to CMSMS not for site developers
Locked
cve
Forum Members
Forum Members
Posts: 44
Joined: Wed Jul 07, 2010 10:54 am

How can I include JQuery UI into my own module...?

Post by cve »

Hi there, i'm working with new module it's call somethink like 'shop', but it's prety simple... I want to build gui for that, and I would like to use Jquery UI with some theme. In my core of module I've include required files of JQuery UI throught GetHeaderHTML() function. And when I check out my tag in admin section of module with FireBug all files are included.
The problem is in my admin section of module I've got some input with submit button, and I'd like to add ".button()" function from JqueryUI to mentioned submit with theme...
All css classes are applied to my submit button, but I don't see colours from my JQueryUI theme... The submit button looks like standard cms made simple button... Why it not works...?
In firebug all looks very well... Maybe the order of includes files in head section is important to applied css cascading rules...? my tag looks like that:

Code: Select all

<head>
<meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-9 Ted Kulp. All rights reserved." />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow" />
<title>CMS Made Simple Site</title>
<link rel="stylesheet" type="text/css" href="style.php" />

<__script__ type="text/javascript" src="../lib/jquery/js/jquery-1.4.2.min.js"></__script>
<__script__ type="text/javascript" src="../lib/jquery/js/jquery-ui-1.8.4.custom.min.js"></__script>
<__script__ type="text/javascript" src="../lib/jquery/js/jquery.ui.nestedSortable.js"></__script>

<__script__ type="text/javascript" src="../lib/jquery/js/jquery.json-2.2.js"></__script>
<__script__ type="text/javascript" src="themes/NCleanGrey/includes/standard.js"></__script>
<link rel="shortcut icon" href="themes/NCleanGrey/images/layout/ncleangrey-favicon.ico" />
<link rel="Bookmark" href="themes/NCleanGrey/images/layout/ncleangrey-favicon.ico" />
		<!--[if IE]>
		<style type="text/css">
		ul#nav li ul  {
		filter: alpha(opacity=95);
		}
		/* Nav Tools  */
		div.MainMenu { 
		width:97%;
		}
		</style>
		<![endif]-->
		<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="themes/NCleanGrey/css/ie6.css" />
		<![endif]-->
		
<link rel="stylesheet" type="text/css" href="/modules/Sklep/assets/css/main.css" media="all" /><link rel="stylesheet" type="text/css" href="/modules/Sklep/assets/css/dot-luv/jquery-ui-1.8.7.custom.css" media="all" /><__script__ type="text/javascript" src="/modules/Sklep/assets/js/main.js"></__script>
</head>
What am I doing wrong?.. please help...
Top
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: How can I include JQuery UI into my own module...?

Post by Dr.CSS »

Using Firefox with the Web Developers tool bar you can edit css and use outline current element to hove parts in page to see what it's called so you can check the CSS for targeted calls to it...
Top
Locked

Return to “Developers Discussion”