Formidable: Custom forms with JQuery and CSS3

I have moved! You'll find Formidable on my new Blog: http://salatsosse.ch/jquery/

Memu - A simple CSS / JavaScript / JQuery Menu

I have moved! You'll find Memu on my new Blog: http://salatsosse.ch/jquery/

An UI Framework for (the front-end) of Websites

There are many nice User Interface Frameworks for the Web. Some of the are made for Java (and they do a pretty good job of deuglifying it - at least for the user) but most of them can be used for every architecture, because they base solely on JavaScript (and / or JavaScript Frameworks like JQuery, MooTools, etc.) and CSS. Here's a list of a few of them.

• Echo (Java Only)
• YUI (The best Yahoo has come up with. Period.)
• Mocha (Based Upon MooTools)
• Vaadin (This one looks pretty, pretty sexy - the best Java UI there was, is, and ever will be)
• jQuery UI (I have a feeling you know this one ...)

While those Libraries are all very good and contain lots of widgets and other nice things - they are also big, hard to (learn to) use and did I say big? They are huge!

If you're designing a CMS backend or an enterprise intranet solution you just have to use one of them. But if you're "just" designing a "mid-range" website and you just like to provide a little more User Experience, those framworks / libraries are just overkill.

Now, whats the first thing you need if you start to build a website (from scratch)? A nice layout. Now there are a few options... you could spend some time building a CSS based cross-browser layout, you could just slam in a table or you could use a CSS framework. There are some very interesting, grid based CSS Frameworks. My favourite is blueprint - there are others, just do a google for "css frameworks".

Now long story short - i slammed together a little, let's say, website template, or website starter kit. This template (or kit) contains my micro ui widgets for jquery and a modified blueprint css framework.

Check a demo out here.

Now keep in mind: This is a work in progress and I'm creating this template for my own use (as well as for anyone's who likes it).

Download the package here.

Now run along and create a beautiful website!

MicroGallery

MicroGallery is one of the smallest (800 bytes) gallery plugins around. There are no fancy animations (as if one's watching pictures of products, one doesn't want to wait for them to fade in, slide down or whatever ...).

What MicroGallery does is:

• Showing thumbnails
• Letting the user click on  the thumbnails
• Showing the clicked thumbnail in a bigger size
• The 'target-element' in which the big pictures will be shown can be chosen, so you'll  be able to change the background-image of any element.

Screenshot

Demonstration
Check the demo out here.

HowTo
The HTML

<div id="microgallery-view"> 
</div> 
<div class="microgallery"> 
 <div class="microgallery-element"> 
  <a href="Images/mercury.jpg"><img alt="Planet" src="Images/mercury.jpg" /></a> 
 </div> 
 <div class="microgallery-element"> 
  <a href="Images/venus.gif"><img alt="Planet" src="Images/venus.gif" /></a> 
 </div> 
 <div class="microgallery-element"> 
  <a href="Images/earth.jpg"><img alt="Planet" src="Images/earth.jpg" /></a> 
 </div> 
 <div class="microgallery-element"> 
  <a href="Images/mars.jpg"><img alt="Planet" src="Images/mars.jpg" /></a> 
 </div> 
 <div class="microgallery-element"> 
  <a href="Images/jupiter.jpg"><img alt="Planet" src="Images/jupiter.jpg" /></a> 
 </div> 
 <div class="microgallery-element"> 
  <a href="Images/saturn.jpg"><img alt="Planet" src="Images/saturn.jpg" /></a> 
 </div> 
 <div class="microgallery-element"> 
  <a href="Images/uranus.jpg"><img alt="Planet" src="Images/uranus.jpg" /></a> 
 </div> 
 <div class="microgallery-element"> 
  <a href="Images/neptun.jpg"><img alt="Planet" src="Images/neptun.jpg" /></a> 
 </div> 
</div> 

The JavaScript

$('.microgallery-bg').microGallery({
    view: 'body'
});

$('.microgallery').microGallery({
    view: '#microgallery-view',
    defaultSelected: 2
});

Look at the demo for css samples :-).


Download
Source code
Packed for deployment

MicroModal

INFO: Take a look at my microUI website template. It contains the newest version of MicroModal and lots of other nice goodies!

MicroModal can be used to display a modal window on click. Useful scenarios include: "Are you sure you want to ...?", "Please enter ...!", and so on.

This isn't one of those huge modal scripts with CSS files and fancy graphics - if you want it fancy, use (or wait for) CSS3. This solution is fat-free.

Screeshot

Demonstration
Check out the demonstration here.

Example
The JavaScript

$('.micromodal').microModal({
    autoPositioning: true, // set true if you wish to center the modal window (default: true)
    overlay: {
        show: true,        // set true if you wish to how an overlay (default: true)
        color: '#fff',     // set the colour of the overlay (default: '#fff')
        opacity: 0.8       // set the opacity of the overlay (default: 0.8)
    }
});

The Html

<button class="micromodal target-changecolor">Let's change the background colour!</button>
  
<div id="changecolor" class="dialog">
 Do you really want to do this?
 <br /><br />
 <button onclick="$.fn.microModal.dialogs['#changecolor'].close();">No way!</button>
 <button onclick="$('body').css('background-color', '#fedcba');$.fn.microModal.dialogs['#changecolor'].close();">Sure</button>
</div>

The Css - if you don't know what to do yourself - find another JQuery Plugin ;-)

Download
Source Code
Compressed Code (for use in productive environment)

MicroTab 0.1 Released

I have moved! You'll find MicroTab on my new Blog: http://salatsosse.ch/jquery/

MicroFilter - Filter by elements

I have moved! You'll find MicroFilter on my new Blog: http://salatsosse.ch/jquery/

Filter for Telerik Mvc Grid Version 0.3

Hey, I just did a small update on my gridfilter for the Telerik MVC Grid.

There's just one change: You're now able to put different values into a textbox, just put a ";" between them. So a textbox using the delimiters is handled the same as multiple textboxes with separate values. The column and operator settings will be applied to all elements.

Get the new version here.

MicroView

WOOAA!

Microview has been published, read all about it here.

Here we go with my newest JQuery Plugin called MicroView. The main purpose of MicroView is to provide an easy stylable component / widget to display data recieved by JSON or XML. To achieve this, MicroView isn't table based but uses div-nested spans to display the data. This different approach enables you to present your data in many different ways, as the first picture shows. Switching between views is easy as well - and can be triggered client side. By switching a view you can also change the columns you wish to display (and f course their width). And oh yes, as you see in te picture, you can edit your data in every view, as long as your template allows it.

MicroMenu

Ok... here' another small and easy to use JQuery plugin. It's a menu that looks like those nice big Web2.0 service website-menus.

Here we go with a short Demonstration, give it a try and Download the plugin if you like what you see.

There are a few options, they're pretty easy to use, so go ahead and play with them.

orientation: 'left',
        backgroundCssClass : 'micromenu-background',
        hoverCssClass : 'micromenu-hover',
        hasChildCssClass : 'micromenu-has-child',
        childCssClass : 'micromenu-child',
        childWidth : 400,
        childHeight : 200,
        showAnimation : function(obj) { obj.show() },
        hideAnimation : function(obj) { obj.hide() }

Micro Accordion

JQuery Micro Accordion Plugin is a small (1.33 KB) plugin that creates a simple accordion - no bells or whistles. It's pretty easy to use just download it at the bottom of this post. A demo is included in the download.

Features

• It hasn't much features (you're not going to need anyway ...)
• Easy to implement.
• Supports custom Animations.
• It's small!

Screenshot

Demo
Try it here

Usage
The HTML Code:

<div class="microaccordion">
 <div class="micro">
  <a href="#">Title 1</a>
  <div>Content 1</div>
 </div>
 <div class="micro">
  <a href="#">Title 2</a>
  <div>Content 2</div>
 </div>
</div>

The JS Code:

$('.microaccordion').microAccordion({
 cssClassOpen: 'header-open',
 cssClassClosed: 'header-closed',
 cssClassHoverOpen: 'header-hover-open',
 cssClassHoverClosed: 'header-hover-closed',
 cssClassContent: 'content',
 openSingle: true,
 closeFunction: function (obj) {
   obj.hide();
 },
 toggleFunction: function (obj) {
   obj.toggle();
 }
});

Questions or problems? Just leave a comment.


Download
Get the following file hosted on ubuntu one:
Download Here

JQuery plugin to filter Telerik MVC Grid

This is a JQuery Plugin that enables you to filter the Telerik MVC Grid from outside the grid itself.

Changes
10.05.2010: Sorry guys, there was an debug alert in the script. I removed it in version 0.2.

10.06.2010: You're now able to put different values into a textbox, just put a ";" between them. So a textbox using the delimiters is handled the same as multiple textboxes with separate values. The column and operator settings will be applied to all elements.

What do I need?
Well, JQuery and the Telerik MVC Grid

Where do I start?
1. Give the grid a name, i.e. filteredGrid.
2. Put this one into document ready: $('#filteredGrid').gridFilter();

The "Apply Button"
By default, the apply button has to have the following class: "applyFilterButton"

What do I do in my html?

<input type="checkbox" class="gridfilter gf-op-range gf-col-Chambers" value="4::5" />
<input type="checkbox" class="gridfilter gf-op-range gf-col-Chambers" value="5::6" />
<input type="checkbox" class="gridfilter gf-op-eq gf-col-Chambers" value="5" />
<input type="checkbox" class="gridfilter gf-op-ne gf-col-Chambers" value="5" />
<input type="checkbox" class="gridfilter gf-op-gt gf-col-Chambers" value="5" />
<input type="radio" name="radiogroup" class="gridfilter gf-op-eq gf-col-Type" value="0" />
<input type="radio" name="radiogroup" class="gridfilter gf-op-eq gf-col-Type" value="1" />
<input type="radio" name="radiogroup" class="gridfilter gf-op-eq gf-col-Type" value="2" />
<input type="text" class="gridfilter gf-op-substringof gf-col-City" value="er" />
<input type="text" class="gridfilter gf-op-endswith gf-col-City" value="rn" />
<input type="text" class="gridfilter gf-op-startswith gf-col-City" value="be" />

Ok those are some pretty nice examples. Basically you give the input 3 classes:
the gridfilter class, the gf-op- class and the gf-col- class.


http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api.html


Name of the column you wish to filter

This one goes out to all the Vulcans
To the logic, operations on the same column get connected with an OR expression, different
columns get connected by an AND expression:

(column1 OR column1) AND (column2) AND (column3 OR column3)

I think thats pretty much it.. here you go with a nice CNF (conjunctive normal form) :-)

Download
Get it here (Version 0.2)
Get the newest version here (Version 0.3) (Changes)

Have fun!

JQuery Plugin Visual Studio Item Template

Here's a JQuery Plugin Item Template for Visual Studio (2010 but I guess it works with the older versions too - btw upgrade! :-))



1. Download file from above
2. Import template in Visual Studio
2.1 Drink a beer.
2.2 Copy the Zip File to: C:\Users\\Documents\Visual Studio 2010\Templates\ItemTemplates

Have fun.

BTW. The content of the added js file looks like this:

// Template generated by Daenu Probst http://codebrewery.blogspot.com/
// Based upon the excellent article http://www.learningjquery.com/2007/10/a-plugin-development-pattern
// Icon by http://jyrik.deviantart.com/

(function ($) {
    $.fn.pluginName = function (options) {
        var opts = $.extend({}, $.fn.pluginName.defaults, options);

        // iterate and reformat each matched element
        return this.each(function () {
            var obj = $(this);

            // ... Put your fancy JQuery_Plugin1 code here ...
        });
    };

    // private functions
    function myPrivateFunction(param1, param2) {
        // private function code
    };

    // public functions
    $.fn.pluginName.myPublicFunction = function (param1, param2) {
        // public function code
    };

    // public variables
    $.fn.pluginName.myPublicVariable = 'value1';

    // public accessible defaults
    // access with: $.fn.pluginName.defaults.option1 = 'value3';
    $.fn.pluginName.defaults = {
        option1: 'value1',
        option2: 'value2'
    };
})(jQuery);