Breadcrumb PHP类概述

PHP的Kendo UI Breadcrumb是一个服务器端包装剑道UI面包屑小部件。

Telerik UI PHP DevCraft图像

面包屑是Telerik UI for PHP,一个具有 90+ 组件的专业级UI库,用于构建现代和功能丰富的 应用程序。想要试用它,可以注册一个30天的免费试用期。

开始

配置

Breadcrumb提供了一组默认API配置选项可以在初始化过程中设置。按照以下步骤为PHP配置Kendo UI Breadcrumb:

步骤1确保你遵循了所有步骤关于Telerik UI for PHP的介绍文章-包括自动加载器,JavaScript和CSS文件。

步骤2创建一个面包屑

$breadcrumb = new \Kendo\UI\ breadcrumb ('breadcrumb');$rootItem = new \Kendo\UI\BreadcrumbItem();$rootItem->类型("rootItem") ->href("https://demos.telerik.com/php-ui/") ->文本("所有组件")->showText(true) ->图标("home") ->showIcon(true);$firstItem = new \Kendo\UI\BreadcrumbItem();$firstItem->type("item") ->href("/breadcrumb") ->text(" breadcrumb") ->showText(true);$secondItem = new \Kendo\UI\BreadcrumbItem();secondItem - >类型(“项目”)——> href(“/指数”)- >文本(“基本用法”)- > showText(真正的);面包屑- > addItem美元($ rootItem);面包屑- > addItem美元($ firstItem);面包屑- > addItem美元($ secondItem);

步骤3方法的结果输出Breadcrumb渲染方法:

<?= $breadcrumb->render()

导航“配置”决定是否启用自动导航。默认值为false。当设置为true时,url将被添加到href属性的Breadcrumb项。

<?php $breadcrumb = new \Kendo\UI\ breadcrumb ('breadcrumb');$breadcrumb ->bindToLocation(true) ->导航(true);echo $面包屑- >渲染();? >

bindToLocation配置将小部件的值设置为当前url(位置对象)。此外,该url将被添加到href属性来添加面包屑项导航配置。

图标

Breadcrumb允许配置项的图标和分隔符。

根图标

根图标是第一个图标,呈现为首页图标。可以通过items.icon配置。它也是可点击的,它将重置组件的值。

项目图标

在根图标之后为每个元素呈现的图标。它也是可单击的,可以通过items.icon

分隔符图标

用于分隔面包屑项目的图标。

下面的示例演示了如何更改不同的图标。

<?php $breadcrumb = new \Kendo\UI\ breadcrumb ('breadcrumb');$rootItem = new \Kendo\UI\BreadcrumbItem();$rootItem->type("rootItem") ->href("https://demos.telerik.com/php-ui/") ->text("All Components") ->showText(true) ->icon("globe") ->showIcon(true);$firstItem = new \Kendo\UI\BreadcrumbItem();$firstItem->type("item") ->href("/breadcrumb") ->text(" breadcrumb") ->showText(true) ->icon("gear") ->showIcon(true);$secondItem = new \Kendo\UI\BreadcrumbItem();secondItem - >类型(“项目”)——> href(图标“/”)- >文本(“图标”)- >图标(“云”)- > showIcon(真正的)- > showText(真正的);面包屑- > addItem美元($ rootItem);面包屑- > addItem美元($ firstItem); $breadcrumb->addItem($secondItem); $breadcrumb->delimiterIcon("line"); echo $breadcrumb->render(); ?>

编辑

类型,则可以编辑通过Breadcrumb小部件设置的路径可编辑的启用配置。当您在组件的空白区域或当前页面上单击时,Breadcrumb将进入编辑模式。这也会发生,当你输入如果面包屑聚焦,请按。

编辑模式显示一个包含小部件当前值的输入字段。用户可以输入新的路径。

下面的示例演示了如何启用面包屑的编辑。

<?php $breadcrumb = new \Kendo\UI\ breadcrumb ('breadcrumb');$rootItem = new \Kendo\UI\BreadcrumbItem();$rootItem->类型("rootItem") ->href("https://demos.telerik.com/php-ui/") ->文本("所有组件")->showText(true) ->图标("home") ->showIcon(true);$firstItem = new \Kendo\UI\BreadcrumbItem();$firstItem->type("item") ->href("/breadcrumb") ->text(" breadcrumb") ->showText(true);$secondItem = new \Kendo\UI\BreadcrumbItem();secondItem - >类型(“项目”)——> href(“/编辑”)- >文本(“编辑”)- >图标(“编辑”)——> showIcon(真正的)- > showText(真正的);面包屑- > addItem美元($ rootItem);面包屑- > addItem美元($ firstItem); $breadcrumb->addItem($secondItem); $breadcrumb->editable("true"); echo $breadcrumb->render(); ?>

事件处理

你可以订阅事件处理程序的名字。

指定函数名

下面的示例演示了如何通过指定JavaScript函数名订阅事件。

<?php $breadcrumb = new \Kendo\UI\ breadcrumb ('breadcrumb');$rootItem = new \Kendo\UI\BreadcrumbItem();$rootItem->类型("rootItem") ->href("https://demos.telerik.com/php-ui/") ->文本("所有组件")->showText(true) ->图标("home") ->showIcon(true);$firstItem = new \Kendo\UI\BreadcrumbItem();$firstItem->type("item") ->href("/breadcrumb") ->text(" breadcrumb") ->showText(true);$secondItem = new \Kendo\UI\BreadcrumbItem();secondItem - >类型(“项目”)——> href(“/事件”)- >文本(“事件”)——> showText(真正的);面包屑- > addItem美元($ rootItem);面包屑- > addItem美元($ firstItem); $breadcrumb->addItem($secondItem); $breadcrumb->editable("true"); $breadcrumb->click("onClick"); $breadcrumb->change("onChange"); echo $breadcrumb->render(); ?> 

参考

客户端实例

若要引用现有的Breadcrumb实例,请使用jQuery.data ()方法。建立了引用之后,使用API控制它的行为。

下面的示例演示如何访问现有的BottomNavigation实例。

$breadcrumb = new \Kendo\UI\ breadcrumb ('breadcrumb');