******************
CFJQ
******************
Version: 0.7 (beta 1)
Date: 8/26/2008
Author: Michael Sprague
E-mail: msprague@hamilton.edu

******************
WHAT IS THIS?
******************

CFJQ is a library of custom tags that replace the built-in Coldfusion ajax interface tags.  The tags use jQuery 
functionality instead of YUI/EXT, resulting in an easier-to-use interface and a MUCH SMALLER FILE SIZE.  They 
do not function exactly the same as CFGRID, CFWINDOW, and CFTOOLTIP, but the attributes and concepts are very similar. 

******************
INSTALLATION
******************

1. Place the following files in your custom tags directory, 
or in the same directory as your CFM files:
grid.cfm
gridcolumn.cfm
gridconvert.cfm
window.cfm
tooltip.cfm

2. Place the /js/ folder in the root directory of your site.
NOTE: If you don't/can't place it in the root, then you will need to 
use the "pathto..." attributes of the custom tags (see below)

3. View index.cfm for the examples.

4. Read docs below!

******************
LICENSE
******************

ColdFusion portion of this project is made available under Creative Commons License
http://creativecommons.org/licenses/by/3.0/  

JavaScript libraries used in this project have separate authors and licensing.  Please view JS files for more details.

******************
CF_GRID
******************
<!--- Custom tag for Flexigrid/jQuery --->
<!---
WRITTEN BY: Michael Sprague, msprague@hamilton.edu
VERSION: 0.7 (beta 1)
UPDATED: 7/29/2008

USAGE: 
	<cf_grid name="firstattempt"  - must be unique (required)
			bind="cfc:test.cfm" - *see below, path to ajax file that returns JSON data, can only use cfC: prefix as of version 1 (optional, must specify this or query)	
			query="#queryname#" - use only for non-ajax grids, limited functionality (optional)
			title="Employees" - title for top of grid (optional)
			numrowsselector="true"  - Show the option to change number of results displayed (optional)
			numrows="10" - Rows per page (optional)
			buttonArray="" - JS Array for buttons in top bar.  See below.
			paging="true" - Use paging navigation bar (optional)
			sortcolumn="lastname" - Default sort column (required)
			sortdir="asc" - Default sort direction (optional)
			width="auto" - auto or pixel amount (optional)
			height="200" - pixel amount only, default 200 (optional)
			striped="true" - stripe alternating rows (optional)
			resizable="true" - allow resizing of grid, default true (optional)
			showColumnToggle="true"  - show toggling box in row headers (optional)
			rowClick="navTo({key});" - Functions only: Use {key} for identifier, no quotes around (optional)
			pathTojQuery="/js/jQuery126-min.js" - path to the jQuery library (optional)
			pathToFlexigrid="/js/flexigrid.js" - path to the Flexigrid JS file (optional)
			pathToFlexigridCSS="/js/flexigrid/flexigrid.css" - path to the flexigrid CSS file (must include images folder in same folder) (optional)
			>
		<cf_gridcolumn name="id" header="The ID" hide="true" />
		<cf_gridcolumn name="firstname" header="First Name" searchable="true" />
		<cf_gridcolumn name="lastname" header="Last Name" searchable="true" />
	</cf_grid>

* REMOTE DATA CALLS
	1. Several form variables are always present in the Ajax call for data
	form.query = The search string entered by the user.
	form.qtype = The column the user selected for search
	form.sortname = column to sort on
	form.sortorder = ascending or descending order
	form.page = current page number
	form.rp = results per page
	
	2. Remote data calls require the returned data to be in a specialized JSON format.  The cf_gridconvert tag will handle this for you.  
	
	Example...
	<cfquery name="getStaff" datasource="mydsn">
		SELECT id,firstname,lastname FROM staff
		<cfif form.query GT "">  <!--- for the search box --->
			WHERE #form.qtype# LIKE '%#form.query#%'
		</cfif>
		ORDER BY #form.sortname# #form.sortorder#
	</cfquery>
	<!--- convert and output.  For displayCols argument, always include primary key first --->
	<cf_gridconvert query="#getStaff#" columns="id,firstname,lastname" page="#form.page#" resultsper="#form.rp#" />
	


BUTTON ARRAY (optional)
	If you want to add buttons to the top toolbar, pass in a JavaScript array formatted as follows:
	 
		{name: 'Add', bclass: 'add', onpress : test},
		{name: 'Delete', bclass: 'delete', onpress : test},
		{separator: true}
	
	You will then need corresponding CSS and JavaScript functions for the buttons in your CFM file, for example:
	
		<style>
	        .flexigrid div.fbutton .add
	            {
	                background: url(css/images/add.png) no-repeat center left;
	            }
	        .flexigrid div.fbutton .delete
	            {
	                background: url(css/images/close.png) no-repeat center left;
	            }	
	    </style>
	
		
		<script language="javascript" type="text/javascript">
			test = function() {
				window.alert('test');
				}
		</script>

--->
******************
END CF_GRID
******************

******************
CF_WINDOW
******************

<!--- Custom tag for Modal Windows - jqModal --->
<!---
WRITTEN BY: Michael Sprague, msprague@hamilton.edu
VERSION: 0.7 (beta 1)
UPDATED: 8/25/2008

USAGE: 
<cf_window name="window" REQUIRED - becomes the id of the window
		initShow="false" - Show on page load or not (optional)
		title="Window Title"  - Appears in the title bar (optional)
		width="400px"  (optional)
		height="300px" (optional)
		closable="true" - Show the close button (optional)
		resizable="true"  - Show the resize handle (optional)
		source="windowtest.cfm" - Ajax source URL (optional)
		draggable="true" - Allow user to drag the window (optional)
		modal="true"- If true, requires action to close.  Otherwise user can click outside window to close. (optional)
		pathTojQuery="/js/jQuery126-min.js" - path to the jQuery library (optional)
		pathTojqModal="/js/jqModal.js" - path to the jqModal file (optional)
		pathTojqModalCSS="/js/jqModal/jqModal.css" - path to the desired CSS file (must include images folder in same folder) (optional)
		pathTojqDnR="/js/jqDnR.js" - path to the drag and resize add-on (optional)
		pathTojqForms="/js/jqForms.js" - path to the jqForms file for Ajax forms (optional)
		>
		Non-ajax window content can go here.
</cf_window>

INTERACTION WITH MODAL WINDOW:

Show/Hide - use jqmShow() and jqmHide() functions
		$('#windowname').jqmShow();
		$('#windowname').jqmHide();
		
Ajax - 	Use _content on the window name as the return area... example:
		$('#windowname_content').load('/applications/employee/search.cfm');
		(can also use $.ajax() method)

Forms - If you are using a form within a window, you can use this javascript above the form tag to make it submit by ajax...
		<script language="javascript" type="text/javascript">
			jqAjaxForm('testform');  // use the id of the form
		</script>		
		
Title - Change the title of a window with Javascript
		$('#windowname_title').html('test');
		
--->

******************
END CF_WINDOW
******************


******************
CF_TOOLTIP
******************

<!--- Custom tag for Tooltips - jTip --->
<!---
WRITTEN BY: Michael Sprague, msprague@hamilton.edu
VERSION: 0.7 (beta 1)
UPDATED: 8/26/2008

USAGE: 
<cf_tooltip 
		sourcefortooltip="tooltiptest.cfm" - File to load via Ajax (optional)
		tooltip="Content for toolip" - Static (non-ajax) content for the tooltip  (optional)
		tipcaption="This is the title bar" (optional)
		pathTojQuery="/js/jQuery126-min.js" - path to the jQuery library (optional)
		pathTojTip="/js/jTip.inline-support.js" - path to the jTip (inline version) file (optional)
		pathTojqTipCSS="/js/jTip/css/global.css"" - path to the desired CSS file (must include images folder in same folder) (optional)
		>
		Any element here.
</cf_tooltip>

		
--->

******************
END CF_TOOLTIP
******************