ASP.NET MVC + jQuery UI ( Icon ) – HTML Helper Button

ASP.NET MVC + jQuery UI ( Icon ) – HTML Helper Button

 
   CSS
 
   #menupanel
   {
     clear:both;
     position:relative;
     top:0px;
     left:0px;
     width:100%;
     height:30px;
   }
 
   .button, .submenu
   {
     border:1px solid #fc0;
     background-color:#fffea1;
   }
 
   .button
   {
     min-width:20px;
     height:26px;
     display:inline-block;
     text-decoration:none;
     clear:both;
     margin:0px 0px 0px 0px;
     padding:0px 0px 0px 0px;
     cursor:pointer;
     outline:0 !important;
   }
 
   .fullcorner
   {
     border-radius: 4px;
     margin:0px 4px 0px 4px;
   }
 
   .leftcorner
   {
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
     margin:0px 0px 0px 4px;
   }
 
   .rightcorner
   {
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
     margin:0px 4px 0px 0px;
   }
 
   .ui-icon
   {
     /* Download jQuery UI – icon Graphic File */
     background-image:url('http://www.ccrd-bc.ca/images/icons/jquery-ui/ui-icons_222222_256x240.png');
     width:16px;
     height:16px;
     float:left;
     margin:5px 5px 5px 5px;
     cursor:pointer;
   }
 
   .ui-message
   {
     float:left;
     min-width:20px;
     color:#000000;
     margin:3px 5px 3px 0px;
     font-size:11pt;
     visibility: visible;
     cursor:pointer;
   }
 
   .parentbutton:hover:after
   {
     border: 1px solid #33AA33;
     padding: 3px 6px;
     background: #F3F3F3;
     border-radius:4px;
     opacity: 1;
     content: attr(data-tooltip);
     position: absolute;
     right: -25px;
     top: -10px;
     z-index: 10;
     cursor:default;
   }
 
   .parentbutton, .parentbutton_notooltip
   {
     position:relative;
     top:0px;
     left:0px;
     margin:0px;
     float:left;
     cursor:default;
   }
 
   .submenu
   {
     display:none;
     position:absolute;
   }
 
   .submenu .submenu_panel
   {
     margin:10px 6px 10px 6px;
   }
 
   .submenu .submenu_panel .submenu_panel_item
   {
     padding-right:20px;
     padding-left:10px;
     cursor:pointer;
   }
 
   .submenu .submenu_panel .submenu_panel_item:hover
   {
     background-color:#AA0033;
     color:#FFFFFF;
   }
 
 
   HTML Prototype
 
   < div id="menupanel">
 
     < div id="submenu" class="submenu">
       < div class="submenu_panel">
         < div class="submenu_panel_item">Get Person</div>
         < div class="submenu_panel_item">Delete</div>
         < div class="submenu_panel_item">Assign Purchase Item</div>
         < div class="submenu_panel_item">Delete Purchase Item</div>
         < div class="submenu_panel_item">Unset Role</div>
       </div>
     </div>
 
     < div class="parentbutton_notooltip">
       <a href="http://www.yahoo.com.hk" onclick="" class="button fullcorner">
         < div class="ui-icon ui-icon-zoomin"></div>
       </a>
     </div>
 
     < div class="parentbutton" data-tooltip="Yes">
       <a href="http://www.yahoo.com.hk" onclick="" class="button leftcorner">
         < div class="ui-icon ui-icon-zoomin"></div>
         < div class="ui-message">Yes</div>
       </a>
     </div>
 
     < div class="parentbutton" data-tooltip="No">
       <a href="" onclick="push(); return false;" class="button">
         < div class="ui-icon ui-icon-zoomin"></div>
         < div class="ui-message">No</div>
       </a>
     </div>
 
     < div class="parentbutton" data-tooltip="??">
       <a href="" onclick="push(); return false;" class="button">
         < div class="ui-icon ui-icon-zoomin"></div>
         < div class="ui-message">??</div>
       </a>
     </div>
 
     < div class="parentbutton_notooltip">
       <a id="SubMenu" href="" onclick="showsubmenu('#menupanel', this, '#submenu'); return false;" class="button rightcorner">
         < div class="ui-icon ui-icon-zoomin"></div>
       </a>
     </div>
 
   </div>
 
   JavaScript Code
 
   function push()
   {
     … …
   }
 
   function showsubmenu(topmenuid, parent, id)
   {
     var parentctl = $("#" + parent.getAttribute('id'));
 
     parentctltop = ( parentctl.offset().top – $(topmenuid).offset().top + 2 );
     parentctlleft = ( parentctl.offset().left – $(topmenuid).offset().left );
     parentctlheight = ( parentctl.outerHeight() );
     parentctlwidth = ( parentctl.outerWidth() );
 
     menutop = ( parentctltop + parentctlheight );
     menuwidth = $(id).outerWidth();
     menuleft = ( parentctlleft – (menuwidth – parentctlwidth) );
 
     $(id).css("top", menutop);
     $(id).css("left", menuleft);
 
     if (!$(id).is(":visible"))
       $(id).slideDown();
     else
       $(id).fadeOut();
   }
 
 
   ASP.NET MVC – HTML Helper
 
   using System;
   using System.Web;
   using System.Web.Mvc;
   using System.Text;
 
   namespace WebApp.Helper
   {
     public static class Html
     {
       /*
          Header – Button Header Text
          ToolTip – Button Tool Tip Text
          Url – Press To Page Url
          OnClick – Click the Button To Execute the JavaScript Function ( if this Value is blank, it would redirect to Page from Url Value )
          CornerClass – Define ( leftcorner, rightcorner, fullcorner or not defined ) CSS Class about the Button Border Radius.
          IconClass – jQuery UI Icon Class
          ButtonClass – Define Extra CSS Class from the Button
       */
       public static MvcHtmlString Button(this HtmlHelper helper, string Url,
       string OnClick, string CornerClass, string IconClass, string ButtonClass = "")
       {
         StringBuilder Tag = new StringBuilder();
 
         Tag.Append("< div class='parentbutton_notooltip" + ((ButtonClass != "") ? " " + ButtonClass : "") + "'>");
         Tag.Append("<a href='" + Url + "' ");
         Tag.Append("onclick='" + ((OnClick.Trim() != "") ? (OnClick.Trim() + "return false;") : ""));
         Tag.Append("' class='button " + CornerClass + "'>");
         Tag.Append("< div class='ui-icon " + IconClass + "'></div>");
         Tag.Append("</a>");
         Tag.Append("</div>");
 
         return new MvcHtmlString(Tag.ToString());
       }
 
       public static MvcHtmlString LongButton(this HtmlHelper helper, string Header,
       string ToolTip, string Url, string OnClick, string CornerClass, string IconClass, string ButtonClass = "")
       {
         StringBuilder Tag = new StringBuilder();
 
         Tag.Append("< div class='parentbutton" + ((ButtonClass != "") ? " " + ButtonClass : "") + "' data-tooltip='" + ToolTip + "'>");
         Tag.Append("<a href='" + Url + "' ");
         Tag.Append("onclick ='" + ((OnClick.Trim() != "") ? (OnClick.Trim() + "return false;") : ""));
         Tag.Append("' class='button " + CornerClass + "'>");
         Tag.Append("< div class='ui-icon " + IconClass + "'></div>");
         Tag.Append("< div class='ui-message'>" + Header + "</div>");
         Tag.Append("</a>");
         Tag.Append("</div>");
 
         return new MvcHtmlString(Tag.ToString());
       }
 
       public static MvcHtmlString SubMenuButton(this HtmlHelper helper, string id, string OnClick, string CornerClass, string ButtonClass = "")
       {
         StringBuilder Tag = new StringBuilder();
 
         Tag.Append("< div class='parentbutton_notooltip" + ((ButtonClass != "") ? " " + ButtonClass : "") + "'>");
         Tag.Append("<a id='" + id + "' href='' ");
         Tag.Append("onclick='" + ((OnClick.Trim() != "") ? (OnClick.Trim() + "return false;") : ""));
         Tag.Append("' class='button " + CornerClass + "'>");
         Tag.Append("< div class='ui-icon ui-icon-triangle-1-e'></div>");
         Tag.Append("</a>");
         Tag.Append("</div>");
 
         return new MvcHtmlString(Tag.ToString());
       }
     }
   }
 
 
   Html Helper from View
 
   < div id="menupanel">
 
     @(Html.Button("http://www.yahoo.com.hk", "move();", "fullcorner", "ui-icon-wrench"))
 
     @(Html.LongButton("Add Person", "Add Person", "", "move();", "leftcorner", "ui-icon-wrench"))
     @(Html.LongButton("Assign As a Subject Company", "Assign As a Subject Company", "", "move();", "", "ui-icon-wrench"))
     @(Html.LongButton("Close Item", "Close Item", "", "move();", "", "ui-icon-wrench"))
     @(Html.SubMenuButton("SubMenu", "showmenu(\"#menupanel\", this, \"#submenu\");", "rightcorner"))
 
     /* can define the menu item by using Server Code ( iterating the ViewBag or something else. ) from the View */
     < div id="submenu" class="submenu">
       < div class="submenu_panel">
         < div class="submenu_panel_item">Get Person</div>
         < div class="submenu_panel_item">Delete</div>
         < div class="submenu_panel_item">Assign Purchase Item</div>
         < div class="submenu_panel_item">Delete Purchase Item</div>
         < div class="submenu_panel_item">Unset Role</div>
       </div>
     </div>
 
   </div>
 
 
   JavaScript Code
 
   function push()
   {
     … …
   }
 
   function showsubmenu(topmenuid, parent, id)
   {
     var parentctl = $("#" + parent.getAttribute('id'));
 
     parentctltop = ( parentctl.offset().top – $(topmenuid).offset().top + 2 );
     parentctlleft = ( parentctl.offset().left – $(topmenuid).offset().left );
     parentctlheight = ( parentctl.outerHeight() );
     parentctlwidth = ( parentctl.outerWidth() );
 
     menutop = ( parentctltop + parentctlheight );
     menuwidth = $(id).outerWidth();
     menuleft = ( parentctlleft – (menuwidth – parentctlwidth) );
 
     $(id).css("top", menutop);
     $(id).css("left", menuleft);
 
     if (!$(id).is(":visible"))
       $(id).slideDown();
     else
       $(id).fadeOut();
   }
 

There is also a Reference about clicking button to popup a Modal by using jQuery.
The Modal Code from above Page Link can also be Integrated with above Design.