jquery widget editPopup

by Ömer Serkan Aktürk

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.ui-sunny.css">
 
<div id="gridMenu">
            <div id="add_record" class="jqx_button"><span class="ico"></span><span class="text">Yeni Kayıt</span></div>
            <div id="edit_record" class="jqx_button"><span class="ico"></span><span class="text">Düzenle</span></div>
            <div id="del_record" class="jqx_button"><span class="ico"></span><span class="text">Sil</span></div>
            <div id="assignment_list" class="jqx_button"><span class="ico"></span><span class="text">Atama İşlemleri</span></div>
            <div id="color_codes" class="jqx_button"><span class="ico"></span><span class="text">Renk Kodları</span></div>
        </div>
        <div id="VehicleTableGrid"></div>
 
<div id='gridContextMenu'>
            <ul>
                <li id="cMEdit">#{msg.edit}</li>
                <li id="cMDelete">#{msg.delete}</li>
            </ul>
        </div>
<div id="editPopup">
            <div id="windowHeader">
                <span>
                    Güncelle
                </span>
            </div>
<div id="windowContent" class="loader_content" style="overflow: hidden;">
                <div id="tab">
                    <ul style="margin-left: 30px;">
                        <li>Genel</li>
                        <li>Gelişmiş</li>
                        <li>Atanmış Araçlar</li>
                    </ul>
                    <div>
                        <table>
                            <tr style="display:none;">
                                <td>
                                    <input id="id"...

CSS

/*
! FmsClass v1.2.6 isvts.com | � 2012 Mobility | www.mobility.com.tr
*/
#gridMenu{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
}
.jqx_button{
    position: relative;
    float: left;
    padding: 5px;
    height: 27px;
    margin-right: 5px;
    cursor: pointer;
}
.jqx_form_button{
    width: auto !important;
    padding: 5px;
    padding-left: 10px !important;
    padding-right: 10px;
    cursor: pointer;
}
.jqx_button .ico{
    display: block;
    float: left;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
}
.jqx_button .text{
    display: block;
    float: left;
    margin-top: 5px;
    margin-left: 5px;
}
#jqxGridColumnOptions{
    cursor: pointer;
    float: left;
    /*margin-left: 5px;*/
}
.switchbutton{
    cursor: pointer;
}
.checkbox{
    float: left;
    width: auto;
}
.checkbox > div{
    margin: 0px;
    margin-right: 5px;
}
#list_operations_cat{
    display: none;
}
#add_record .ico{
    background-image:url("http://yeni.isvts.com/resources/img/FMS/gridmenu/add.png");
}
#gridMenu #edit_record .ico{
    background-image:url("http://yeni.isvts.com/resources/img/FMS/gridmenu/edit.png");
}
#gridMenu #del_record .ico{
    background-image:url("http://yeni.isvts.com/resources/img/FMS/gridmenu/delete.png");
}
#gridMenu #save_record .ico, #gridMenu #record_operations .ico{
    background-image:url("http://yeni.isvts.com/resources/img/FMS/gridmenu/save.png");
}
#gridMenu #datagrid_list_query .ico, #gridMenu #list_operations .ico{
    background-image:url("http://yeni.isvts.com/resources/img/FMS/gridmenu/datagrid_list_query.png");
}
#gridMenu #back_operations .ico{
    background-image:url("http://yeni.isvts.com/resources/img/FMS/gridmenu/back.png");
}
#gridMenu #user_assignment .ico, #gridMenu #vehicle_group_assignment .ico, #gridMenu #assignment_list .ico{
    background-image:url("http://yeni.isvts.com/resources/img/FMS/gridmenu/assignment.png");
}
#gridMenu #color_codes...

JavaScript

var theme ="ui-sunny";//energyblue
var lang = new Object();
lang.displayName = "Adı";
lang.plate = "Plaka";
lang.groupName = "Grup Adı";
 
                lang.assignmentUser = "Atayan Kullanıcı";
                lang.assignmentDate = "Atama Tarihi";
                lang.status = "Durum";
                lang.fileName = "Dosya Adı";
                lang.createDate = "Oluşturma Tarihi";
                lang.createUser = "Oluşturan Kullanıcı";
                lang.updateDate = "Değiştirme Tarihi";
                lang.updateUser = "Değiştiren Kullanıcı";
                lang.upperSpeedLimit = "Üst Hız Limiti";
                lang.lowerSpeedLimit = "Alt Hız Limiti";
                lang.idleSpeed = "Rölanti Hızı";
                lang.km = "Km";
                lang.hour = "Saat";
                lang.hours = "Saat";
                lang.hr = "sa";
                lang.minute = "Dakika";
                lang.minutes = "Dakika";
                lang.min = "dk";
                lang.second = "Saniye";
                lang.seconds = "Saniye";
                lang.sn = "sn";
                lang.yes = "Evet";
                lang.no = "Hayır";
                lang.active = "Aktif";
                lang.passive = "Pasif";
                lang.connected = "Bağlı";
                lang.noConnection = "Bağlantı Yok";
                lang.noGps = "Gps Yok";
                lang.other = "Diğer";
                lang.send = "Gönder";
                lang.noSend = "Gönderme";
                lang.add = "Ekle";
                lang.allConfigFiles = "Tüm Ayar Dosyaları";
                lang.unassigned = "Atanmamışlar";
                lang.noneGroup = "Grupsuz";
                lang.allVehicles = "Tüm Araçlar";
                lang.ungroupedVehicles = "Grupsuz Araçlar";
                lang.select = "Seçiniz";
                lang.selectFile = "Dosya Seçiniz";
lang.selectConfigFilesToBeAssigned = "Atanacak Ayar Dosyalarını Seçiniz";
lang.selectVehiclesToBeAssigned = "Atanacak...