popup

<link rel="stylesheet" type="text/css" media="screen" href="themes/cupertino/jquery-ui-1.10.3.custom.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />
<style>
.centerTable{
    width:600px;
    margin:50px auto 0;

}
.hide {
     display:none;
    position:absolute;
    top:30px;
    background:#5c9ccc;
    padding:1px;
    z-index:200;
    /*
    border-radius: 15px 15px 0 0;
    */
    width:600px;
    margin:10px auto;
}
.hide2 {
   z-index:201;
    padding:10px 0px 0 0px;
}
.head2{
    margin:0  ;
    padding:0 30px 5px;
    color:white;
}

.msg{
display:none;
}
.hide3 {
    display:none;
    position:fixed;
    top:0;
    left:0;
    z-index:100;
    opacity:0.5;
    filter:alpha(opacity=80);
    /* For IE8 and earlier */
    background:gray;
}
li.dua {
    margin:30px 20px;
}
.one {

    margin:auto;
    padding:10px 30px;
    background:white;
}
.two{
    vertical-align: top;
    padding: 11px 25px 0;
    width: 120px;
    float: left;
    height: 50px;
}
.two div{
vertical-align:top;
padding: 0  ;
min-width:30px;
float:left;
}
.three{
    text-align:top;
    padding:0px 50px 10px 0;
    width:40px;
    float:right;
    height:50px;
}
.four{
background:#dfeffc;
padding: 5px 6px 0;
margin:0 0 1px 0;

}

.clear{
clear:both;
}
.block {
    float:left;
    padding-bottom:15px;
    width:150px;
}
.block div{
     float:left;
}
.block .txt{

}


/*Splitter style */
input{

}

#LeftPane {
    /* optional, initial splitbar position */
    overflow: auto;
}
/*
 * Right-side element of the splitter.
*/

#RightPane {
    padding: 2px;
    overflow: auto;
}
.ui-tabs-nav li {position: relative;}
.ui-tabs-selected a span {padding-right: 10px;}
.ui-tabs-close {display: none;position: absolute;top: 3px;right: 0px;z-index: 800;width: 16px;height: 14px;font-size: 10px; font-style: normal;cursor: pointer;}
.ui-tabs-selected .ui-tabs-close {display: block;}
.ui-layout-west .ui-jqgrid tr.jqgrow td { border-bottom: 0px none;}
.ui-datepicker {z-index:1200;}
.rotate
    {
        /* for Safari */
        -webkit-transform: rotate(-90deg);

        /* for Firefox */
        -moz-transform: rotate(-90deg);

        /* for Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
#list2{
    width:600px;
}
#pager2{
    height:60px;

}
</style>


<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>


<script src="js/ui.multiselect.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jquery.tablednd.js" type="text/javascript"></script>
<script src="js/jquery.contextmenu.js" type="text/javascript"></script>
<div class='centerTable'>
    <table id="list2"></table>
    <div id="pager2" ></div>
</div>
<script >
jQuery("#list2").jqGrid({
    url:'localset.php',
    datatype: "json",
    height: 255,
    width: 600,
   colNames:['Index','Name', 'Code'],
    colModel:[
        {name:'item_id',index:'item_id', width:65,  sorttype:'integer', searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
        {name:'item',index:'item', width:150, sorttype:'string', searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']}},
        {name:'item_cd',index:'item_cd', width:200}
    ],
    rowNum:20,
    rowTotal: 200,
    rowList:[20,30,50],
    loadonce:true,
    mtype: "GET",
    rownumbers: true,
    rownumWidth: 40,
    gridview: true,
    pager: '#pager2',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Example"
});
jQuery("#list2").jqGrid('filterToolbar',{searchOperators : true});
jQuery("#gs_item").bind("click", function()
{
show("#gs_item");
});
/*
my function
*/
var active="#gs_item";
function show(t) {
    active=t;

    var $this = $(t);
    var shide = $(".hide3");
    h=window.innerHeight; w=$(window).width()
    if(h<600) h=640;
    if(w<1000) w=1024;
    shide.width(w);
    shide.height(h);
    //$(window).height()
    shide.show();


    var shide = $(".hide");
    shide.css('display', 'none');
    //log('anda menekan');

    pos = $this.position();
    //log("left:" + pos.left + ";top:" + pos.top);
    top = pos.top;
    ////log('top:=' + top);
    offset = $this.offset();
    //log("left: " + offset.left + "," + offset.top);
    divThis = $this.parent();
    n1 = divThis.height()-10;
    //log(n1);

    posLeft=Math.ceil(  offset.left) ;//($(window).width() - /2
    shide.css('top', offset.top + n1);
    shide.css('left', posLeft );
    w=$(window).width() - posLeft -100;
    shide.css('width',w);
    shide.show();
    //log('tampil');
}

function hideAll() {
    var shide = $(".hide3");
    shide.css('display', 'none');
    var shide = $(".hide");
    shide.css('display', 'none');
}

function cariData() {
    var i = 0;
    var ar = new Array();
    //log('start cari data');
    $(".cat").each(function () {

        if ($(this).is(':checked')) {

            ar[i] = $(this).val();
            i++;
        }
    });
    s = ar.join(', ');
    //log(s);
    //log('active='+active);
    $(active).val(s);
}

function log(s) {
    $(".msg").append("<br>" + s);
    console.log(s);
}

function checkAll() {
    if ($(".checkAll").is(':checked')) {
        $(".cat").prop("checked", true);
    } else {
        $(".cat").prop("checked", false);
    }
    $(".checkNone").prop("checked", false);
    cariData();
}

function checkNone() {

    $(".checkAll").prop("checked", false);
    $(".cat").prop("checked", false);
    $(".checkNone").prop("checked", false);
    cariData();
}
$(function () {
    $(".cat").change(function () {
        cariData();
        $(".checkAll").prop("checked", false);
    });
    $(".button").button();
});
</script>

<div class='msg'>

</div>
<div class='hide'>
    <div class='hide2'>
    <h2 class='head2'>Category</h2>
    <div class='four'>
        <div class='two'>
             <div> <input type=checkbox onclick='checkAll();' class='checkAll' /> </div>
            <div>Select All</div>
        </div>
        <div class='two'>
            <div> <input type=checkbox onclick='checkNone();' class='checkNone' /> </div>
            <div >Select None</div>
        </div>
        <div class='three'>
            <a href="#"onclick='hideAll();'  class='button' >apply</a>
        </div>
        <br class='clear' />
    </div>
        <div class='one'>
<?php
$aBuah=array(
'Apel',
'Jeruk',
'Rambutan',
'Durian',
'Anggur'

);
for($i=1;$i<count($aBuah);$i++)
{?>
            <div class='block'>
                <div><input type=checkbox value='<?=$aBuah[$i];?>' class='cat' /></div>
                <div class='txt'><?=$aBuah[$i];?></div>
            </div>
<?php
}
?>
            <div style='clear:both'></div>
        </div>
    </div>
</div><div class='hide3' onclick='hideAll()'></div>