.dialog
{
display: none;
position: absolute;
z-index: 100;
background-color: #fff;
}
.dialog li
{
float: left;
padding-left: 4px;
color: #000;
}
<div data-fn="show" data-event="click" data-type="bind">Open dialog <ul class="dialog" data-fn="alertSS" data-selector=">li" data-event="click" data-type="delegate"> <li data-ss="data1">button1</li> <li data-ss="data2">button2</li> </ul> </div>
var model = {
this.show = function(e){
var $el = $(this);
var panel = $el.find('.dialog');
panel.css({ top: $el.position().top, left: $el.position().left + $el.width() });
panel.toggle();
}
this.alertSS = function(e){
alert($(this).data('ss'));
}
}
$.observable(model);
<div data-fn="show" data-event="click" data-type="bind">Open dialog <ul class="dialog" data-pref="one,two" data-fn-one="alertSS1" data-selector-one=">li" data-event-one="click" data-type-one="delegate" data-fn-two="alertSS2" data-selector-two=">li" data-event-two="click" data-type-two="delegate"> <li data-ss="data1">button1</li> <li data-ss="data2">button2</li> </ul> </div>
var model = {
this.show = function(e){
var $el = $(this);
var panel = $el.find('.dialog');
panel.css({ top: $el.position().top, left: $el.position().left + $el.width() });
panel.toggle();
}
this.alertSS1 = function(e){
alert($(this).data('ss') + 'by one');
}
this.alertSS2 = function(e){
alert($(this).data('ss') + 'by two');
}
}
$.observable(model);
<div data-fn="model.show" data-event="click" data-type="bind">Open dialog <ul class="dialog" data-fn="alertSS" data-scope="model" data-selector=">li" data-event="click" data-type="delegate"> <li>button1</li> </ul> </div>
var ns = {};
ns.model = {
this.name = 'Model'
this.show = function(e){
var $el = $(this);
var panel = $el.find('.dialog');
panel.css({ top: $el.position().top, left: $el.position().left + $el.width() });
panel.toggle();
}
}
ns.alertSS = function(e){
alert(this.name);
}
$.observable(ns);