Jquery

From EQdkp Plus Wiki

Introduction

The jquery core class is the Javascript Helper Class of EQDKP-PLUS. Jquery is an open source Javascript framework. All our Javascript is based on jQuery, some plugins are custom written for eqdkpplus. To be more flexible and allow users to easily use this features, i wrote the jquery abstraction class. Please use this functions if possible, and do not directly use jquery plugins provided in the core.

Available Functions

Set Custom UI

$jquery->CustomUI($template)

This function is used to set the custom UI CSS. This function is called in the core.php, and should not be used into plugins. It adds the link to the custom ui css to the template engine.

Code Editor

Introduction

The Code editor function allows you to use a textarea with a syntax highlighter. Usefull for Editors, p.e. the Layout Editor.

Source Code

$jquery->CodeEditor(ID, CODE, TYPE, OPTIONS);

Function Limiters

Name	Description	Possible Values
TYPE	The Type of the dialog	html, xml, css, html_js
ID	name and ID of the textarea	string
CODE	The Source code to be shown	string
OPTIONS	Additional Options	array

Option Array Values

Option Name	Description	Default Value
no_css	Do not use the CSS, use custom one	false
textarea_height	height of the textarea contining the code editor	350px
no_linenumbers	do not show line numbers	false

Dialog

Introduction

The Dialogs are javascript overlay dialogs, p.e. as in a lightbox. Could be used at any place, as a modal or normal window.

Source Code

$jquery->Dialog(NAME, WINDOW_HEADER, OPTIONS, TYPE);

Function Limiters

Name	Description	Possible Values
TYPE	The Type of the dialog	url, confirm, alert
NAME	function Name to be called, p.e. 'fe_portalsettings' means function fe_portalsettings();	string
WINDOW_HEADER	The Text shown in the Window head	string
OPTIONS	Additional Options	array

Option Array Values

Option Name	Description	Available for TYPE
url	the URL to be opened or redirected (confirm)	url, confirm
message	the message to be shown in the window	alert, confirm
withid	the id of the function p.e. test(withid)	confirm, url
custom_js	Use custom JS Code instead of redirect to url when confirmed	confirm
cancel_js	JS Code for canceling the dialog	confirm
confirm_name	Used in the PLUS-Confirms, to pass the values of the selected inputs to the confirm box	confirm
buttontxt	The text of the "confirm" button	confirm
confirm_url	Used in the PLUS-Confirms, the URL where to pass the POST and fetch the text to be shown instead of the #replacedata# in the languagestring	confirm
message	The message to be shown	url, alert, confirm
onclose	redirect on window close	url
width	Width of the window	url, alert, confirm
height	Height of the window	url, alert, confirm
buttons	Pass Code for Buttons, default is NULL (p.e. 'buttons' => "{ 'save': function(){ $('#editCategoryForm').submit(); $(this).dialog('close'); } }")	url
modal	Modal window, true/false	url
resize	User can resize window, true/false	url
draggable	User can drag&drop window, true/false	url

Slider

Introduction

Sliders, based on the jquery.ui. Can be used as ranged sliders or single sliders.

Source code

$jquery->Slider(ID, OPTIONS, TYPE);

Function Limiters

Name	Description	Possible Values
TYPE	The Type of the dialog	normal, range
ID	name and ID of the slider	string
OPTIONS	Additional Options	array

Option Array Values

Option Name	Description	Default Value	For Type
min	Minimum slider Value	integer	range
max	Maximum slider Value	integer	range
values	Values array, p.e. from config	array(min, max)	range
label	Label text for the slider	string	range
width	Width of the Slider	string	range

Autocomplete

Introduction

Possibility to add an autocomplete feature to an existing input.

Source Code

$jquery->Autocomplete(ID, DATAARRAY);

Function Limiters

Name	Description	Possible Values
ID	name and ID of the slider	string
DATAARRAY	Array with autocomplete items	array

Dropdownmenu

Introduction

A simple dropdown menu, p.e. used in the charmanager for providing a better handling.

Source Code

$jquery->DropDownMenu(ID, ITEMS, IMAGEPATH ,BUTTON);

Function Limiters

Name	Description	Possible Values
ID	ID of the text input to attach autocomplete	string
ITEMS	Array with menu items	array
IMAGEPATH	Path to the menu images	string
BUTTON	Button Text	string

Suckerfish

Introduction

a full Dropdownmenu solution, based on the suckerfish concept, using jquery for animations && support for Internet Explorer, p.e. used in the admin menu of 0.7.

Source Code

$jquery->SuckerFishMenu(DATAARRAY, NAME, IMAGEPATH, NODEFIMAGE);

Function Limiters

Name	Description	Possible Values
NAME	name of the menu, must be unique	string
DATAARRAY	Array with autocomplete items	array
IMAGEPATH	Path to the menu images	string
NODEFIMAGE	Do not use the default menu image, p.e. the puzzle icon	true/false

Accordion

Introduction

Add an accordion, p.e. used for bosssuite things in the portal modules.

Source Code

$jquery->Accordion(NAME, LIST){;

Function Limiters

Name	Description	Possible Values
NAME	Name/ID of the accordion (must be unique)	string
LIST	Content array in the format: title => content	array

Growl

Introduction

This function is used in the $core->message() function. Please use this function instead of the direct jquery function, i see no need in describing the growl functionality. It is based on the Growl notification sytsem for MacOS X.

Calendar

Introduction

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span.

Source Code

$jquery->Calendar(NAME, VALUE, JSCODE, OPTIONS):

Function Limiters

Name	Description	Possible Values
ID	Name/ID of the calendar (must be unique)	string
VALUE	Value for the input field	string
JSCODE	additional javascript code attached to the input field	string
OPTIONS	Additional Options	array

Option Array Values

Option Name	Description	Default Value
class	The class of the input field (optional value)	null
id	The id of the input field (optional value)	null
format	Date format	user->style[datenotimeshort]
cal_icons	Show calendar icon in text field	true
show_buttons	Show Button panel in Calendar	false
number_months	How many months should be shown	1
year_range	Use the year range	false
other_months	Show other months	false
change_fields	(text needed here)	false
timepicker	use timepicker	false
timeformat	timeformat to use	user->style[time]
return_function	return js-function	false

Tab

Introduction

Use the UI Tabs. This function is hardly used, you must insert all data into the tab dataarray. If you want to use it on an existing page, have a look at tab_header()

Source Code

$jquery->Tab(NAME, DATAARRAY, COOKIE, OPTIONS){

Function Limiters

Name	Description	Possible Values
NAME	Name/ID of the tab (must be unique)	string
DATAARRAY	Array with tabs data	array
COOKIE	Save the selection in a cookie	true/false
OPTIONS	Use own options for tabs, not the preselected ones	true/false

Tab II

Introduction

Use the UI Tabs.

Source Code

$jquery->Tab_header(NAME, COOKIE, OPTIONS);

Function Limiters

Name	Description	Possible Values
NAME	Name/ID of the tab (must be unique)	string
COOKIE	Save the selection in a cookie	true/false
OPTIONS	Use own options for tabs, not the preselected ones	true/false

SELECT A TAB

$jquery->Tab_Select(NAME, SELECTION);

If you want to select a tab, use this one: The name is the same as in the Tab_header function, the SELECTION value is the number of the tab, starting with 0. The first tab == 0, the second tab == 1, etc

Rightclick menu

Introduction

Add a rightclick menu . Used in Raidplaner p.e. to handle the twink signin/change for admins

Source Code

$jquery->RightClickMenu(ID, DIVID, DATA, WIDTH)

Function Limiters

Name	Description	Possible Values
ID	name and ID of the menue (must be unique)	string
DIVID	ID of the div to attach the menu to	array
DATA	Array with menu items	array
WIDTH	Array with autocomplete items	default: 170px
RETURNJS	boolean, wether to return js-function	false

Colorpicker

Introduction

Add a colorpicker to the page. The function returns the input field

Source Code

$jquery->colorpicker(ID, VALUE, SIZE='14', JSCODE);

Function Limiters

Name	Description	Possible Values
ID	name and ID of the colorpicker	string
VALUE	Default Value to be shown, p.e. config value	string
VALUE	Size of the input field	default: 14
JSCODE	Additional javascript Code for the input field	string

Progress Bar

Introduction

Add a styled Progress bar to the page, Value & bar progress can be changed during runtime using jquery

Source Code

$jquery->ProgressBar(ID, VALUE, TEXT='', TEXTALIGN='center', DIRECTOUT=false);

Function Limiters

Name	Description	Default Values
ID	name and ID of the Progressbar (must be unique)	--
VALUE	Array with autocomplete items	--
TEXT	text shown into the progress bar	null
TEXTALIGN	align for the text shown into the progress bar	center
DIRECTOUT	Direct output of the code, using jquery	false

Change Progressbar value

$jquery->SetProgressbarValue(ID, VALUE);

If you want to change the Progressbar value in your script (maybe using ajax), this is your friend.

StarRating

Introduction

Ajax Starrating

MultiSelect

Introduction

MultiSelect with checkboxes

rssFeeder

Introduction

Provide RSS Feeds fetched by Async. AJAX, p.e. the News on the admin index

timePicker

Introduction

A time picker. Hopefullly this will be integrated into the datepicker till release of 0.7

PieChart

Introduction

Part of a jquery Plot plugin, output pie charts

LineChart

Introduction

Part of a jquery Plot plugin, output line charts

qtip

Introduction

Add a tooltip

Source Code

$jquery->qtip(NAME, CONTENT, OPTIONS);

Function Limiters

Name	Description	Default Values
NAME	name and ID of the qTip (must be unique)	--
CONTENT	The content of the tooltip	--
OPTIONS	additional options to use	(my, at, classes, contfunc

Option Array Values

Option Name	Description	Default Value
at	at the bottom right (jQuery UI Position plugin)	bottom center
my	Position my top left (jQuery UI Position plugin)	top center
classes	Use extra classes
contfunc	Use a javascript function instead of a content text/html	content

Collapse

Introduction

Create collapsable content, used p.e. in the portal module headers

Source Code

$jquery->Collapse(ID, HIDE, PERSIST);

Function Limiters

Name	Description	Default Values
ID	name and ID of the collapsable box (must be unique)	--
HIDE	Hidden on default	--
PERSIST	set a cookie to save the state of the collapsable box	--

Ajax Dropdowns

Introduction

Two dropdowns, the second one reads content via ajax & is attached to first one. p.e. used in the game-language selector

Validate

Introduction

A powefull jquery Form validation. Validate your forms.

Source Code

$jquery->Validate(ID, MESSAGES, CUSTOMCODE);

Function Limiters

Name	Description	Default Values
ID	ID of the form to validate (must be unique)	--
MESSAGES	An array with the error messages	false
CUSTOMCODE	Use custom code/functions instead of messages

Validate Tabs

It is possible to validate forms in tabs. See user settings for Demo. The code itsself is nearly the same

$jquery->ValidateTab(ID, MESSAGES);

Reset Validation

If you want to reset the validation for a form element, use this function

$jquery->ResetValidate(ID);

Image Uploader

Introduction

An ajax image uploader, using the forms plugin. Usefull if you want to upload a single image file.

Source Code

Init the Image Uploader by using this code. You need a form field (input) with an unique ID. This ID is your INPUTID and will be filled with the temporary file name.

$jquery->imageUploader(ID, INPUTID, IMGNAME, IMGPATH, OPTIONS);

In your save function, use this code to convert & move the temporary file to the destination folder

$jquery->MoveUploadedImage(TEMPFILE, FOLDERPATH);

The TEMPFILE is the file written to your form input field (see above) (format: timestamp__filename.extension). The folderpath should be achieved using the pcache, p.e. $pcache->FolderPath('test', 'eqdkp')

Function Limiters

Name	Description	Default Values
ID	ID of the image uploader (must be unique)	--
INPUTID	The id of the input field where the image name should be copied to	--
IMGNAME	The name of the image to be shown on load	--
IMGPATH	The image path where the final image is saved to, use $pcache->FolderPath('test', 'eqdkp')	--
OPTIONS	additional options to use	width, height

Option Array Values

Option Name	Description	Default Value
width	The allowed width for images	3000
height	The allowed height for images	3000
resize	Resize the images to the width & height given	false
prevheight	The height of the preview image	150
noimgfile	Define a custom "no image available" image (eoor path already set!)	'images/no_pic.png'
deletelink	Set a link to a delete function if you want to use this feature. If a link is set, a delete button is shown	false

Helper Functions

sanitize javascript

Quote Input to be used as Javascript input

Jquery - EQdkp Plus Wiki

Jquery

From EQdkp Plus Wiki

Contents

Introduction

Available Functions

Set Custom UI

Code Editor

Introduction

Source Code

Function Limiters

Option Array Values

Dialog

Introduction

Source Code

Function Limiters

Option Array Values

Slider

Introduction

Source code

Function Limiters

Option Array Values

Autocomplete

Introduction

Source Code

Function Limiters

Dropdownmenu

Introduction

Source Code

Function Limiters

Suckerfish

Introduction

Source Code

Function Limiters

Accordion

Introduction

Source Code

Function Limiters

Growl

Introduction

Calendar

Introduction

Source Code

Function Limiters

Option Array Values

Tab

Introduction

Source Code

Function Limiters

Tab II

Introduction

Source Code

Function Limiters

SELECT A TAB

Rightclick menu

Introduction

Source Code

Function Limiters

Colorpicker

Introduction

Source Code

Function Limiters

Progress Bar

Introduction

Source Code

Function Limiters

Change Progressbar value

StarRating

Introduction

MultiSelect

Introduction

rssFeeder

Introduction

timePicker

Introduction

PieChart

Introduction

LineChart

Introduction

qtip