Featured post

c# - Usage of Server Side Controls in MVC Frame work -

i using asp.net 4.0 , mvc 2.0 web application. project requiremrnt have use server side control in application not possibl in noraml case. ideally want use adrotator control , datalist control. i saw few samples , references in codepleax mvc controllib howwver found less useful. can tell how utilize theese controls in asp.net application along mvc. note: please provide functionalities related adrotator , datalist controls not equivalent functionalities thanks in advace. mvc pages not use normal .net solution makes use of normal .net components impossible. a normal .net page use event driven solution call different methods service side mvc use actions , view completly different way handle things. also, mvc not use viewstate normal .net controlls require. found article discussing mixing of normal .net , mvc.

javascript - Making custom right-click context menus for my web-app -


i've few websites google-docs , map-quest have custom drop down menus when right-click. somehow override browser's behavior of drop-down menu, , i'm sure how it. found jquery plugin this, i'm still curious few things:

  • how work? browser's drop-down menu being overridden, or effect simulated? if so, how?
  • what plugin abstract away? what's going on behind scenes?
  • is way of achieving effect?

custom context menu image

see several custom-context menus in action

i know question old, came same problem , solved myself, i'm answering in case finds through google did. based solution on @andrew's one, modified afterwards.

edit: seeing how popular has been lately, decided update styles make more 2014 , less windows 95. fixed bugs @quantico , @trengot spotted it's more solid answer.

edit 2: set stacksnippets they're cool new feature. leave good jsfiddle here reference thought (click on 4th panel see them work).

new stack snippet:

// javascript (jquery)    // trigger action when contexmenu shown  $(document).bind("contextmenu", function (event) {            // avoid real 1      event.preventdefault();            // show contextmenu      $(".custom-menu").finish().toggle(100).            // in right position (the mouse)      css({          top: event.pagey + "px",          left: event.pagex + "px"      });  });      // if document clicked somewhere  $(document).bind("mousedown", function (e) {            // if clicked element not menu      if (!$(e.target).parents(".custom-menu").length > 0) {                    // hide          $(".custom-menu").hide(100);      }  });      // if menu element clicked  $(".custom-menu li").click(function(){            // triggered action name      switch($(this).attr("data-action")) {                    // case each action. actions here          case "first": alert("first"); break;          case "second": alert("second"); break;          case "third": alert("third"); break;      }          // hide after action triggered      $(".custom-menu").hide(100);    });
/* css3 */    /* whole thing */  .custom-menu {      display: none;      z-index: 1000;      position: absolute;      overflow: hidden;      border: 1px solid #ccc;      white-space: nowrap;      font-family: sans-serif;      background: #fff;      color: #333;      border-radius: 5px;      padding: 0;  }    /* each of items in list */  .custom-menu li {      padding: 8px 12px;      cursor: pointer;      list-style-type: none;      transition: .3s ease;      user-select: none;  }    .custom-menu li:hover {      background-color: #def;  }
<!-- html -->  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>    <ul class='custom-menu'>    <li data-action="first">first thing</li>    <li data-action="second">second thing</li>    <li data-action="third">third thing</li>  </ul>    <!-- not needed, making clickable on stackoverflow -->  right click me

note: might see small bugs (dropdown far cursor, etc), please make sure works in jsfiddle, that's more similar webpage stacksnippets might be.


Comments

Popular posts from this blog

c# - Usage of Server Side Controls in MVC Frame work -

cocoa - Nesting arrays into NSDictionary object (Objective-C) -

ios - Very simple iPhone App crashes on UILabel settext -