Propiedad de la plantilla jQWidgets jqxKanban

jQWidgetses un marco de JavaScript para crear aplicaciones basadas en web para PC y dispositivos móviles. Es un marco muy potente, optimizado, independiente de la plataforma y ampliamente compatible. El jqxKanban se usa para representar el método kanban para un proyecto.

La propiedad de la plantilla se utiliza para configurar u obtener una nueva estructura HTML sobre las tarjetas de jqxKanban especificadas.

Sintaxis:

  • Para establecer la propiedad de la plantilla .

    $('#jqxKanban').jqxKanban({ 
        template: "<div class='jqx-kanban-item' id=''>"
        + "<div class='jqx-kanban-item-text'></div>"
        + "<div class='jqx-kanban-item-text'></div>"
        + "<div class='jqx-kanban-item-text'></div>"
        + "</div>", });
    
  •  

  • Para obtener la propiedad de la plantilla .

    var template = $('#jqxKanban').jqxKanban('template');

Archivos vinculados: descargue jQWidgets desde el enlace dado. En el archivo HTML, busque los archivos de script en la carpeta descargada.

<link rel=”hoja de estilo” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></ script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxsortable.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxkanban.js”></script>
<script type=”texto /javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>

Ejemplo: El siguiente ejemplo ilustra la propiedad de la plantilla jQWidgets jqxKanban .

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" 
          href="jqwidgets/styles/jqx.base.css" 
          type="text/css" />
    <script type="text/javascript" 
            src="scripts/jquery.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxcore.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxbuttons.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxsortable.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxkanban.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxdata.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqx-all.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>
            jQWidgets jqxKanban template Property
        </h3>
        <div id="jqx_Kanban"></div>
        <script type="text/javascript">
            $(document).ready(function () {
                var Data = new $.jqx.dataAdapter({
                    localData: [
                        {
                            status: "new",
                            Company_Name: "GeeksforGeeks"
                        }
                    ],
                    dataFields: [
                        {
                            map: "Company_Name",
                            name: "text",
                            type: "string"
                        },
                        {
                            name: "status",
                            type: "string"
                        },
                    ]
                });
                var Data_Function = function () {
                    var Data_Adapter = new $.jqx.dataAdapter({
                        localData: [
                            { name: "" },
                        ],
                    });
                    return Data_Adapter;
                }
                $('#jqx_Kanban').jqxKanban({
                    width: 300,
                    height: 120,
                    resources: Data_Function(),
                    source: Data,
                    template: "<div class='jqx-kanban-item' id=''>"
                        + "<div class='jqx-kanban-item-text'></div>"
                        + "<div class='jqx-kanban-item-text'></div>"
                        + "<div class='jqx-kanban-item-text'></div>"
                        + "</div>",
                    columns: [
                        {
                            text: "Company",
                            dataField: "new"
                        }
                    ]
                });
            });
        </script>
    </center>
</body>
  
</html>

Producción:

Referencia: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxkanban/jquery-kanban-api.htm?search=

Publicación traducida automáticamente

Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *