Breadcrumb PHP类概述
PHP的Kendo UI Breadcrumb是一个服务器端包装剑道UI面包屑小部件。
面包屑是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');