Navigation Menu

Skip to content

Commit

Permalink
Item11889:
Browse files Browse the repository at this point in the history 
   * added means to hide the close button on textboxlist values
   * docu improvements to textboxlixst and pnotify

git-svn-id: http://svn.foswiki.org/branches/Release01x01@15196 0b4bb1d4-4e5a-0410-9cc4-b2b747904278
  • Loading branch information
GeorgeClark authored and GeorgeClark committed Jul 26, 2012
1 parent 593213a commit dd92b4c
Show file tree
Hide file tree
Showing 7 changed files with 144 additions and 53 deletions.
79 changes: 47 additions & 32 deletions JQueryPlugin/data/System/JQueryPNotify.txt
View file
@@ -1,4 +1,4 @@
%META:TOPICINFO{author="ProjectContributor" date="1296208856" format="1.1" version="1"}%
%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1336982694" format="1.1" reprev="4" version="4"}%
%META:TOPICPARENT{name="JQueryPlugin"}%
---+ %TOPIC%
%JQPLUGINS{"pnotify"
Expand Down Expand Up @@ -56,42 +56,57 @@ The plugin uses the jQuery UI CSS library for styling, which means it is fully a

---++ Examples
%JQREQUIRE{"pnotify"}%
%JQTHEME{"lightness"}%
%ADDTOZONE{
"script"
id="PNotifyDemoScript"
text="<literal><script type='text/javascript'>
// example with a message stack
var stack_topleft = {'dir1': 'down', 'dir2': 'right', 'push': 'top'};
function showMessage(title, text, err) {
var err = Math.round(Math.random());
var opts = {
pnotify_title: title,
pnotify_text: text,
pnotify_addclass: 'stack-topleft',
pnotify_stack: stack_topleft,
pnotify_closer: false,
pnotify_delay: 4000,
pnotify_nonblock: true,
pnotify_opacity: 0.9
};
if (err) {
opts.pnotify_type = 'error';
}
jQuery.pnotify(opts);
};
</script></literal>"
require="JQUERYPLUGIN::PNOTIFY"
}%
%ADDTOZONE{
"head"
id="PNotifyDemoStyle"
text="<literal><style type='text/css' media='all'>

---++ A simple notice
<a href="#" class="pnotifyHelloWorld">click me</a>

%ADDTOZONE{"script" require="JQUERYPLUGIN::PNOTIFY" text="<literal>
<script>
jQuery(function($) {
$('.pnotifyHelloWorld').click(function() {
$.pnotify({
pnotify_text: 'Hello World',
pnotify_delay: 1000,
pnotify_closer: false,
pnotify_history: false
});
return false;
});
});
</script></literal>"}%

---++ A customized one
%ADDTOZONE{"script" require="JQUERYPLUGIN::PNOTIFY" text="<literal>
<script>
// example with a message stack
var stack_topleft = {'dir1': 'down', 'dir2': 'right', 'push': 'top'};
function showMessage(title, text, err) {
var err = Math.round(Math.random());
var opts = {
pnotify_title: title,
pnotify_text: text,
pnotify_addclass: 'stack-topleft',
pnotify_stack: stack_topleft,
pnotify_closer: false,
pnotify_delay: 4000,
pnotify_nonblock: true,
pnotify_opacity: 0.9
};
if (err) {
opts.pnotify_type = 'error';
}
jQuery.pnotify(opts);
};
</script></literal>"}%

%ADDTOZONE{"head" text="<literal>
<style>
.ui-pnotify.stack-topleft {
top: 15px;
left: 15px;
right: auto;
}
</style></literal>"}%

%BUTTON{"Show message" onclick="showMessage('Note', 'This is a notification. Click again to see more.')"}%
%CLEAR%
4 changes: 3 additions & 1 deletion JQueryPlugin/data/System/JQueryPlugin.txt
View file
Expand Up @@ -138,7 +138,9 @@ reduce bandwidth and speed up interactive performance.
| Version: | %$VERSION% |
| Change History: | <!-- versions below in reverse order -->&nbsp; |
| 01 Jun 2012: | (4.34) - simplemodal updated to 1.4.2. |
| 10 Apr 2012: | (4.41) - Added !PatternSkin theme |
| 23 May 2012: | (4.41) - Item11889. \
added means to hide the close button on textboxlist values; \
docu improvements to textboxlixst and pnotify |
| 10 Apr 2012: | (4.40) - Item11397, Item11742. \
use a JSON instead of &lt;meta> to export preferences to javascript; \
add jquery-1.7.2 (new default); \
Expand Down
2 changes: 1 addition & 1 deletion JQueryPlugin/data/System/JQueryScrollTo.txt
View file
@@ -1,4 +1,4 @@
%META:TOPICINFO{author="micha" comment="reprev" date="1333530884" format="1.1" reprev="3" version="3"}%
%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1333530884" format="1.1" reprev="3" version="3"}%
%META:TOPICPARENT{name="JQueryPlugin"}%
---+ %TOPIC%
%JQPLUGINS{"scrollto"
Expand Down
67 changes: 67 additions & 0 deletions JQueryPlugin/data/System/JQueryTextboxList.txt
View file
Expand Up @@ -9,11 +9,78 @@
"
}%

%TOC%

---++ Description
%STARTSECTION{"summary"}%
Turns a text input into a Facebook like list widget with autocompletion.
This plugin adds a new formfield type =textboxlist= to DataForms.
%ENDSECTION{"summary"}%

---++ Usage

An html input field can be turned into a textboxlist widget either using javascript or using the =jqTextboxList= css class.

Using javascript:

<verbatim class="html">
<input type="text" name="tags" />

<script>
jQuery(function($) {
$("input[name='tags']").textboxlist(options);
});
</script>
</verbatim>

Using css:

<verbatim class="html">
<input type="text" name="tags" class="jqTextboxList {options}" />
</verbatim>

In both cases =options= is a json object to customized the textboxlist to your needs.

---++ Options

| *Name* | *Description* | *Default* |
| containerClass | css class of the widget container | jqTextboxListContainer |
| listValueClass | css class of values in the list | jqTextboxListValue |
| closeClass | css class of the close button of a list value | jqTextboxListClose |
| enableClose | boolean flag toggling the display of a close button on a list value | true |
| doSort | boolean flag enabling to sort list values when displaying them | false |
| inputName | name of the input element used for list values; equals to the name of the original input field if undefined | undefined |
| resetControl | jquery selector to specify a reset button; will revert changes to the initial list of values | undefined |
| clearControl | jquery selector to specify a clear button that will empty the textboxlist | undefined |
| autocomplete | defines the source for tag suggestions displayed using a %SYSTEMWEB.JQueryUIAutocomplete widget; e.g. this can be an array or an url | undefined |
| onClear | method called when the list is cleared | undefined |
| onReset | method called when the list is resetted | undefined |
| onSelect | method called when a value is selected | undefined |
| onDeselect | method called when a value is removed from the list | undefined |

----++ Events

Instead of specifying callbacks using the =onSelect= or =onDeselect= options, custom events are emitted by the textboxlist widget
that your own code can be bound to.

Example:

<verbatim class="html">
<input type="text" class="jqTextboxList" id="mylist" />
<script>
jQuery(function($) {
$("#mylist").bind("SelectValue", function(value) {
...
});
});
</script>
</verbatim>

| *Event* | *Parameters* | *Description* |
| <nop>SelectValue | value | triggered when a value is selected |
| <nop>DeleteValue | value | triggered when a value is deselected |


---++ Examples
%JQREQUIRE{"textboxlist"}%

Expand Down
2 changes: 1 addition & 1 deletion JQueryPlugin/lib/Foswiki/Plugins/JQueryPlugin.pm
View file
Expand Up @@ -20,7 +20,7 @@ use vars qw(
);

$VERSION = '$Rev$';
$RELEASE = '4.40';
$RELEASE = '4.41';
$SHORTDESCRIPTION = 'jQuery <nop>JavaScript library for Foswiki';
$NO_PREFS_IN_TOPIC = 1;

Expand Down
5 changes: 4 additions & 1 deletion JQueryPlugin/pub/System/JQueryPlugin/plugins/textboxlist/jquery.textboxlist.uncompressed.css
View file
Expand Up @@ -8,14 +8,17 @@
margin:2px 0px;
}
.jqTextboxListValue {
padding:1px 15px 1px 5px;
padding:1px 5px;
border:1px solid #CAD8F3;
margin:2px 5px 2px 0px;
background:#DEE7F8;
position:relative;
_float:left; /* IE6 doesn't know inline-block*/
display:inline-block;
}
.jqTextboxListEnableClose .jqTextboxListValue {
padding-right:15px;
}
a.jqTextboxListClose:hover,
a.jqTextboxListClose {
background-color:transparent;
Expand Down
38 changes: 21 additions & 17 deletions JQueryPlugin/pub/System/JQueryPlugin/plugins/textboxlist/jquery.textboxlist.uncompressed.js
View file
@@ -1,7 +1,7 @@
/*
* jQuery textbox list plugin 2.0
* jQuery textbox list plugin 2.1
*
* Copyright (c) 2009-2011 Michael Daum http://michaeldaumconsulting.com
* Copyright (c) 2009-2012 Michael Daum http://michaeldaumconsulting.com
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
Expand Down Expand Up @@ -45,8 +45,14 @@
}

// wrap
self.container = self.input.wrap("<div class="+self.opts.containerClass+"></div>")
.parent().append("<span class='foswikiClear'></span>");
self.container = self.input.wrap("<div />")
.parent()
.addClass(self.opts.containerClass)
.append("<span class='foswikiClear'></span>");

if (self.opts.enableClose) {
self.container.addClass("jqTextboxListEnableClose");
}

// clear button
if (self.opts.clearControl) {
Expand Down Expand Up @@ -236,13 +242,15 @@
$.log("TEXTBOXLIST: val="+val+" title="+title);
className = "tag_"+title.replace(/["' ]/, "_");
input = "<input type='hidden' name='"+self.opts.inputName+"' value='"+val+"' title='"+title+"' />";
close = $("<a href='#' title='remove "+title+"'></a>").
addClass(self.opts.closeClass).
click(function(e) {
e.preventDefault();
self.input.trigger("DeleteValue", $(this).parent().find("input").val());
return false;
});
if (self.opts.enableClose) {
close = $("<a href='#' title='remove "+title+"'></a>").
addClass(self.opts.closeClass).
click(function(e) {
e.preventDefault();
self.input.trigger("DeleteValue", $(this).parent().find("input").val());
return false;
});
}
$("<span></span>").addClass(self.opts.listValueClass+" "+className).
append(input).
append(close).
Expand Down Expand Up @@ -307,6 +315,7 @@
containerClass: 'jqTextboxListContainer',
listValueClass: 'jqTextboxListValue',
closeClass: 'jqTextboxListClose',
enableClose: true,
doSort: false,
inputName: undefined,
resetControl: undefined,
Expand All @@ -315,12 +324,7 @@
onClear: undefined,
onReset: undefined,
onSelect: undefined,
onDeselect: undefined,
selectFirst:false,
autoFill:false,
matchCase:false,
matchContains:false,
matchSubset:true
onDeselect: undefined
};

})(jQuery);

0 comments on commit dd92b4c

Please sign in to comment.