Question

我想知道为什么我的代码不能使用selectable，im包括库

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

这是包含列表中可选项的代码

<div class="modal-wrapper">
    <ul id="selectable" class="data-list">
        <li class="list-item" ng-repeat="data in testData">
            <div class="row">
                <div class="col-md-4">
                    <div class="container-title">
                        <span class="inner-title">{{data.name}}</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="container-subtitle">
                        <span class="subtitle">{{data.title}}</span>
                    </div>
                </div>
            </div>
        </li>
    </ul>
    <div class="bottom-buttons">
        <button class="btn btn-primary btn-wizard" ng-click="alertSelected()">NEXT</button>
    </div>
</div>

然后这是可选择的一小段代码：

$(function() {  
    $("#selectable").selectable({
        selected: function(event, ui) {
            console.log('im there');    
        }       
    }); 
});

这是我目前用于此测试的CSS：

body{
    background-color: #231f20 !important;
    color: #fff;
}

.modal-wrapper {
    width: 564px;
    height: 650px;
    background-color: #eee;
    overflow: hidden;
    color: #fff;
    position: relative;
}


.list-item {
    background-color: #555;
    width: 250px;
    height: 150px;
    float: left;
    margin: 20px 16px 10px 15px;
}

.container-title {
    width: 250px;
    height: 150px;
    text-align: center;
}

.inner-title {
    position: relative;
    top: 54px;
    font-size: 30px;
}

.container-subtitle {
    text-align: center;
    width: 250px;
}

.subtitle {
    position: relative;
    color: #333;
}

.bottom-buttons {
    position: absolute;
    bottom: 0;
    height: 70px;
    background-color: #eee;
    width: 564px;
}

.btn-wizard {
    position: relative;
    left: 230px;
    top: 17px;
    width: 100px !important;
}

 #selectable .ui-selecting { background: #FECA40; }
 #selectable .ui-selected { background: #F39814; color: white; }

关于什么事情的任何想法？这是一个CSS问题吗？还是<li>结构？

提前致谢，

Answer 1

根据关于可选择的Jqueryui documentation，您只能实现代码<li>包含<ul> or <ol>语法的代码here

<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>
  <li class="ui-widget-content">Item 7</li>
</ol>

如果要将任何悬停事件添加到<li>元素，请将此代码添加到脚本中：

$(function() {
    $( "#selectable" ).selectable();
    $(".list-item").hover(function() {
    alert("hovered!")
}, function() {
    alert("unhovered!")
});
  });

Answer 2

编辑js / controllers / myWorkController.js

portfolioApp.controller('myWorkController', function($scope) {
    $scope.testData = [
        {
            name : "Test 1",
            title : "Home"
        },
        {
            name : "Test 2",
            title : "About"
        },
        {
            name : "Test 3",
            title : "Contact"
        },
        {
            name : "Test 4",
            title : "Join"
        },
        {
            name : "Test 4",
            title : "Join"
        },
        {
            name : "Test 4",
            title : "Join"
        },
        {
            name : "Test 4",
            title : "Join"
        },
        {
            name : "Test 4",
            title : "Join"
        },      
    ];

    $scope.alertSelected = function() {
        /* alert it ! */ 
    };
    $('#selectable').selectable();
});

Answer 3

你必须知道selectable会选择嵌套的孩子

$("#selectable").selectable();

将选择“li”，我发现你的代码有一个“li”，你必须添加更多li到ul 如果你想选择div类“row”，试试：

$(".list-item").selectable();

Answer 4

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

更改为：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

使用AngularJS的jqueryUI可选对我不起作用

4 个答案: