Notes on Software Design and Coding: November 2010

Tuesday, November 30, 2010

URL Rewriting

URL Rewrite module for IIS7

using HttpModule andovercome the postback bug

using the new System.Web.Routing namespace? It's the same url routing library that comes with ASP.NET MVC and it works for ASP.NET "classic webforms" as well

Monday, November 15, 2010

JQuery Study

JQuery ThemeRoller tool

Latest jQuery and jQuery UI Theme links on Google CDN

JQuery API

.load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] )

This method is the simplest way to fetch data from the server. It is roughly equivalent to $.get(url, data, success) except that it is a method rather than global function and it has an implicit callback function.

How to distinguish 2 dialog box since no ID associated?
I can address my dialog text field, because it has a unique ID:
'myDialog1', and from here I traverse upwards to the dialog ("closest
()" searches the ancesters in the DOM tree) and from here downwards to
the title bar ("children()" traverses downwards), e.g.:
$("#myDialog1").closest('.ui-dialog').children('.ui-dialog-
titlebar').hide()
or e.g.:
$("#myDialog1").closest('.ui-dialog').children('.ui-dialog-
buttonpane').css({
top: '80px',
left: '70px',
opacity: .8,
background:"#ffcc99",
border:"8px dashed #f00"
});

D e m o :
http://netzwerkstatt.de/jqui_zweiDialoge

Basic usage of the jQuery UI dialog

All jQuery UI plugins maintain state, such as the current option values, whether the plugin is enabled or disabled, which plugins have been initialized on the element, etc. This state persists from the time the plugin is instantiated on the element until it is destroyed, either explicitly by the user calling .pluginName('destroy') or by removing the element (or one of its ancestors) via .remove(). Because of this state management, you cannot instantiate the same plugin on an element multiple times, unless you destroy the plugin instance first.

JQuery UI - Dialog BOX read ASP file

JQuery's methodology is simple: find things, do stuff. We select elements from the document (via the DOM) using the jQuery function, aliased as $(). This handy function acts just like document.getElementById(), except that instead of only supporting IDs, it supports CSS selectors and some XPath selectors; and, instead of returning one element, it can return an array of elements.

We then use functions to perform actions on our selections. For example, to append the text "Hello World!" to all divs with the class 'foo', then set the color to red, we'd use the following code:
$("div.foo").append("Hello World!").css("color","red");
Easy! Normally, this task would require two lines of code, like so:
$("div.foo").append("Hello World!");
$("div.foo").css("color","red")

Demo Effect

50+ Amazing Jquery Examples- Part1

How to create a stunning and smooth popup using jQuery

Simple Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
   <script type="text/javascript">
     function PopWindow_Click(ID)
     {
                var $dialog = $('<div></div>')
                .html('Sorry we can not display target page.')
                .dialog({height: 200, width:600, modal: true, autoOpen: false,title: 'Popup Dialog Box',hide:'blind'});
                $dialog.css({"opacity": "0.2"});
                var options = {};
//                $dialog.dialog({close:function(event, ui) { ... }});
//                $dialog.effect( 'blind', options, 500);
//                $dialog.fadeIn("slow");
//                $dialog.fadeOut("slow");
//                $('#close_message').click(function(){$dialog.effect({ top:"+ px",opacity:0 }, "slow");}});

                $dialog.load("sample.asp?ID=" + ID);
                $dialog.dialog('open');

//    //scroll the message box to the top offset of browser's scrool bar
//        $(window).scroll(function()
//        {
//          $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
//        });
     }

   </script>
    <title>JQuery test - Popup Window</title>
</head>
<body>
    This is JQuery Test<br />
    <u id="popupwindow" style="cursor: pointer" onclick="PopWindow_Click(2)">popup window</u>
</body>
</html>

Notes on Software Design and Coding

Labels