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(); } |