标签: jquery-ui-selectable

我有以下 HTML：

<ol id="selectable">
    <li class="ui-state-default">Option 1</li>
    <li class="ui-state-default">Option 1</li>
    <li class="ui-state-default">Option 3</li>
</ol>

例如，我需要在页面加载时默认选择第一个选项。我使用以下代码但没有任何运气：

$(document).ready(function () {
    $('#selctable li:first').addClass('ui-selected');
});

关于我做错了什么有什么想法吗？

我写了一个小工具,用于选择使用jQuery,因为的使用方便的日期范围可选插件,才发现,它并没有为iPad和iPhone(可能其他触摸屏设备正常工作.

是否有任何插件/补丁或任何我可用于在触摸设备上运行代码的东西？

在这里给出这个例子:http://jqueryui.com/selectable/#display-grid我想在没有单击'n拖动时出现的"选择框"的情况下进行选择.也就是说,当我点击数字5然后拖动到数字6然后拖到10我得到这个:

实际上我想要的是从5拖到6到10并且只选择没有9.

我搜索了文档但找不到该选项,我的谷歌技能并没有给我带来任何好运,我认为这一定已经完成了它只是碰巧我无法自己掌握它或找到一个现有的解决方案,所以任何帮助在这里都表示赞赏(不是说你应该为我做研究,我只是希望有人在此之前处理这个,所以他可以指出我正确的方向).

它也可能是我在尝试使用jquery UI实现这一点时忽略了这一点,但这是我发现的第一个这样的例子,它适合(有点)我想要完成的事情.

编辑:

jQuery UI可选小部件内置了一个回调stop,我需要知道如何以编程方式触发此事件.

(这个措辞很差) 我已经将一个事件监听器附加到jQuery UI Selectable Widget.如何以编程方式触发stop事件？

Ex可选:

$("table").selectable({
  filter: "tr",
  stop: function(){
    //do stuff
  }
});

// Various attempts at triggering the stop event
// one
$("table .ui-selected").click();

// two
$("table .ui-selected").select();

// three
$("table .ui-selected").trigger("click");

// shot in the dark 1
$("table").selectable('widget').trigger('stop');

// Shot in the dark 2
$("table").trigger('stop');

// really long shot in the dark
$("table").selectable('widget').call('stop');

进一步尝试

// selectablestop event

$("#table").selectable('widget').trigger('selectablestop');

$("#table .ui-selected").trigger('selectablestop');

我和Jquery有点混淆.可选.我需要做的是,使一个包含复选框的区域可以选择(我在这里很好),然后检查已经选中了哪个复选框(所以我可以取消选中它们),检查它们是否可以不是.

$("#calContainer").selectable({
    filter: 'checkbox',
    selected: function(event, ui) {
        // need code for:
        // for every checkbox in selected area thats is checked, uncheck
        // for every checkbox in selected area thats is not checked, check
    }
});

任何帮助表示赞赏.谢谢.

我想使用jQuery Selectable从表中选择行.问题是jQuery似乎劫持了所有点击事件,因此我无法在表格中使用任何可点击的内容(在我的情况下为链接).

HTML:

<table class="sel-table">
<thead>
    <th>col1</th>
    <th>col2</th>
    <th>col3</th>
</thead>
<tbody>
    <tr>
        <td> 
             <a href="http://www.google.com">click me! a1</a>
        </td>
        <td>a2</td>
        <td>a3</td>
    </tr>
    <tr>
        <td>b1</td>
        <td>b2</td>
        <td>b3</td>
    </tr>
    <tr>
        <td>c1</td>
        <td>c2</td>
        <td>c3</td>
    </tr>
</tbody>
</table>

CSS:

  .ui-selectable>.ui-selected
    {
        background-color: #a6c9e2;
    }

使用Javascript:

$(".sel-table>tbody").selectable({filter: 'tr'});

JSFiddle:http://jsfiddle.net/qt67rf12/

当您单击该链接时,没有任何反应,可选择处理该事件.但是,中间按钮(在新选项卡中打开)可以很好地工作.什么阻止链接上的默认操作,我该如何解决？

I am working on a demo where page have selectable jQuery for creation square block(area).

用户可以选择任何区域并用颜色写一些注释,整个块将显示指定位置.它工作正常.

但我主要担心的是,如果有人选择相同的区域或选择包含已存在块的区域.我如何限制它.

1. 两个块都应该退出.
2. 两者都不应该在同一个位置.

DEMO