0
我想上的按鈕點擊執行動態綁定操作和複選框蜱一起以反映在一流的成果(名結果,箱集裝箱)事件enyo處理的js
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://enyojs.com/enyo-2.0b/enyo.js"></script>
<script src="enyo-master/enyo.js"></script>
<link rel=stylesheet href="http://enyojs.com/enyo-2.0b/enyo.css>
<link rel="stylesheet" href="button_enyo.css">
<link rel="stylesheet" href="checkbox-sample.css">
<link rel="stylesheet" href="connect .css">
/*connect.css*/
.connect .heading1{
padding-left: 450px;
color: #3BAAFF;
text-transform: uppercase;
font-weight: bolder;
margin-bottom: 31px;
font-size: 31px;
}
.connect .heading2{
\t padding-left : 512px;
\t color: #5ED4FF;
\t text-transform: uppercase;
\t font-weight: bold;
\t position: absolute;
}
.connect .results {
\t
\t padding: 20px;
\t min-height: 24px;
\t border-radius: 10px;
\t color: #FFF;
\t background-color: #555;
\t display : inline-block;
\t width: 786px;
\t
\t position : relative;
\t left: 134px;
}
/*button_enyo.css*/
.button-sample {
\t
\t padding: 0 20px;
\t font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
\t font-size: 16px;
\t margin-top: 85px;
margin-left: 105px;
\t
\t
}
.button-sample .section {
\t padding-top: 20px;
\t color: #F49200;
\t text-transform: uppercase;
\t font-weight: bold;
\t margin-bottom: 8px;
}
.button-sample button {
\t margin: 10px;
}
.button-sample .results {
\t margin: 20px 0;
\t padding: 20px;
\t min-height: 24px;
\t border-radius: 10px;
\t color: #FFF;
\t background-color: #555;
}
.button-sample .image-button {
\t width: 200px;
\t height: 100px;
}
/*checkbox-sample.css*/
.checkbox-sample {
\t padding: 0 20px;
\t font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
\t font-size: 16px;
\t margin-top: 85px;
margin-left: 105px;
}
.checkbox-sample .section {
\t padding-top: 20px;
\t color: #F49200;
\t text-transform: uppercase;
\t font-weight: bold;
\t margin-bottom: 8px;
\t /*position : absolute;*/
}
.checkbox-sample .enyo-checkbox {
\t margin: 10px;
}
.checkbox-sample .results {
\t margin: 20px 0;
\t padding: 20px;
\t min-height: 24px;
\t border-radius: 10px;
\t color: #FFF;
\t background-color: #555;
\t
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Connect 2015</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel=stylesheet href="http://enyojs.com/enyo-2.0b/enyo.css">
<link rel="stylesheet" href="button_enyo.css">
<link rel="stylesheet" href="checkbox-sample.css">
<link rel="stylesheet" href="connect .css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script src="http://enyojs.com/enyo-2.0b/enyo.js"></script>
<script src="enyo-master/enyo.js"></script>
<script>
enyo.kind({
\t name: "enyo.sample.ButtonSample",
\t classes: "button-sample",
\t components: [
\t \t {content: "Buttons", classes: "section"},
\t \t {kind: "enyo.Button", content: "Action Button", ontap: "buttonToggleTapped"},
\t \t {kind: "enyo.Button", name: "toggleButton", disabled: true, content: "Disabled Button", ontap: "buttonTapped"},
\t \t {content: "Grouped Buttons", classes: "section"},
\t \t {kind: "enyo.Group", onActivate: "groupButtonsActivated", components: [
\t \t \t {kind: "enyo.Button", content: "Grouped Button 1"},
\t \t \t {kind: "enyo.Button", content: "Grouped Button 2"},
\t \t \t {kind: "enyo.Button", content: "Grouped Button 3"}
\t \t ]},
\t \t {content: "Image Button", classes: "section"},
\t \t {kind: "enyo.Button", content: "Image Button", classes: "image-button", ontap: "buttonTapped", components: [
\t \t \t {kind: "enyo.Image", src: "http://enyojs.com/img/enyo-logo.png", alt: "Enyo Logo"}
\t \t //]},
\t \t ]}
\t \t //{name: "results", classes: "results"}
\t \t ],
\t \t
\t \t
\t buttonTapped: function(inSender, inEvent) {
\t \t //this.updateResult({content: "The \"" + inSender.getContent() + "\" button is tapped."});
\t \t this.on("updateResult", {content: "The \"" + inSender.getContent() + "\" button is tapped."});
\t },
\t buttonToggleTapped: function(inSender, inEvent) {
\t \t this.buttonTapped(inSender, inEvent);
\t \t this.$.toggleButton.setDisabled(!this.$.toggleButton.getDisabled()).setContent(this.$.toggleButton.getDisabled() ? "Disabled Button" : "Enabled Button");
\t },
\t groupButtonsActivated: function(inSender, inEvent) {
\t \t if (inEvent.originator.getParent().getActive()) {
\t \t \t this.updateResult({content: "The \"" + inEvent.originator.getParent().getActive().getContent() + "\" button is selected."});
\t \t }
\t //},
\t },
\t updateResult: function(inComponent) {
\t \t this.$.results.destroyClientControls();
\t \t this.$.results.createComponent(inComponent);
\t \t this.$.results.render();
\t }
}); \t
\t
\t
\t enyo.kind({
\t name: "enyo.sample.CheckboxSample",
\t classes: "checkbox-sample",
\t components: [
\t {content: "Checkboxes", classes: "section"},
\t \t {kind: "enyo.Checkbox", content: "Checkbox 1", onchange: "checkboxChanged"},
\t \t {kind: "enyo.Checkbox", content: "Checkbox 2", onchange: "checkboxChanged"},
\t \t {kind: "enyo.Checkbox", content: "Checkbox 3", onchange: "checkboxChanged"},
\t \t {content: "Grouped Checkboxes", classes: "section"},
\t \t {kind: "enyo.Group", onActivate: "groupActivated", components: [
\t \t \t {kind: "enyo.Checkbox", content: "Grouped Checkbox 1"},
\t \t \t {kind: "enyo.Checkbox", content: "Grouped Checkbox 2"},
\t \t \t {kind: "enyo.Checkbox", content: "Grouped Checkbox 3"}
\t \t //]},
\t ]}
\t \t //{name: "results", classes: "results"}
\t //],
\t ],
\t checkboxChanged: function(inSender, inEvent) {
\t \t this.updateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is " + (inSender.getChecked() ? "checked": "unchecked") + "."});
\t },
\t groupActivated: function(inSender, inEvent) {
\t \t if (inEvent.originator.getActive()) {
\t \t \t this.updateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is selected."});
\t \t }
\t //},
\t }
\t
\t
});
//new enyo.sample.ButtonSample().renderInto(document.body);
enyo.kind({
name: "connect",
classes: "connect ",
components: [
{ content : "CONNECT Signup 2015", classes : "heading1"},
//{ content : "Please signup for Connect", classes : "heading2"},
{name: "results", classes: "results"},
{ kind: "enyo.sample.ButtonSample" },
{ kind: "enyo.sample.CheckboxSample" },
// ]
],
\t
});
new connect().renderInto(document.body);
</script>
</body>
</html>
我想上的按鈕點擊執行動態綁定操作和複選框蜱一起以反映在一流的成果(名結果,箱集裝箱)的
在按鈕的點擊聲明1,顯示器應該是button1被點擊, 點擊其他按鈕,顯示器應該被點擊; 對於複選框,我還必須將觸發的動作顯示組合到該stae-result結果框中。在複選框的點擊檢查時,點擊複選框1,即在刪除按鈕動作之後應該顯示該複選框。
一個動作顯示結果在一個時間組合兩種按鈕和複選框。
編輯您的問題以刪除註釋掉的代碼塊是值得的,因爲它會讓別人更容易幫助您。 –
@Wai我已刪除不必要的評論。任何人請建議 –
你犯了幾個錯誤,使用一些解決方法,預期的結果可以實現,但最重要的是你的代碼根本不是結構化的,因爲你使用'this。$。'調用了兄弟組件的方法在理想情況下,事件可能會更有用的將結果數據傳遞到兄弟組件..我會很快發佈工作代碼.. –