DavidjQuery

I have seen the close the hide button of a jQuery UI Dialog come up quite a few times in both the jQuery IRC channel and on Stackoverflow.com, so I thought I would go ahead and blog on it.

First we need some CSS.

.no-close .ui-dialog-titlebar-close {
  display: none  //Used to hide ui-dialog X button
}

Next a little html that will be the dialog.

  <div id="dialogme" title="Example dialog with no Close button">This is a test</div>

The code to open the dialog.

$(document).ready(function(){
    $('#dialogme').dialog({ dialogClass: 'no-close' });
});

And a demo.

Out of the box jQuery comes with some pretty powerful selectors. Any selector that works in CSS will work in jQuery. And jQuery adds some special selectors on top of what CSS can do. A full list of jQuery’s selectors can be find here.

However there are no selectors for the new HTML 5 input types. Fortunately jQuery has a way of extending the default selectors to include your own.

(function($) {
    $.each(
        ['color', 'date', 'datetime', 'datetime-local', 'email', 'month', 'number', 'range', 'search', 'tel', 'time', 'url', 'week'],
        function(i, name) {
            var obj = {};
            obj[name] = function(a) {
                return $(a).attr('type') === name;
            };
            $.extend($.expr[':'], obj);
        }
    );
})(jQuery);

For a deomonstration click this link. http://jsfiddle.net/djquery/Sxz7T/

I was reading Dan Heberden’s blog post on Duck-punching and thought that this would be an excellent opportunity to use inheritance instead. There are plenty of tutorials out there on how to create a jQuery UI widget, one of the best is http://ajpiano.com/widgetfactory/. In this I am going to concentrate on the issues that arise when inheriting from another widget.

Read the rest of this entry