tab-ordering 相关问题


int somme (int t, int tab[]){ if(t==0) return 0;返回 tab[t-1]+somme(t-1,tab);请向我解释一下这段代码

int somme (int t, int tab[]){ 如果(t==0) 返回0; 返回 tab[t-1]+somme(t-1,tab); } 我不明白如何得出数组元素的总和。 我


如何在 Chrome 的文本区域编辑器中使用 Tab 来识别多行?

我正在寻找一种解决方案,使我能够使用 tab/shift-tab 来更改文本区域中选定多行的缩进,就像这里的 markdown 编辑器一样。 到目前为止我正在寻找 Chrome


如何为jodit编辑器添加Tab键逻辑?

如何为jodit编辑器文本区域添加Tab键逻辑?按键时没有缩进。 我尝试了不同的解决方案,例如缩进选项和处理按键事件,但它不正确。我...


Bootstrap 5 中的选项卡未更改

我有一个引导选项卡区域,并使用 Javascript 在选项卡之间切换。 javascript 被调用但不会更改选项卡。 $('#tabList b...</desc> <question vote="0"> <p>我有一个引导选项卡区域,并使用 Javascript 在选项卡之间切换。 javascript 被调用但不会更改选项卡。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; $(&#39;#tabList button&#39;).click ( function (e) { e.preventDefault(); // bootstrap.Tab.getInstance(this).show() $(this).tab(&#39;show&#39;) } ); &lt;/script&gt;</code></pre> <pre><code>&lt;ul class=&#34;nav nav-tabs&#34; id=&#34;tabList&#34; role=&#34;tablist&#34;&gt; &lt;li class=&#34;nav-item&#34; role=&#34;presentation&#34;&gt; &lt;button class=&#34;nav-link&#34; id=&#34;jobs-tab&#34; data-bs-toggle=&#34;tab&#34; data-bs-target=&#34;#jobs&#34; type=&#34;button&#34; role=&#34;tab&#34; aria-controls=&#34;jobs&#34; aria-selected=&#34;true&#34;&gt;[tabHeaderJobs]&lt;/button&gt; &lt;/li&gt; &lt;li class=&#34;nav-item&#34; role=&#34;presentation&#34;&gt; &lt;button class=&#34;nav-link active&#34; id=&#34;employees-tab&#34; data-bs-toggle=&#34;tab&#34; data-bs-target=&#34;#employees&#34; type=&#34;button&#34; role=&#34;tab&#34; aria-controls=&#34;employees&#34; aria-selected=&#34;false&#34;&gt;[tabHeaderEmployees]&lt;/button&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div class=&#34;tabContent&#34; id=&#34;tabContent&#34;&gt; &lt;div class=&#34;tab-pane fade&#34; id=&#34;jobs&#34; role=&#34;tabpanel&#34; aria-labelledby=&#34;jobs-tab&#34;&gt;[tabContentJobs]&lt;/div&gt; &lt;div class=&#34;tab-pane fade active show&#34; id=&#34;employees&#34; role=&#34;tabpanel&#34; aria-labelledby=&#34;employees-tab&#34;&gt;[tabContentEmployees]&lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> <p></p> <p>´´´</p> <p>主选择器是 tabList 还是 tabContent ?</p> <p>那么我是否需要从按钮中选择切换名称,然后使用 <pre><code>($(&#39;#tabContent a[href=&#34;#toggleNameOfTab&#34;]&#39;).tab(&#39;show&#39;)</code></pre> ?</p> </question> <answer tick="false" vote="0"> <p>根据您更新的代码,有几件事:</p> <ol> <li>无需选择<pre><code>#tabContent a</code></pre>。您的选项卡按钮已经具有 <pre><code>.nav-link</code></pre> 类,因此您可以将单击处理程序直接附加到这些按钮:</li> </ol> <pre><code>$(&#39;.nav-link&#39;).click(function() { $(this).tab(&#39;show&#39;); }); </code></pre> <ol start="2"> <li>要以编程方式激活页面加载时的特定选项卡,您可以执行以下操作:</li> </ol> <pre><code>$(&#39;#employees-tab&#39;).tab(&#39;show&#39;); </code></pre> <p>这将在加载时激活#employees-tab。</p> <p>需要了解的关键事项:</p> <ul> <li>使用 <pre><code>.nav-link</code></pre> 将点击处理程序附加到选项卡按钮</li> <li>使用 <pre><code>$(selector).tab(&#39;show&#39;)</code></pre> 以编程方式切换选项卡,其中 <pre><code>selector</code></pre> 是选项卡按钮的 ID 或元素</li> </ul> </answer> </body></html>


从react-native-image-crop-picker录制视频在android 13 - Tab(三星Galaxy Tab A8)中不起作用

我在我的react-native应用程序中使用react-native-image-crop-picker并从Android中的相机录制视频它正在返回[错误:用户取消了图像选择] 笔记: 它正在工作...


Angular 材质选项卡 - 响应式选项卡更改

我在 mat-tab-group 中有两个选项卡: 我在 mat-tab-group 中有两个选项卡: <mat-tab-group animationDuration="0ms" [disablePagination]="false" mat-stretch-tabs="false" mat-align-tabs="start" > <mat-tab label="First tab"> <ng-template matTabContent> <app-first-tab /> </ng-template> </mat-tab> <mat-tab label="Second tab"> <ng-template matTabContent> <app-second-tab /> </ng-template> </mat-tab> </mat-tab-group> 在第一个选项卡上,我生成了很多组件,因此需要一些时间才能完全渲染。 当我选择第二个选项卡并返回第一个选项卡时,应用程序会冻结(几秒钟),直到所有内容都呈现出来。 是否可以显示例如。标题(它的更多-更少的静态),一些微调器,当所有内容都渲染时,隐藏微调器?或者让用户以某种方式知道发生了什么事? 示例:https://stackblitz.com/edit/stackblitz-starters-sb2saw ..仅用于测试目的。 非常感谢。 您遇到的问题有两个部分: 您的异步请求的模拟实际上是使用同步函数(for循环),该函数在访问服务时正在运行。这不是标准 Observable 在野外的工作方式,也是选项卡之间漫长等待的根源。 您可以利用容器和模板在加载异步变量时显示加载微调器。 HTML 示例: <ng-container *ngIf="data$ | async as data; else loading"> <table> <thead> <th>ID</th> <th>Code</th> <th>Buttons</th> </thead> <tbody> <tr *ngFor="let item of data"> <td>{{ item.id }}</td> <td>{{ item.code }}</td> <td> @for (idx of buttonCount; track idx; let index = $index) { <button>{{ idx }}</button> } </td> </tr> </tbody> </table> </ng-container> <ng-template #loading><mat-spinner></mat-spinner></ng-template> 更新了服务以更好地模拟异步数据(也可以作为 Observable 共享): async fetchData(): Promise<ApiModel[]> { let result: ApiModel[] = []; for (let i = 1; i <= this.cnt; i++) { result.push({ id: i, code: `item_${i}` }); } return new Promise((resolve, reject) => { setTimeout(() => resolve(result), Math.random() * 5000); }); } 结果是立即交换选项卡,在加载数据时显示一个微调器图标: StackBlitz 叉子链接


Vue 3如何获取$children的信息

这是我在 Tabs 组件中使用 VUE 2 的旧代码: 创建(){ this.tabs = this.$children; } 标签: .... 这是我在 Tabs 组件中使用 VUE 2 的旧代码: created() { this.tabs = this.$children; } 标签: <Tabs> <Tab title="tab title"> .... </Tab> <Tab title="tab title"> .... </Tab> </Tabs> VUE 3: 如何使用组合 API 获取有关 Tabs 组件中子项的一些信息?获取长度,迭代它们,并创建选项卡标题,...等?有任何想法吗? (使用组合API) 这是我现在的 Vue 3 组件。我使用 Provide 来获取子 Tab 组件中的信息。 <template> <div class="tabs"> <div class="tabs-header"> <div v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)" :class="{'tab-selected': index === selectedIndex}" class="tab" > {{ tab.props.title }} </div> </div> <slot></slot> </div> </template> <script lang="ts"> import {defineComponent, reactive, provide, onMounted, onBeforeMount, toRefs, VNode} from "vue"; interface TabProps { title: string; } export default defineComponent({ name: "Tabs", setup(_, {slots}) { const state = reactive({ selectedIndex: 0, tabs: [] as VNode<TabProps>[], count: 0 }); provide("TabsProvider", state); const selectTab = (i: number) => { state.selectedIndex = i; }; onBeforeMount(() => { if (slots.default) { state.tabs = slots.default().filter((child) => child.type.name === "Tab"); } }); onMounted(() => { selectTab(0); }); return {...toRefs(state), selectTab}; } }); </script> 选项卡组件: <script lang="ts"> export default defineComponent({ name: "Tab", setup() { const index = ref(0); const isActive = ref(false); const tabs = inject("TabsProvider"); watch( () => tabs.selectedIndex, () => { isActive.value = index.value === tabs.selectedIndex; } ); onBeforeMount(() => { index.value = tabs.count; tabs.count++; isActive.value = index.value === tabs.selectedIndex; }); return {index, isActive}; } }); </script> <template> <div class="tab" v-show="isActive"> <slot></slot> </div> </template> 哦伙计们,我解决了: this.$slots.default().filter(child => child.type.name === 'Tab') 对于想要完整代码的人: 标签.vue <template> <div> <div class="tabs"> <ul> <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }"> <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a> </li> </ul> </div> <div class="tabs-details"> <slot></slot> </div> </div> </template> <script> export default { name: "Tabs", data() { return {tabs: [] }; }, created() { }, methods: { selectTab(selectedTab) { this.tabs.forEach(tab => { tab.isActive = (tab.name == selectedTab.name); }); } } } </script> <style scoped> </style> 标签.vue <template> <div v-show="isActive"><slot></slot></div> </template> <script> export default { name: "Tab", props: { name: { required: true }, selected: { default: false} }, data() { return { isActive: false }; }, computed: { href() { return '#' + this.name.toLowerCase().replace(/ /g, '-'); } }, mounted() { this.isActive = this.selected; }, created() { this.$parent.tabs.push(this); }, } </script> <style scoped> </style> 应用程序.js <template> <Tabs> <Tab :selected="true" :name="'a'"> aa </Tab> <Tab :name="'b'"> bb </Tab> <Tab :name="'c'"> cc </Tab> </Tabs> <template/> 我扫描子元素的解决方案(在对 vue 代码进行大量筛选之后)是这样的。 export function findChildren(parent, matcher) { const found = []; const root = parent.$.subTree; walk(root, child => { if (!matcher || matcher.test(child.$options.name)) { found.push(child); } }); return found; } function walk(vnode, cb) { if (!vnode) return; if (vnode.component) { const proxy = vnode.component.proxy; if (proxy) cb(vnode.component.proxy); walk(vnode.component.subTree, cb); } else if (vnode.shapeFlag & 16) { const vnodes = vnode.children; for (let i = 0; i < vnodes.length; i++) { walk(vnodes[i], cb); } } } 这将返回子组件。我对此的用途是我有一些通用的对话框处理代码,用于搜索子表单元素组件以咨询其有效性状态。 const found = findChildren(this, /^(OSelect|OInput|OInputitems)$/); const invalid = found.filter(input => !input.checkHtml5Validity()); 如果你复制粘贴与我相同的代码 然后只需向“选项卡”组件添加一个创建的方法,该方法将自身添加到其父级的选项卡数组中 created() { this.$parent.tabs.push(this); }, 使用脚本设置语法,您可以使用useSlots:https://vuejs.org/api/sfc-script-setup.html#useslots-useattrs <script setup> import { useSlots, ref, computed } from 'vue'; const props = defineProps({ perPage: { type: Number, required: true, }, }); const slots = useSlots(); const amountToShow = ref(props.perPage); const totalChildrenCount = computed(() => slots.default()[0].children.length); const childrenToShow = computed(() => slots.default()[0].children.slice(0, amountToShow.value)); </script> <template> <component :is="child" v-for="(child, index) in childrenToShow" :key="`show-more-${child.key}-${index}`" ></component> </template> 我对 Ingrid Oberbüchler 的组件做了一个小改进,因为它不支持热重载/动态选项卡。 在 Tab.vue 中: onBeforeMount(() => { // ... }) onBeforeUnmount(() => { tabs.count-- }) 在 Tabs.vue 中: const selectTab = // ... // ... watch( () => state.count, () => { if (slots.default) { state.tabs = slots.default().filter((child) => child.type.name === "Tab") } } ) 我也遇到了同样的问题,在做了很多研究并问自己为什么他们删除了$children之后,我发现他们创建了一个更好、更优雅的替代方案。 这是关于动态组件的。 (<component: is =" currentTabComponent "> </component>). 我在这里找到的信息: https://v3.vuejs.org/guide/component-basics.html#dynamic-components 希望这对你有用,向大家问好!! 我发现这个更新的 Vue3 教程使用 Vue 插槽构建可重用的选项卡组件对于与我相关的解释非常有帮助。 它使用 ref、provide 和ject 来替换我遇到同样问题的this.tabs = this.$children;。 我一直在遵循我最初发现的构建选项卡组件(Vue2)的教程的早期版本创建您自己的可重用 Vue 选项卡组件。 根据 Vue 文档,假设您在 Tabs 组件下有一个默认插槽,您可以直接在模板中访问该插槽的子级,如下所示: // Tabs component <template> <div v-if="$slots && $slots.default && $slots.default()[0]" class="tabs-container"> <button v-for="(tab, index) in getTabs($slots.default()[0].children)" :key="index" :class="{ active: modelValue === index }" @click="$emit('update:model-value', index)" > <span> {{ tab.props.title }} </span> </button> </div> <slot></slot> </template> <script setup> defineProps({ modelValue: Number }) defineEmits(['update:model-value']) const getTabs = tabs => { if (Array.isArray(tabs)) { return tabs.filter(tab => tab.type.name === 'Tab') } else { return [] } </script> <style> ... </style> 并且 Tab 组件可能类似于: // Tab component <template> <div v-show="active"> <slot></slot> </div> </template> <script> export default { name: 'Tab' } </script> <script setup> defineProps({ active: Boolean, title: String }) </script> 实现应类似于以下内容(考虑一组对象,每个部分一个,带有 title 和 component): ... <tabs v-model="active"> <tab v-for="(section, index) in sections" :key="index" :title="section.title" :active="index === active" > <component :is="section.component" ></component> </app-tab> </app-tabs> ... <script setup> import { ref } from 'vue' const active = ref(0) </script> 另一种方法是使用 useSlots,如 Vue 文档(上面的链接)中所述。 在 3.x 中,$children 属性已被删除并且不再受支持。相反,如果您需要访问子组件实例,他们建议使用 $refs。作为数组 https://v3-migration.vuejs.org/writing-changes/children.html#_2-x-syntax 在 3.x 版本中,$children 已被删除且不再受支持。使用 ref 访问子实例。 <script setup> import { ref, onMounted } from 'vue' import ChildComponent from './ChildComponent .vue' const child = ref(null) onMounted(() => { console.log(child.value) // log an instance of <Child /> }) </script> <template> <ChildComponent ref="child" /> </template> 详细信息:https://vuejs.org/guide/essentials/template-refs.html#template-refs 基于@Urkle的回答: /** * walks a node down * @param vnode * @param cb */ export function walk(vnode, cb) { if (!vnode) return; if (vnode.component) { const proxy = vnode.component.proxy; if (proxy) cb(vnode.component.proxy); walk(vnode.component.subTree, cb); } else if (vnode.shapeFlag & 16) { const vnodes = vnode.children; for (let i = 0; i < vnodes.length; i++) { walk(vnodes[i], cb); } } } 除了已接受的答案之外: 而不是 this.$root.$children.forEach(component => {}) 写 walk(this.$root, component => {}) 这就是我让它为我工作的方式。


在WPF中当我尝试使用CTRL+TAB切换选项卡时

在 WPF 中,当我尝试使用 CTRL+TAB 切换选项卡时,它可以正常工作,但是如果选项卡位于父选项卡内,那么它将切换到子选项卡,只需要移动父选项卡? 我已经尝试过...


复制相同的 POST 请求(在 DeveloperTools 中检查)无法抓取数据

我试图从此页面获取表格数据,而不使用 BeautifulSoup 解析结果 HTML: https://finance.vietstock.vn/ket-qua-giao-dich/vietnam.aspx?tab=thong-ke-gia&exchange=...


复制相同的 POST 请求(在 DeveloperTools 中检查)无法废弃数据

我试图从此页面获取表格数据,而不使用 BeautifulSoup 解析结果 html: https://finance.vietstock.vn/ket-qua-giao-dich/vietnam.aspx?tab=thong-ke-gia&exchange=...


微软团队 |团队日历仪表板控制

我目前正在开发 Microsoft Teams Tab 应用程序。基本功能之一是通过日历仪表板展示会议。我有兴趣使用相同的 Calendar Dash...


Flutter TabView 仅在 Tab 上刷新,而在 Swipe 上不刷新

我正在尝试通过以下挑战改进我的应用程序:我想用最初为空的TabPages(小部件)填充我的选项卡视图,并在TabViews中执行复杂的操作(例如数据库操作)


登录到 Teams 选项卡应用程序中启用 MSAL 的反应前端

我们有一个使用 MSAL 来验证用户身份的 React 前端。然后我们有一个 Teams Tab 应用程序,它是我们的反应前端的网站。我们如何允许 Teams 用户(已登录 Teams


© www.soinside.com 2019 - 2024. All rights reserved.