0

我正在寻找一些关于我不确定我是否能做到的想法的建议......

我正在从数据库中加载记录并将它们列在单个 div 中，并将数据库中的 id 号添加到 div 中，div 大约 100px 宽并且在屏幕上..

我想知道我是否可以通过 jquery 使用某种插件，这样如果我单击记录，一个选项卡将从右侧滑出，其中包含数据库中该单独记录的更多数据.. 然后我可以关闭它并它会后退，所以我只能再次看到记录..

我已经看了一下包含所有演示的 jquery ui 页面，但我并没有真正找到任何东西......

任何帮助或指示都会很棒..即使您知道类似的事情，我也很乐意研究它...

提前感谢您的帮助

4

3 回答 3

1

当然，让我给你看一个简单的例子。这很容易

<table>
    <tr class="recordrow" id="row-1"> <!-- row-X will be the unique way to identify the row -->
       <td>...</td> <!-- The record field -->
       <td>...</td>
       ....
    </tr>
</table>

<!-- Now we create the details Div, but as reference to the `row-X` -->
<div class="details" id="details-1">
   ... More details of the records
</div>

然后像这样一个简单的jQuery片段将完成工作：

$(".recordrow").click(function() {
    var divid = "details-" + $(this).attr('id').split("-")[1]; //Create the id of the div
    $("#"+divid).show().animate({ "left": '200px'}); //Bring the div from right to left with 200px padding from the screen
});

演示

于 2012-08-31T02:06:50.903 回答
1

好的，这是我的小提琴

HTML（标准容器等）

<div id="container">
    <div id="buttons-container"></div>
    <div id="record">
        <div id="record-content"></div>            
        <a href="#" id="bt-close" onclick="closeRecord(); return false;">Close</a></div>
</div>

CSS

a.bt-record {
    display:block;
    width:100px;
    height:100px;
    background:#999999;
    color:#000;
    line-height:100px;
    text-align:center;
    float:left;
    margin:0 10px 10px 0;
    text-decoration:none;
}

a { color:#fff; }

#container {
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
}

#record {
    position:absolute;
    right:-240px;
    top:100px;
    width:200px;
    height:200px;
    background:#000;
    padding:20px;
    color:#fff;
    z-index:1;
}

Javascript

//your data in a array of objects (could be something else)
var data = {
    1 : {name:'Record 1', text:'This is the text 1', options:'Anything 1'},
    2 : {name:'Record 2', text:'This is the text 2', options:'Anything 2'},
    3 : {name:'Record 3', text:'This is the text 3', options:'Anything 3'},
    4 : {name:'Record 4', text:'This is the text 4', options:'Anything 4'},
    5 : {name:'Record 5', text:'This is the text 5', options:'Anything 5'},
    6 : {name:'Record 6', text:'This is the text 6', options:'Anything 6'},
    7 : {name:'Record 7', text:'This is the text 7', options:'Anything 7'},
    8 : {name:'Record 8', text:'This is the text 8', options:'Anything 8'},
    9 : {name:'Record 9', text:'This is the text 9', options:'Anything 9'}
};

$(document).ready(function() {
    populateEntries();        
});

//dynamically populate the entries
function populateEntries() {
    for (entry in data){
console.log(entry);       
        $('#buttons-container').append('<a class="bt-record" href="#" onclick="showRecord(' + entry + '); return false;">' + data[entry].name + '</a>');
    }
}

//show the record
function showRecord(id) {
    //create the html
    var html = '';
    html += '<p>Name : ' + data[id].name + '</p>';
    html += '<p>Text : ' + data[id].text + '</p>';
    html += '<p>Name : ' + data[id].options + '</p>';
    $('#record-content').html(html);
    $('#record').animate({right:0}, 500);
}

function closeRecord() {
    $('#record').animate({right:-240}, 500);
}

在此示例中，我动态填充记录，但如果您想要一种对 SEO 友好的方式，您可以直接在页面中创建 HTML。如果您有任何问题，请告诉我。

于 2012-08-31T02:10:09.007 回答
0

我会像这样为每个单独的 div 添加一个类：

<div id="someid" class="clickable">
    your content here
    <div class="showonclick" style="visibility:hidden"> 
        The stuff to show on click here 
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){  
    $(".clickable").each(function() {
        var ref = this;
        $(ref).click(function() {
            $(ref + " .showonclick").fadeIn('slow');
        });
    });
});
</script>

基本上，这是在文档准备好后立即为每个具有指定类的 div 添加一个单击处理程序。

我希望这能够帮到你。

于 2012-08-31T01:53:42.317 回答