this is a wrapper for jquery contextMenu plugin jQuery-contextMenu
The contextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. Unlike implementations as a beautiful site's or trendskitchens' this contextMenu treats the menu as the primary object. That means, that a single menu is defined that can be used by multiple objects. Unlike the mentioned plugins, contextMenu doesn't need to bind itself to triggering objects. This allows injecting and removing triggers without having to re-initialize or update contextMenu.
contextMenu can provide a simple list of clickable commands, or offer an in-menu form. This makes very simple attribute modification possible
Requirements ¶
...requirements of using this extension
just tested on yii 1.8
note: this plugin seems work well with jquery 1.7.1 ,but have some problem to yii's jquery version(1.6 for yii1.8 now)
Usage ¶
...how to use this extension...
download it and extract it to your protected/extensions dir
this is a subclass of CWidget , so use it as standard widget. contextMenu or rightButtonMenu can attach to some html element,use this widget you firstly give it a selector which is css selector ,secondly config the menuItems .you may need design a js callback function for handling the click event .
...can use code blocks like the following... in your view file :
<style type="text/css">
.jquery-contextMenu-example {
}
</style>
<?php
/**
* Created by JetBrains PhpStorm.
* User: yiqing
* Date: 11-12-20
* Time: 下午5:54
* To change this template use File | Settings | File Templates.
*/
$this->widget('ext.jcontextmenu.JContextMenu', array(
'selector' => '.context-menu-one',
));
?>
<div class="context-menu-one box menu-1">
<strong>right click me</strong>
</div>
<hr size="5px" style="color: #1896cd; clear: both;"/>
<div class="jquery-contextMenu-example">
<p>
<div id="example1">
<h5>example 1 , click me</h5>
</div>
<?php
$this->widget('ext.jcontextmenu.JContextMenu', array(
'selector' => '#example1',
'callback' => 'js:function(key, options) {
var m = "Clicked on " + key + " on element " + options.$trigger.attr("id");
alert(m);
}',
'items' => array(
'edit' => array('name' => 'Edit', 'icon' => 'edit',),
'cut' => array('name' => 'Cut', 'icon' => 'cut',),
'copy' => array('name' => 'Copy', 'icon' => 'copy',),
'paste' => array('name' => 'Paste', 'icon' => 'paste',),
'delete' => array('name' => 'Delete', 'icon' => 'delete',),
'sep1' => '---------',
'quit' => array('name' => 'Quit', 'icon' => 'quit',),
),
)
);
?>
</p>
</div>
<div class="jquery-contextMenu-example">
<p>
<div id="example2">
<h5>example 2 , click me</h5>
</div>
<?php
$this->widget('ext.jcontextmenu.JContextMenu', array(
'selector' => '#example2',
'ignoreRightClick' => false,
'callback' => 'js:function(key, options) {
var m = "you clicked: " + key;
alert(m);
}',
'build' => 'js: function($trigger) {
return {
callback: function(key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
"copy": {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: "quit"}
}
}
}',
)
);
?>
</p>
</div>
<div class="jquery-contextMenu-example">
<p>
<div id="example3">
<h5>example 3, Keeping the Menu visible && sub menu example</h5>
</div>
<?php
$this->widget('ext.jcontextmenu.JContextMenu', array(
'selector' => '#example3',
'items' => array(
'edit' => array(
'name' => 'Edit',
'icon' => 'edit',
'items' => array(
'fold1-key1' => array('name' => 'Foo bar',),
'fold2' => array('name' => 'Sub group 2',
'items' => array(
'fold2-key1' => array(
'name' => 'alpha',
),
'fold2-key2' => array(
'name' => 'bravo',
),
'fold2-key3' => array(
'name' => 'charlie',
),
),
),
'fold1-key3' => array('name' => 'delta',),
),
),
'sep1' => '---------',
'cut' => array(
'name' => 'Open after Click',
'icon' => 'cut',
'callback' => 'js:function(){
return false;
}'
),
),
)
);
?>
</p>
</div>
<div class="jquery-contextMenu-example">
<p>
<div id="example4">
<h5>example 4, using right button click me</h5>
</div>
<button value="this can also trigger the context menu " onclick="showContextMenu('#example4')" name="hi">
showContextMenu
</button>
<button onclick="enableContextMenu('#example4')" name="enableContextMenu">enableContextMenu</button>
<button onclick="disableContextMenu('#example4')" name="disableContextMenu">disableContextMenu</button>
<script type="text/javascript">
function showContextMenu(selector) {
$(selector).contextMenu();
// or $('selector').trigger("contextmenu");
// or $('selector').contextMenu({x: 100, y: 100});
}
function disableContextMenu(selector) {
var $trigger = $(selector);
$trigger.contextMenu(false);
}
function enableContextMenu(selector) {
var $trigger = $(selector);
$trigger.contextMenu(true);
}
</script>
<?php
$this->widget('ext.jcontextmenu.JContextMenu', array(
'selector' => '#example4',
'callback' => 'js:function(key, options) {
var m = "global: " + key;
alert(m);
}',
'items' => array(
'edit' => array(
'name' => 'Edit',
'icon' => 'edit',
// superseeds "global" callback
'callback' => 'js:function(key, options) {
var m = "edit was clicked";
window.console && console.log(m) || alert(m);
}'
),
'cut' => array('name' => 'Cut', 'icon' => 'cut',),
'copy' => array('name' => 'Copy', 'icon' => 'copy',),
'paste' => array('name' => 'Paste', 'icon' => 'paste',),
'delete' => array('name' => 'Delete', 'icon' => 'delete',),
'sep1' => '---------',
'quit' => array('name' => 'Quit', 'icon' => 'quit',),
),
)
);
?>
</p>
</div>
<hr size="2px"/>
<div>
<p>
<h3>html5 example</h3>
</p>
<p>
<div class="context-menu-html5menu box menu-1">
<strong>right click me</strong>
</div>
<?php $this->widget('ext.jcontextmenu.JContextMenu', array(
'selector' => '.context-menu-html5menu',
'items' => 'js: $.contextMenu.fromMenu($(\'#html5menu\'))',
)
);
?>
<menu id="html5menu" type="context" style="display:none" class="showcase">
<command label="rotate" onclick="alert('rotate')"></command>
<command label="resize" onclick="alert('resize')"></command>
<menu label="share">
<command label="twitter" onclick="alert('twitter')"></command>
<hr>
<command label="facebook" onclick="alert('facebook')"></command>
</menu>
</menu>
</p>
<p>
<h5>html5 test2</h5>
<?php $this->widget('ext.jcontextmenu.JContextMenu', array(
'html5'=>true,
)
);
?>
<div class="box menu-2" contextmenu="html5polyfill">
<strong>right click me (this is tested on chrome 16.0.912.63 m but failed on fireFox 8.0.1 , not tested on another browsers)</strong>
</div>
<menu id="html5polyfill" type="context" style="display:none" class="showcase">
<command label="rotate" onclick="alert('rotate')" icon="images/cut.png"></command>
<command label="resize" onclick="alert('resize')" icon="images/door.png"></command>
<menu label="share">
<command label="twitter" onclick="alert('twitter')" icon="images/page_white_copy.png"></command>
<hr>
<command label="facebook" onclick="alert('facebook')" icon="images/page_white_edit.png"></command>
<hr>
<label>foo bar<input type="text" name="foo"></label>
</menu>
</menu>
</p>
<p>
<h5>html5 test2</h5>
<?php
/*
$this->widget('ext.jcontextmenu.JContextMenu', array(
'html5'=>true,
)
); */
//because above example has done the same things so here no need setup again ! only html will do .
?>
<div class="box menu-2" contextmenu="html5firefox8">
<strong>right click me (this is tested on fireFox 8.0.1 , not tested on another browsers)</strong>
</div>
<menu id="html5firefox8" type="context" class="showcase">
<menuitem label="rotate" onclick="alert('rotate')" hint="I'm a hint"></menuitem>
<menuitem label="resize" onclick="alert('resize')"></menuitem>
<menuitem label="disabled" onclick="alert('disabled')" disabled=""></menuitem>
<menu label="share">
<menuitem label="twitter" onclick="alert('twitter')"></menuitem>
<menuitem label="facebook" onclick="alert('facebook')"></menuitem>
<hr>
<menuitem type="checkbox" label="(checkbox) yes or no?" onclick="alert('checkbox: ' + (this.checked ? 'yep!' : 'nope'))"></menuitem>
<hr>
<menuitem type="radio" label="(radio) yes" radiogroup="alpha" checked="" onclick="alert('radio: yes')"></menuitem>
<menuitem type="radio" label="(radio) no" radiogroup="alpha" onclick="alert('radio: no')"></menuitem>
</menu>
</menu>
</p>
</div>
Resources ¶
...external resources for this extension...
- [usage example and docs ](doc )
- [Try out a demo](demo url here)
- [original project address] (jQuery-contextMenu plugin)
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.