christiansalazar avatar christiansalazar committed 3e3b579

adding jQueryUI and extraCss cappabilities

Comments (0)

Files changed (4)

 	public $modelName = '';	// example: 'Flavor'
 	public $parentKey; 		// example: 'categoryid' (flavor belongs to catgid)
 	public $attribute;		// example: 'flavor_name'
+	public $extraCss;		// any css class name, or the alias: 'jquery.ui'
 
 	public $newItemLabel = 'New Item';
 	public $deleteConfirmation = 'Please confirm the item deletion.';
 			$this->onSuccess = "function(){}";
 		if($this->onError == null)
 			$this->onError = "function(){}";
+		if($this->extraCss==null)
+			$this->extraCss='';
 	}
 
 	public function run(){
 		$delete  = $this->_baseUrl.'/delete.png';
 		$update  = $this->_baseUrl.'/update.png';
 		
+		$css1 = $this->extraCss;
+		$css2 = '';
+		if($this->extraCss == 'jquery.ui'){
+			$css1 = 'ui-widget-content';
+			$css2 = 'ui-widget-header';
+		}
+
+
 		echo 
 "
-<div id={$this->id} class='dippy'>
-	<div class='dcontrol'>
+<div id={$this->id} class='dippy {$css1}'>
+	<div class='dcontrol {$css2}'>
 		<span>{$this->title}</span>
 		<a class='newItem'>{$this->newItemLabel}<img src='{$loading}'></a>
 	</div>
 			'enterSaveText'=>$this->enterSaveText,
 			'validateErrorText'=>$this->validateErrorText,
 			'validateRegExp'=>$this->validateRegExp,
+			'extraCss'=>$this->extraCss,
 			'data'=>serialize(array(
 				'modelName'=>$this->modelName,
 				'parentKey'=>$this->parentKey,
 </div>
 ~~~
 
+#jQuery UI and extra CSS.
+
+You can associate the style passing the string 'jquery.ui' to the 'extraCss'
+attribute, Dippy Widget will work togheter with jQuery UI.
+
+Also, you can pass a single class name to the 'extraCss' attribute.
+
+
 #onChange Event
 
 Call a JS function whenever a Dippy selection changes. You can use the
 	padding: 3px;
 	margin: 3px;
 	background-color: white;
+	color: black;
 }
 .dippy .dcontrol {
 	background-color: #ddd;
 
 .drow-selected {
 	background-color: #ddff99;
+	color: black;
 }
 
 .dippy .drow-removed {
 	}
 
 	var newItem = function(id, label){
+
+		var className = 'drow';
+
 		div.append( 
-		"<div alt='"+id+"' class='drow'>"+
+		"<div alt='"+id+"' class='"+className+"'>"+
 		"<img class='wait' src='"+options.imgWait+"'>"+
 		"<span class='text' title='"+id+"'>"+label+"</span>"+
 		"<img class='ddelete' src='"+options.imgDelete+"' >"+
 				var prior = div.find("[alt|='"+old_id+"']");
 				var item  = $(this);
 				div.data('current_item',id);
-				item.addClass('drow-selected');	
-				prior.removeClass('drow-selected');
+				
+				var className = 'drow-selected';
+				if(options.extraCss == 'jquery.ui')
+					className = 'ui-state-active';
+				item.addClass(className);	
+				prior.removeClass(className);
+
 				var _div = item.parent();
 				var _this = _div.data('_this');
 				_this.change(item, prior);
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.