Python中文网 - 问答频道, 解决您学习工作中的Python难题和Bug
Python常见问题
所以我尝试生成一个包含三个不同选项卡的网页，每个选项卡都有不同的内容。 我希望第一个选项卡包含不同的HTML控件，例如单选按钮和下拉菜单。你知道吗
当试图将两者结合在一起时，会生成HTML控件的GUI，但是HTML控件似乎对任何类型的输入都没有响应。你知道吗
注意：我还在Flask框架中使用python2.7。你知道吗
这是我的选项卡的.html代码…
<!DOCTYPE html>
<html>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<body>
{% extends "layout.html" %}
{% block content %}
<div id="tab">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<ul class="ui-tab" role="tablist">
<li role="tab">
<a href="#tab1" data-bind="click: showBlock, css: { 'active': selected() == 'tab1' || init() == 1 }">Tab1</a>
</li>
<li role="tab">
<a href="#tab2" data-bind="click: showBlock, css: { 'active': selected() == 'tab2' }">Tab2</a>
</li>
<li role="tab">
<a href="#tab3" data-bind="click: showBlock, css: { 'active': selected() == 'tab3' }">Tab3</a>
</li>
</ul>
<!-- ...................................................................Tab1............................................................................... -->
<div class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab1' || init() == 1">
<p>Tab1 Contents<br></p>
</div>
<!-- ...................................................................Tab2............................................................................... -->
<div class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab2'">
<p></p>
</div>
<!-- ...................................................................Tab3............................................................................... -->
<div class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab3'">
<p></p>
</div>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<script>
var TabViewModel = function(){
var self = this;
//Set href value of element
self.selected = ko.observable(null);
//initial set to show first tabpanel when loading page
self.init = ko.observable(1);
//Get href value og element
self.getHref = function(){
var target;
var element = event.target.hash;
target = element.substr(1);
return target;
};
//Show Tabpanel
self.showBlock = function(){
var target = self.getHref();
self.selected(target);
self.init(2);
};
};
ko.applyBindings(new TabViewModel());
</script>
</div>
{% endblock %}
</body>
</html>
这是我的表的代码…
<!DOCTYPE html>
<html>
<body>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
{% extends "layout.html" %}
{% block content %}
<div class='liveExample'>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<div class="readout">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<h3>What's in the model?</h3>
<table>
<tr>
<td class="label">Text value:</td>
<td data-bind="text: stringValue"></td>
</tr>
<tr>
<td class="label">Password:</td>
<td data-bind="text: passwordValue"></td>
</tr>
<tr>
<td class="label">Bool value:</td>
<td data-bind='text: booleanValue() ? "True" : "False"'></td>
</tr>
<tr>
<td class="label">Selected option:</td>
<td data-bind="text: selectedOptionValue"></td>
</tr>
<tr>
<td class="label">Multi-selected options:</td>
<td data-bind="text: multipleSelectedOptionValues"></td>
</tr>
<tr>
<td class="label">Radio button selection:</td>
<td data-bind="text: radioSelectedOptionValue"></td>
</tr>
</table>
<script>
var viewModel = {
stringValue: ko.observable("Hello"),
passwordValue: ko.observable("mypass"),
booleanValue: ko.observable(true),
optionValues: ["Alpha", "Beta", "Gamma"],
selectedOptionValue: ko.observable("Gamma"),
multipleSelectedOptionValues: ko.observable(["Alpha"]),
radioSelectedOptionValue: ko.observable("Beta")
};
ko.applyBindings(viewModel);
</script>
</div>
<h3>HTML controls</h3>
<table>
<tr>
<td class="label">Text value (updates on change):</td>
<td><input data-bind="value: stringValue" /></td>
</tr>
<tr>
<td class="label">Text value (updates on keystroke):</td>
<td><input data-bind='value: stringValue, valueUpdate: "afterkeydown"' /></td>
</tr>
<tr>
<td class="label">Text value (multi-line):</td>
<td><textarea data-bind="value: stringValue"> </textarea></td>
</tr>
<tr>
<td class="label">Password:</td>
<td><input type="password" data-bind="value: passwordValue" /></td>
</tr>
<tr>
<td class="label">Checkbox:</td>
<td><input type="checkbox" data-bind="checked: booleanValue" /></td>
</tr>
<tr>
<td class="label">Drop-down list:</td>
<td><select data-bind="options: optionValues, value: selectedOptionValue"></select></td>
</tr>
<tr>
<td class="label">Multi-select drop-down list:</td>
<td><select multiple="multiple" data-bind="options: optionValues, selectedOptions: multipleSelectedOptionValues"></select></td>
</tr>
<tr>
<td class="label">Radio buttons:</td>
<td>
<label><input type="radio" value="Alpha" data-bind="checked: radioSelectedOptionValue" />Alpha</label>
<label><input type="radio" value="Beta" data-bind="checked: radioSelectedOptionValue" />Beta</label>
<label><input type="radio" value="Gamma" data-bind="checked: radioSelectedOptionValue" />Gamma</label>
</td>
</tr>
</table>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<script>
var viewModel = {
stringValue: ko.observable("Hello"),
passwordValue: ko.observable("mypass"),
booleanValue: ko.observable(true),
optionValues: ["Alpha", "Beta", "Gamma"],
selectedOptionValue: ko.observable("Gamma"),
multipleSelectedOptionValues: ko.observable(["Alpha"]),
radioSelectedOptionValue: ko.observable("Beta")
};
ko.applyBindings(viewModel);
</script>
</div>
{% endblock %}
</body>
</html>
这是我将它们组合在一起的失败尝试…
<!DOCTYPE html>
<html>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<body>
{% extends "layout.html" %}
{% block content %}
<div id="tab">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<ul class="ui-tab" role="tablist">
<li role="tab">
<a href="#tab1" data-bind="click: showBlock, css: { 'active': selected() == 'tab1' || init() == 1 }">Tab1</a>
</li>
<li role="tab">
<a href="#tab2" data-bind="click: showBlock, css: { 'active': selected() == 'tab2' }">Tab2</a>
</li>
<li role="tab">
<a href="#tab3" data-bind="click: showBlock, css: { 'active': selected() == 'tab3' }">Tab3</a>
</li>
</ul>
<!-- ...................................................................Tab1............................................................................... -->
<div class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab1' || init() == 1">
<p>Tab1 Contents<br></p>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<div class='liveExample'>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<div class="readout">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<h3>What's in the model?</h3>
<table>
<tr>
<td class="label">Text value:</td>
<td data-bind="text: stringValue"></td>
</tr>
<tr>
<td class="label">Password:</td>
<td data-bind="text: passwordValue"></td>
</tr>
<tr>
<td class="label">Bool value:</td>
<td data-bind='text: booleanValue() ? "True" : "False"'></td>
</tr>
<tr>
<td class="label">Selected option:</td>
<td data-bind="text: selectedOptionValue"></td>
</tr>
<tr>
<td class="label">Multi-selected options:</td>
<td data-bind="text: multipleSelectedOptionValues"></td>
</tr>
<tr>
<td class="label">Radio button selection:</td>
<td data-bind="text: radioSelectedOptionValue"></td>
</tr>
</table>
<script>
var viewModel = {
stringValue: ko.observable("Hello"),
passwordValue: ko.observable("mypass"),
booleanValue: ko.observable(true),
optionValues: ["Alpha", "Beta", "Gamma"],
selectedOptionValue: ko.observable("Gamma"),
multipleSelectedOptionValues: ko.observable(["Alpha"]),
radioSelectedOptionValue: ko.observable("Beta")
};
ko.applyBindings(viewModel);
</script>
</div>
<h3>HTML controls</h3>
<table>
<tr>
<td class="label">Text value (updates on change):</td>
<td><input data-bind="value: stringValue" /></td>
</tr>
<tr>
<td class="label">Text value (updates on keystroke):</td>
<td><input data-bind='value: stringValue, valueUpdate: "afterkeydown"' /></td>
</tr>
<tr>
<td class="label">Text value (multi-line):</td>
<td><textarea data-bind="value: stringValue"> </textarea></td>
</tr>
<tr>
<td class="label">Password:</td>
<td><input type="password" data-bind="value: passwordValue" /></td>
</tr>
<tr>
<td class="label">Checkbox:</td>
<td><input type="checkbox" data-bind="checked: booleanValue" /></td>
</tr>
<tr>
<td class="label">Drop-down list:</td>
<td><select data-bind="options: optionValues, value: selectedOptionValue"></select></td>
</tr>
<tr>
<td class="label">Multi-select drop-down list:</td>
<td><select multiple="multiple" data-bind="options: optionValues, selectedOptions: multipleSelectedOptionValues"></select></td>
</tr>
<tr>
<td class="label">Radio buttons:</td>
<td>
<label><input type="radio" value="Alpha" data-bind="checked: radioSelectedOptionValue" />Alpha</label>
<label><input type="radio" value="Beta" data-bind="checked: radioSelectedOptionValue" />Beta</label>
<label><input type="radio" value="Gamma" data-bind="checked: radioSelectedOptionValue" />Gamma</label>
</td>
</tr>
</table>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<script>
var viewModel = {
stringValue: ko.observable("Hello"),
passwordValue: ko.observable("mypass"),
booleanValue: ko.observable(true),
optionValues: ["Alpha", "Beta", "Gamma"],
selectedOptionValue: ko.observable("Gamma"),
multipleSelectedOptionValues: ko.observable(["Alpha"]),
radioSelectedOptionValue: ko.observable("Beta")
};
ko.applyBindings(viewModel);
</script>
</div>
</div>
<!-- ...................................................................Tab2............................................................................... -->
<div class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab2'">
<p></p>
</div>
<!-- ...................................................................Tab3............................................................................... -->
<div class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab3'">
<p></p>
</div>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<script>
var TabViewModel = function(){
var self = this;
//Set href value of element
self.selected = ko.observable(null);
//initial set to show first tabpanel when loading page
self.init = ko.observable(1);
//Get href value og element
self.getHref = function(){
var target;
var element = event.target.hash;
target = element.substr(1);
return target;
};
//Show Tabpanel
self.showBlock = function(){
var target = self.getHref();
self.selected(target);
self.init(2);
};
};
ko.applyBindings(new TabViewModel());
</script>
</div>
{% endblock %}
</body>
</html>
Tags： textdivdatavaluebindtypescriptajax
热门问题
- 为什么我的神经网络模型的准确性不能在这个训练集上得到提高？
- 为什么我的神经网络模型的权重变化不大？
- 为什么我的神经网络的成本不断增加？
- 为什么我的神经网络的输入pickle文件是19GB？
- 为什么我的神经网络给属性错误？“非类型”对象没有属性“形状”
- 为什么我的神经网络训练这么慢？
- 为什么我的神经网络输出错误？
- 为什么我的神经网络预测适用于MNIST手绘图像时是正确的，而适用于我自己的手绘图像时是不正确的？
- 为什么我的神经网络验证精度比我的训练精度高，而且它们都是常数？
- 为什么我的私人用户间聊天会显示在其他用户的聊天档案中？
- 为什么我的积分的绝对误差估计值大于积分（使用scipy.integrate.nqad）？
- 为什么我的积层回归器得分比它的组件差？
- 为什么我的移动方法不起作用？
- 为什么我的稀疏张量不能转换成张量
- 为什么我的稀疏张量不能转换成张量？
- 为什么我的程序“停止”了？
- 为什么我的程序一直试图占用所有可用的CPU
- 为什么我的程序不使用指定的代理
- 为什么我的程序不工作（python帮助中的反向函数）？
- 为什么我的程序不工作时，我使用多处理模块
热门文章
- Python覆盖写入文件
- 怎样创建一个 Python 列表？
- Python3 List append()方法使用
- 派森语言
- Python List pop()方法
- Python Django Web典型模块开发实战
- Python input() 函数
- Python3 列表(list) clear()方法
- Python游戏编程入门
- 如何创建一个空的set?
- python如何定义(创建)一个字符串
- Python标准库 [The Python Standard Library by Ex
- Python网络数据爬取及分析从入门到精通（分析篇）
- Python3 for 循环语句
- Python List insert() 方法
- Python 字典(Dictionary) update()方法
- Python编程无师自通 专业程序员的养成
- Python3 List count()方法
- Python 网络爬虫实战 [Web Crawler With Python]
- Python Cookbook（第2版）中文版
目前没有回答
相关问题 更多 >
编程相关推荐