Tag: jQuery

Saving place with jQuery and CSS based hover / context menu

Posted by – April 4, 2012

Monitors and theirs resolutions are getting bigger and bigger, but there is always a problem where to put all buttons, links and other controls to avoid overwhelmed UI. I am big fan of clean UI without unnecessary things used only from time to time. By default on screen should contain only the core information without distracting buttons, switches and things like that. Unfortunately all these additional stuff is required to work with an application so has to be implemented. The trickiest part is to make is available but in a subtle way.

I had such problem working on the last version of WebConsole. My solution is quite trivial and required a little bit of jQuery and CSS. I’ve solved the problem using as I call it “action menus”. These are context menu but activated by hovering mouse not right click. You can check how such “action menu” works in a screencast available below.

All three “action menus” presented in screencast above have the same HTML structure and use the same jQuery script. The look & feel has been totally customized in CSS so it is very useful and simple to use thing.

General structure of “action menu” and base CSS definition show two snippets below.

<div id="account-menu" class="action-menu">
    <span>Welcome <strong>Administrator</strong>!</span>
    <ul class="children">
        <li class="nowrap-text"><a href="#">Change Password</a></li>
        <li><a href="#">Sign Out</a></li>
    </ul>
</div>
div.action-menu {
    position: relative;
    margin: 0px;
    padding: 0px;
}

div.action-menu * {
    margin: 0px;
    padding: 0px;
}

div.action-menu a {
    text-decoration: none;
}

div.action-menu ul {
    list-style: none;
    display: none;
    position: absolute;
    z-index: 9999;
}

jQuery executed to make “action menu” reacting to hover is also very simple and straightforward.

// Adds action menu
function addActionMenus() {
    $('div.action-menu').hover(
        function () {
            $(this).addClass('hover');
            $(this).find('ul').show();
        },
        function () {
            $(this).removeClass('hover');
            $(this).find('ul').hide();
        }
    );
}

jQuery(function () {
    addActionMenus();
});

As I mentioned before rest of customization is done in CSS. The demo from screencast contains all code presented above and customizations made for each menu presented there. I am sharing it with you with hope it will be useful. You can download it here.

Please, let me know what do you think about this type of hiding actions available only in a particular contexts and my simple implementation.

jQuery UI tabs with vertical navigation

Posted by – March 18, 2012

I am currently working on a settings view for the WebConsole application. This view will consist of many smaller views for editing configuration. I am using jQuery UI is the obvious choice for me was Tabs control available in this library. Unfortunately I was not very happy with its default layout. The problem was that my main menu is laid out horizontally so I wanted to distinguish somehow tabs which are just below it. I have solved it changing navigation in tabs from horizontal to vertical. Fortunately it turned out very easy and required only some CSS. Below I am presenting the result, CSS and HTML/Razor source code.

jQuery UI tabs with vertical navigation

HTML/Razor source code

@model ByteCarrot.WebConsole.Web.Controllers.Settings.SettingsViewModel</pre>
<div id="settings">
<ul>
	<li><a href="@Url.Action(MVC.Account.List())">Users</a></li>
	<li><a href="@Url.Action(MVC.Account.List())">Settings 1</a></li>
	<li><a href="@Url.Action(MVC.Account.List())">Settings 2</a></li>
</ul>
</div>
<script type="text/javascript">
     $(function () {
         $("#settings").tabs();
     });
</script>

CSS source code

div#settings {
    position: relative;
    padding-left: 200px;
}

div#settings > div {
    min-height: 300px;
}

div#settings .ui-tabs-nav {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 200px;
    padding: 5px 0px 5px 5px;
}

div#settings .ui-tabs-nav li {
    left: 0px;
    width: 195px;
    border-right: none;
    overflow: hidden;
    margin-bottom: 2px;
}

div#settings .ui-tabs-nav li a {
    float: right;
    width: 100%;
    text-align: right;
}

div#settings .ui-tabs-nav li.ui-tabs-selected {
    border: none;
    border-right: solid 1px #fff;
    background: none;
    background-color: #fff;
    width: 200px;
}

If you are fan of .less project here is the same CSS in LESS format:

div#settings
{
    position: relative;
    padding-left: 200px;

    > div
    {
        min-height: 300px;
    }

    .ui-tabs-nav
    {
        position: absolute;
        left: 0px;
        top: 0px;
        bottom: 0px;
        width: 200px;
        padding: 5px 0px 5px 5px;

        li
        {
            left:  0px;
            width: 195px;
            border-right: none;
            overflow: hidden;
            margin-bottom: 2px;

            a
            {
                float: right;
                width: 100%;
                text-align: right;
            }
        }

        li.ui-tabs-selected
        {
            border: none;
            border-right: solid 1px #fff;
            background: none;
            background-color: #fff;
            width: 200px;
        }
    }
}

I hope it will be useful.

Metadata based validation with jQuery

Posted by – October 8, 2009

jQuery Validation enabled form

Recently I spent some time prototyping my own validation for ASP.NET MVC. Why did not I reuse any of existing solutions? This is a story for another post so I did not want to bring this topic up now. One of the things which I had to figure out during prototyping was how to implement client side validation. Of course I wanted to utilize capabilities of some well known JavaScript framework (no I am not so crazy to write it for my own). I made small evaluation comparing available options and at the end I decided to incorporate jQuery and its Validation plugin. One of the things which were crucial to my decision was ability of this framework to use metadata stored as JSON in class attribute of HTML element. The concept of metadata available in jQuery is amazing and gives possibility to describe validation rules for specified input control inside itself. In my case this was very important feature because I wanted to render validation using my custom HtmlHelper extensions together with corresponding input controls. Second thing which convinced me to jQuery Validation was easy setup which I want to show you now.

If you want to use jQuery Validation in your project first of all you will need of course jQuery library which can be downloaded here, jQuery Metadata plugin which is available here and jQuery Validation plugin downloadable from here.

When you collected all required prerequisites you have to add reference to them in your HTML. Simply add code shown below to the body of tag but remember to ensure that paths lead to place where JavaScript files are located.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script><script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>

When jQuery libraries are already where they should be you can specify validation rules using metadata. In order to do it extend your input control tag with class attribute and set its value to {required:true}. This will tell Validationplugin that this specified input control should contain a value before it can be send back to server. Of course this is very simple rule but below I have listed few more, complex definitions.

<input class="{required:true, maxlength:100, messages:{required:'This field is required.', maxlength:'This field can contain maximum 100 characters.'}}" type="text" />
<input class="{maxlength:50, email:true, equalTo:'#Email',  messages:{required:'This field is required.', maxlength:'This field can contain maximum 100 characters.', email:'This is not a valid email.', equalTo:'Value entered in this field should equal to value of Email field.'}}" type="text" />

Listing below shows this validation metadata in wider context.

</pre>
<form id="MyForm" action="/Registration" method="post"><label for="DisplayName">Username:</label> <input id="DisplayName" class="{required:true, maxlength:100, messages:{required:'This field is required.', maxlength:'This field can contain maximum 100 characters.'}}" type="text" name="DisplayName" /> <input type="submit" value="Submit!" /></form>
<pre>

At the end when you have defined all validation rules only thing you should do is adding following code after closing tag and that is it.

<script type="text/javascript">// <![CDATA[
    $("#MyForm").validate({
        errorElement: "span"
    });
// ]]></script>

Now when you will click Submit! button your form will be validated and in case of errors apropriate messages will be displayed below corresponding input control.

Because I know that described example can be not enough to fully understand how all it works I have prepared more complex, example form which can be downloaded from here: download.