我有一个php生成的列表,其列表项可以使用jquery selectable widget选择.所有意图和目的的列表是:
<ul id="#select-image">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
并且jQuery selectable声明为:
<script>
$(function() {
$("#select-image").selectable({
selected: function( event, ui ) {
var $variable = $('.ui-selected').innerHTML;
console.log($variable);
}
});
});
</script>
Run Code Online (Sandbox Code Playgroud)
在选择列表项之后发生事件,在示例中它将输出到浏览器控制台.然而输出是"未定义的".选择器$('.ui-selected').是正确的,因为它在浏览器的控制台中显示为对象.我哪里错了?
我希望有一个TextView可选择和链接的.当我这两个时,我最终得到可选文本,但无法点击链接.
编辑:
我将展示代码来解释我的困难:
TextView textView = view.findViewById(R.id.mytext);
textView.setText("My text: +4412345678 Go to website: www.google.com Blah blah");
Linkify.addLinks(textView, Linkify.ALL);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
textView.setTextIsSelectable(true);
}
Run Code Online (Sandbox Code Playgroud) 有没有人知道是否有办法配置一个jquery ui可选元素来单击它时取消选中所选元素?有点像切换.如果已选中,则取消选择,否则执行默认行为.
谢谢.
有没有办法定义,只有一个项目可以用jquery.selectable小部件选择?
或者我要实现一个捕捉事件和自我操纵的工作场所会发生什么?
这就是我得到的:
http://jsfiddle.net/hashie5/vk6rZ/
(不介意布局)
第一个表是第二个和第三个表的组合,这是需要完成的表.
秒表可以排序(带箭头).
第三个表可选(不要单击箭头).
目标是:当您选择多个项目时,您应该能够同时对它们进行排序.
如果由于表格而变硬,那么列表的例子也会很棒.
在辅助函数中,我尝试克隆所有选定的(ui选择的类)项,但这太麻烦了
编辑:
我创建了一个新的小提琴:http://jsfiddle.net/hashie5/AZr9Z/
这很好用,但它还不是100%完成
基本上我在a上使用jQuery ui的可选功能ul,但是ul经常会有一个滚动条,而且这个滚动条在Webkit浏览器中变得无法使用,因为当你试图点击它来抓取它时,可选功能的套索会被拉到顶层代替.
我已经制定了一个解决方案,其中包括检查光标相对于ul的位置和宽度的位置,以查看光标是否在滚动条上方,如果是,则停止传播可选择的"start"事件,但尽管如此应该满足有条件的时候,既不返回false也不停止事件的进程似乎阻止了jquery在可选事件中前进.
以下是我对jquery .selectable start事件的看法:
start: function(event, ui) {
var t = event.target;
var cutoff = t.scrollWidth + t.offsetLeft
if (event.clientX > cutoff)
{
console.log('NO!');
console.log(event.type);
//overkill
event.stopPropagation();
event.stopImmediatePropagation();
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
return false;
}
}
Run Code Online (Sandbox Code Playgroud)
所有建议/解决方案表示赞赏,谢谢
经过漫长而耗时的搜索,我找不到一个可以在textview中为android API级别<= 11选择文本的组件.我写过这个可能对你有所帮助的组件:
public class SelectableTextView extends TextView {
public static int _SelectedBackgroundColor = 0xffA6D4E1;
public static int _SelectedTextColor = 0xff000000;
private OnTouchListener lastOnTouch;
protected int textOffsetStart;
protected int textOffsetEnd;
private OnLongClickListener lastOnLongClick;
protected boolean longCliked;
protected boolean isDowned;
protected int textSelectedEnd;
protected int textSelectedStart;
private static SelectableTextView lastInstance;
public SelectableTextView(Context context) {
super(context);
}
public void setTextIsSelectable(boolean selectable) {
// TODO:ANDROID3
// if:androidversion>=3
// super.setTextIsSelectable(selectable);
// else
super.setLongClickable(true);
super.setOnLongClickListener(getSelectableLongClick());
super.setOnTouchListener(getSelectableOnTouch());
}
private OnLongClickListener getSelectableLongClick() {
return new OnLongClickListener() { …Run Code Online (Sandbox Code Playgroud) 这些是来自JQuery网站的代码,我重写了一个内容:
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>
<div class="demo">
<ol id="selectable">
<li class="ui-widget-content"><a href="">link can not click</a></li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item …Run Code Online (Sandbox Code Playgroud) 这是我用JS编写的图表:
css:
-moz-user-select:none;
-khtml-user-select: none;
Run Code Online (Sandbox Code Playgroud)
适用于Chrome/FF,但在IE中,所有元素仍然是可选择的,当拖动周围的条形时看起来很奇怪.
如何在IE中使这个无法选择?
我有一个内部有div的div.外部有一个overflow-y: auto;,因此有许多内部项目会出现右侧滚动条.在$('#container').selectable();我按下滚动条上的鼠标左键后,它不会滚动,但会显示一个用于选择的虚线框.
我找到了这个解决方案:JQuery UI Selectable插件:当div溢出时,滚动条不可选
不幸的是,它对我不起作用,因为当我滚动到底部时,项目停止可选.(虽然最重要的是继续).所以,问题是:如何使滚动条... mmm ...滚动条,而不将容器分成2个div.