开发者

jQuery Selectable only select 1 and get a value?

This might seem like an odd request but I'd like to use jQuery's Selectable tool to only select one item at a time and I'd like it to show me a value I'll have within each tag. At the very least I want the contents of that selection. Has anyone tried t开发者_Python百科o do this? For some reason these little things seem to not be all that easily findable in their API for it.


If you only want one selection at a time, then why use selectable?

I would think you would just use jQuery, as it should be very easy. Or am I missing your point?

Live Example: http://jsfiddle.net/F7fsx/

HTML

<div id='container'>
    <div id='one'>one</div>
    <div id='two'>two</div>
    <div id='three'>three</div>
</div>
​

CSS

#container div {
    width: 50px;
    height: 50px;
    border: 2px dashed red;
    margin: 10px;
    color: white;
    background:orange;
}
​

jQuery

$('#container div').click(function() {
    $th = $(this);
    $th.css('backgroundColor','yellow');
    var value = $th.text()
    alert(value);
});​


A post from the jQuery Forum offers the following code to limit selection to a single item:

$("li").live("click", function(event) {
   $(this).siblings().removeClass("selected");
   $(this).addClass("selected");
});

As far as extracting data, here is the code that the jQuery UI team uses in the Serialize Demo, to extract data from each selected element:

    $("#selectable").selectable({
        stop: function(){
            var result = $("#select-result").empty();
            $(".ui-selected", this).each(function(){
                var index = $("#selectable li").index(this);
                result.append(" #" + (index + 1));
            });
        }
    });

And the HTML markup is:

<ol id="selectable"> 
 <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> 
</ol> 
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜