Arraylist不在php中工作

时间：2012-10-23 11:21:37

标签： php arraylist

我在php中创建了一个arraylist

它位于按钮中。当我点击它打开按钮时，它会打开所有的aaraylist但链接的代码有问题，代码是here。
有人可以告诉我问题在哪里。

var Arraylist<String> = new Arraylist<String>;

4 个答案:

答案 0 :(得分：0)

问题是任何点击都会立即隐藏下拉列表，然后通过切换它再次显示它。

我正在尝试编辑你的小提琴尝试让它以你想要的方式工作：）。

编辑：这是一个小提琴，可以完成我认为您希望它做的事情：fiddle

我从你的小提琴中得到的想法是你想要在点击它时切换菜单，如果你点击其他任何地方，默认情况下隐藏菜单。

这可以通过记住项目是否被切换来工作，如果没有，它将默认隐藏。

var nav = $('#nav');
nav.find('ul#nav').toggle();
var emp = $(this);
$("html").click(function() {});
$(document).bind('click', function(e) {
    var dd = $("ul.dropdown");
    var toggled = false;

    var target = $(e.target); //2
    if (target.parent().is('#nav')) {
        var li = target.closest('li.menu');
        toggled = true;
        li.find('ul.dropdown').toggle();
    }
    if (!toggled) {
        dd.hide();
    }
});

答案 1 :(得分：0)

你需要摆脱额外的hide（），因为你隐藏然后翻转，覆盖你的切换。

例如，看到它工作 http://jsfiddle.net/RxJer/11/ 

var nav = $('#nav');
nav.find('ul#nav').toggle();
var emp = $(this);
$("html").click(function() {});
$(document).bind('click', function(e) {
    var target = $(e.target); //2
    var dropdown = target.parents('#nav').find('li.menu ul.dropdown');
    dropdown.toggle();
});​

答案 2 :(得分：0)

试试这个：

$(document).bind('click', function(e) {
    var target = $(e.target); //2
    if (target.parent().is('#nav') || target.parent().is('.menu')) {
        var li = target.closest('li.menu');
        var dd = li.find('ul.dropdown');

        var isVis = dd.is(':visible');
        $("ul.dropdown").hide();

        (isVis) ? dd.hide() : dd.show();
    } else {
        $("ul.dropdown").hide();
    }
});

答案 3 :(得分：0)

好的，让我们解决代码中的所有问题。 我会解释你做错了什么，为什么，以及推荐什么。

首先：

HTML标记。

包含的示例代码包含标记错误。您将在嵌套的无序列表后关闭嵌套无序列表中的一个列表项。轻微，但对有效标记很重要。有些浏览器可以解决这些问题。

我注意到的第二件事是你在列表中使用相同的ID。 ID对于文档是唯一的，以便在CSS和Javascript中快速引用它。如果您打算在文档中选择多个元素，请使用类，这就是它们的用途。您可以详细了解here或here。

取决于您的预期用途;要获得相同的预期结果，请考虑使用此标记

<div class='emp_alt'>
    <div class='container'>
        <div class='title'>EMP</div>
        <img src="http://www.iconarchive.com/download/i32215/tpdkdesign.net/refresh-cl/Symbols-Find.ico">
    </div>
    <div class='dropdown'>Contact no.</div>
</div>

一般来说，客户端的处理时间越少，您拥有的元素就越少。将CSS应用于元素时，强烈建议按类或ID选择它们，而不是按标记名称选择。使用标记名称会占用额外的处理时间，因为客户端必须执行更多的通用搜索。您可以阅读有关高效CSS here的更多信息。

这是带有更正标记的working example 这是使用备用标记的working example。

我不确定您是否尝试完成某种工具提示行为，在这种情况下，this example应该适合您。

JQuery（Javascript）

其他答案正确地指出了你的主要问题是你在点击时隐藏了下拉列表。他们没有解决的问题是，当用户点击某些内容并且您的文档点击它时，它将返回前面中的元素。

因此，当您单击文本时，＃nav元素位于前面。但是，图像本身就是一个元素，位于#nav元素的前面。

这就是为什么你应该使用正确的事件，因为它们包含元素内的所有内容。

正如您在上面的示例中所注意到的那样，有一种更快，更清洁，更好的方式来实现您的目标。

你应该做这样的事情

var dropdowns = $(".dropdown");

$(".nav > li").click(function(e){
    //Prevent document click event from firing
    e.stopPropagation();

    var this_dropdown = $(this).children("ul.dropdown");

    dropdowns.not(this_dropdown).hide();
    this_dropdown.toggle();
});

//Hide all dropdowns if not clicked on a list item (or container)
$(document).click(function(){
    dropdowns.hide();
});

注意：如果您不想停止传播，可以使用“传感器”代替。基本上，传感器确定布尔值的状态，然后用于确定文档点击事件是否应该执行任何操作。在文档单击时检查布尔值状态的if语句应该足够了。 

var dropdowns = $(".dropdown");
var sensor_state = true;

$(".nav > li").click(function(e){
    var this_dropdown = $(this).children("ul.dropdown");

    dropdowns.not(this_dropdown).hide();
    this_dropdown.toggle();
}).mouseenter(function(){
    sensor_state = false;
}).mouseleave(function(){
    sensor_state = true;
});

$(document).click(function(){
    if(sensor_state){
        dropdowns.hide();
    }
});

这取决于nav元素具有下拉子元素的标记。 这是使用您的示例的example。

这里的问题是你的标记使得这个代码在单击它本身时切换下拉列表。这就是为什么我在前面的例子中添加了一个容器。

希望我至少做了一些意义并解决了你的问题。

更新

在你最新的评论之后，表明你正在使用jqgrid而你想要一个下拉列表，我决定创建一个相当thorough example的方法来完成它。
我建议你学习代码并从中学习。只要您知道如何以及为什么，您就不必像我一样完成任务。

功能性：

  • 当用户点击jqgrid中的联系人单元格时，它将显示下拉容器和“服务器”提供的数据（自定义数组数据比暂存ajax事件更容易）。服务器提供的数据位于隐藏列（在联系人列之后）
  • 如果您在下拉容器中单击，它将不会关闭。我在其中添加了一个关闭按钮，因为用户可能会对如何关闭它感到困惑。拥有一个比没有一个
    • 更好
  • 如果您单击文档中的任何其他位置，它将关闭
  • 如果用户在下拉容器可见时单击同一单元格，则会关闭

下拉容器没有连接到电池本身，而是从外部定位。这允许我们重用相同的容器，而不是为每个单元创建新容器，从而节省了我们在此过程中的时间。

这就是编写我愿意去的代码。剩下的由你来配合：）

我不愿意在这篇文章中添加更多文字，但为了完整起见，我将添加整个示例代码。

代码| JSFiddle Example

HTML 

<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.multiselect.css" />
<script src="http://trirand.com/blog/jqgrid/js/jquery.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.layout.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/ui.multiselect.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.tablednd.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.contextmenu.js" type="text/javascript"></script>

<table id="list"></table>
<div id="pager"></div>
<div id="contact_info"></div>

CSS 

#contact_info{
    position: absolute;
    top: 0;
    left: 0;
    display:none;

    background-color: white;
    border: 1px solid gray;
    padding: 5px 3px;

    -moz-box-shadow: 3px 3px 4px #CCC;
    -webkit-box-shadow: 3px 3px 4px #CCC;
    box-shadow: 3px 3px 4px #CCC;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#CCCCCC')";
}

#list .contact{
    cursor: pointer;
}

.container{
    cursor: pointer;
}

td.contact:active{
    background-color: #FBEC88;
}

.container .dropdown{
    display: none;
}

.ui-jqgrid tr.jqgrow td{
    white-space: normal;
}

/*
    Style the dropdown box
*/

h2{
    border-bottom: 1px solid lightgray;
}

p{
    padding: 2px;
}

h2, p{
    margin: 0;
}

.close_btn{
    font-size: 10px;
    line-height: 10px;
    float: right;
    text-decoration: none;
}

的Javascript 

//Preload the image to avoid flashes
search_img= new Image();
search_img.src = "http://www.iconarchive.com/download/i32215/tpdkdesign.net/refresh-cl/Symbols-Find.ico";

//The dropdown container
var contact_info = $("#contact_info");

//ID of last clicked row
var last_row;

//Sensor state determining whether document click will close the dropdown container on click
var sensor_state = true;

//Dropdown information data (base)
var dd_bp = "<img src='"+search_img.src+"'>",
    dd_inf = "<h2>Contact information</h2><p>Phone: 555-12345<br/>E-mail: something@someplace.whatever<br/>P/O Box: 555555</p>"

//Data array (don't know what you use as a source, but I'll keep it simple)
//This setup allows you to send dropdown data from the server as well :)
var data_from_server = [
    {id:"1",title:"Economy advisor",name:"Luke",lname:"North", contact: dd_bp, dropdown: dd_inf},
    {id:"2",title:"Salesperson",name:"John",lname:"Smith",contact: dd_bp, dropdown: dd_inf},
    {id:"3",title:"Economy advisor",name:"Jimmy",lname:"Hendrix",contact: dd_bp, dropdown: dd_inf},
    {id:"6",title:"IT Manager",name:"Caroline",lname:"GlaDos",contact: dd_bp, dropdown: dd_inf},
    {id:"5",title:"Quality Inspector",name:"Paul",lname:"Shoreman",contact: dd_bp, dropdown: dd_inf},
    {id:"4",title:"Quality Inspector",name:"Liza",lname:"Ingridge",contact: dd_bp, dropdown: dd_inf},
    {id:"8",title:"Distribution manager",name:"Elisabeth",lname:"Welman",contact: dd_bp, dropdown: dd_inf},
    {id:"10",title:"Quality Inspector",name:"John",lname:"Johansson",contact: dd_bp, dropdown: dd_inf},
    {id:"11",title:"Economy advisor",name:"Tommy",lname:"the Knuckle",contact: dd_bp, dropdown: dd_inf},
    {id:"9",title:"Manufacturer",name:"Rosa",lname:"Minx",contact: dd_bp, dropdown: dd_inf}
];

//Adds the content to and repositions the dropdown container to the current row cell
function show_contact_info(rowid){
    var row = $("#"+rowid),
        contact_cell = $("td.contact", row),
        dropdown_content = $("td.dropdown", row).html();

    //Add the content
    contact_info.html(dropdown_content).append("<a class='close_btn' href='#'>close</a>");

    //Add a close button event
    $(".close_btn").on("click", function(e){
        e.preventDefault();
        contact_info.hide();
    });

    //Position the contact info box        
    contact_info.css({
        //The last calculations will center the container
        left: contact_cell.offset().left - contact_info.outerWidth()/2 + contact_cell.outerWidth()/2,
        //The last calculation will position the container below the cell, replace it with
        // -contact_info.outerHeight() to position it above the cell
        top: contact_cell.offset().top + contact_cell.outerHeight(),
    });

    contact_info.show();
}

function sensor_enter(){sensor_state = false;}
function sensor_leave(){sensor_state = true;}

function add_sensor(element){
    element
        .on("mouseenter", sensor_enter)
        .on("mouseleave", sensor_leave);
}

//Setup jqgrid
$("#list").jqGrid({
    datatype: "local",
    width: 600,
    colNames:['EID', 'Title','First name', 'Last name', 'Contact', "Dropdown"],
    colModel:[
        {name:'id',index:'id', width:20, sorttype:"int"},
        {name:'title',index:'title', width:90},
        {name:'name',index:'name', width:50, align:"left"},
        {name:'lname',index:'lname', width:50, align:"left"},
        {name:'contact',index:'contact', width:25, align:"center", classes:'contact'},
        {name:'dropdown', index:'dropdown', hidden:true, classes:'dropdown'}
    ],
    rowNum:10,
    rowList:[5,10,15],
    pager: '#pager',
    viewrecords: true,
    caption:"Employees",
    onSelectRow: function(rowid, status, e){
        var row = $("#"+rowid)

        //"Hide" selection so that cell selection looks "cooler" :)
        row.attr("class", "ui-widget-content jqgrow ui-row-ltr ui-state-hover");
    },
    onCellSelect: function(rowid, iCol, cellcontent, e){
        if(iCol == 4){
            if(last_row == rowid){
                if(contact_info.is(":hidden")){
                    show_contact_info(rowid);
                }else{
                    contact_info.hide();
                }
            }else{
                show_contact_info(rowid);
            }
            last_row = rowid;
        }
    },
    idPrefix: "emp_",
    gridComplete: function(){
        //Because the content is dynamic, we need to add it after the grid has finished
        //This should be done for server generated content, ie the loadComplete event for server requests
        add_sensor($("tr td.contact"));
    }
});

$("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});

for(var i=0;i<=data_from_server.length;i++){
    $("#list").jqGrid('addRowData',i+1,data_from_server[i]);
}

//Sensor for the dropdown container
add_sensor($("#contact_info"));

//Hide contact info on document click
$(document).click(function(){
    if(sensor_state){
        contact_info.hide();
    }
});

这应该是什么样子 jqgrid result

以下是所有参考资料

相关问题
最新问题