"
" +
" ${checkable}${header}"+
"
"+" ${checkable}${header}"+
"
" "+
"
Semantic-ui: Can be encapsulated into a JS object?(可以封装成JS对象吗?)
Semantic-UI Is a number of HTML and CSS styles,This will increase the amount of code, if it can be packaged into a pile of JS objects so it will be very popular with everyone, I am currently packaged in it.
(
Semantic-UI 目前是一堆的html和css如果可以将其封装成JS对象,搭配好的在线设计器那么Semantic-UI
将是非常强大的,目前我正在封装成JS不知道Semantic-UI是否也愿意将其封装成对象控件
)
A little proposal ,I am sorry ! My English is very poor.
jhoneybee
All 11 comments
Semantic UI 預設就有支援 JS，這個問題有點不太具體令人不太清楚。
讓我們以 Accordion 來說，其中的 Usage 分頁就有封裝成 JS 元件。
YamiOdymel
on 9 Jan 2017
我是想封裝成JS純對象的操作方式,比如佈局使用容器佈局方式,讓前端裏面出現的只是JS代碼!封裝的類似extjs這種控件,那樣操作起來會非常友好方便,這個只是我個人的意見,我覺得MVVM的方式不如JS對象化的操作好!
封裝成一套的控件,從佈局到元件這樣Semantic-UI會更加強大.這是我個人的意見!
不過在白忙中能會我的消息,我感到非常高興,謝謝!
Thank you ! @YamiOdymel
Semantic UI 直接封裝成一套JS的控件庫,佈局->組件->皮膚
jhoneybee
on 9 Jan 2017
我是想封裝成JS純對象的操作方式,比如佈局使用容器佈局方式,讓前端裏面出現的只是JS代碼!封裝的類似extjs這種控件,那樣操作起來會非常友好方便,這個只是我個人的意見,我覺得MVVM的方式不如JS對象化的操作好!
I want to package JS into pure object operation, such as the layout of container layout, let the front inside there is only a JS code! Similar to the extjs control package, so the operation will be very friendly and convenient, this is just my personal opinion, I think MVVM is not the way of the good operation of the JS object!
封裝成一套的控件,從佈局到元件這樣Semantic-UI會更加強大.這是我個人的意見!
Packaging into a set of controls, from the layout to the component so that Semantic-UI will be more powerful!
不過在白忙中能會我的消息,我感到非常高興,謝謝!
But I'm very happy to be able to hear from you!
Thank you ! @YamiOdymel
You @YamiOdymel! Thank!
Semantic UI 直接封裝成一套JS的控件庫,佈局->組件->皮膚
The Semantic UI package into a JS control library, component layout - > - > skin
jhoneybee
on 9 Jan 2017
比如我創建一個Tree的表格我只需要引入
(function(){
"use strict";
var _width=$namespace("width");
var _tree=$namespace("width.tree");
/*
* tree.Node对象,是Tree的节点信息
* attr
* header 当前节点的标题名称
* iconClass 当前节点的图标
* children 当前节点下所有子节点对象(只读属性)
* tree 当前节点所属Tree树
* checkable 是否显示选择框
* checked 选择框是否被选中
* eve
* onCreate 当节点创建后的执行的事件
*/
_tree.Node=function(_conf){
var self=this;
var dom =""+
"" +";
" "+
" " +"+
"
" "+
"
"
var attr={
"id":window.$GetId(),
"dom":dom,
"header":_conf.header || "",
"iconClass":_conf.iconClass ||"folder icon",
"parent":"",
"userData":_conf.userData || null,
"checkable":_conf.checkable || false,
"checked": _conf.checked || false,
"children":[],
"$type":"tree.Node",
};
var checkable="";
if(attr.checkable){
checkable="" +
""+";
"
" "+
"
}
var bool =false;
var eve={
onCreate:function(){
var oc=_conf.onCreate || function(){};
oc();
$("#"+attr.id+"_header").mouseover(function(){
if($(this).css("background-color")!="rgb(224, 224, 224)"){
$(this).css("background-color","rgb(236, 237, 238)");
}
});
$("#"+attr.id+"_header").mouseout(function(){
if($(this).css("background-color")=="rgb(236, 237, 238)"){
$(this).css("background-color","");
}
});
$("#"+attr.id).find(":checkbox").click(function(){
var bool =$(this).prop("checked");
attr.tree.fireEvent("onSelectionChange",attr.tree,{
checked:bool,
node:self
}
);
attr.checked=bool;
});
if(attr.checked){
$("#"+attr.id+"_header").find(":checkbox").attr("checked",true);
}else{
$("#"+attr.id+"_header").find(":checkbox").removeAttr("checked");
}
$("#"+attr.id+"_header").click(function(){
attr.tree.set("currentNode",self);
$("._background").css("background-color","");
$(this).css("background-color","rgb(224, 224, 224)");
});
$("#"+attr.id+"_open_icon").click(function(){
if(bool==false){
self.expand();
}else{
self.collapse();
}
});
},
};
attr.dom=window.$StringUtils.format(attr.dom,{
id:attr.id,
iconClass:attr.iconClass,
header:attr.header,
checkable:checkable
});
this.get=function(k){
return attr[k];
}
this.set=function(k,v){
attr[k]=v;
if(k=="checked"){
if(v==true){
$("#"+attr.id+"_header").find(":checkbox").attr("checked",true);
}else{
$("#"+attr.id+"_header").find(":checkbox").removeAttr("checked");
}
}
}
this.getDom=function(){
return attr.dom;
}
this.expand=function(){
$("#"+attr.id+"_children").show();
$("#"+attr.id+"_open_icon").removeClass();
$("#"+attr.id+"_open_icon").addClass("caret down icon");
bool=true;
}
this.collapse=function(){
$("#"+attr.id+"_children").hide();
$("#"+attr.id+"_open_icon").removeClass();
$("#"+attr.id+"_open_icon").addClass("right triangle icon");
bool=false;
}
/*
* 追加子节点对象
/
this.appendNode=function(node){
if(window.$CHECK.isContainer(node) && node.get("$type")=="tree.Node" ){
$("#"+attr.id+"_children").append(node.getDom());
node.set("parent",self);
node.set("tree",self.get("tree"));
node.fireEvent("onCreate");
attr.children.push(node);
$("#"+attr.id+"_open_icon").css("visibility","");
return true;
}else{
var error =new Error("要添加的不是一个有效的tree.Node对象!");
window.$Exception.push("添加Node组件失败",error);
return false;
}
}
/**
* 删除所有节点对象
*/
this.cleanNodes=function(){
for(var i=0;i
$("#"+node.get("id")).remove();
}
attr.children=[];
}
this.remove=function(){
$("#"+self.get("id")).remove();
var parent=attr.get("parent");
var array =new Array();
for(var i=0;i
array.push(parent.children[i]);
}
}
parent.set("children",array);
}
this.fireEvent=function(fnEName,self,arg){
return evefnEName;
}
}
/**
* Tree树形菜单
* attr
* children Tree树下面的所有子节点
* selection 当前Tree树下选择的节点对象
* currentNode 当前点击的节点
* eve
* onSelectionChange 当选择框发生改变时触发的事件
* -self 当前组件对象
* -arg
* .checked 当前选择框的状态
* .node 当前选择的节点对象
*/
_width.Tree=function(_conf){
var self=this;
var dom="" +
"<div id='${id}' class='ui relaxed divided list' >"+
"</div>";
var attr={
"id":window.$GetId(),
"dom":dom,
"children":[],
"height": 0,
"selection":[],
"currentNode":null
};
var eve={
onCreate:function(){
var height=attr.parent.get("height")-16;
$("#"+attr.id).height(height);
attr.height=height;
if(attr.parent.get("$type")=="SplitPanel"){
if(attr.parent.get("sideControl").get("id")==self.get("id")){
$("#"+attr.id).width(attr.parent.get("sideControlWidth"));
}else if(attr.parent.get("mainControl").get("id")==self.get("id")){
$("#"+attr.id).width(attr.parent.get("mainControlWidth"));
}
}else{
$("#"+attr.id).width(attr.parent.get("width"));
}
var oc=_conf.onCreate || function(){};
oc();
},
privateOnChangeSize:function(self,arg){
var height=attr.parent.get("height")-16;
$("#"+attr.id).height(height);
attr.height=height;
if(attr.parent.get("$type")=="SplitPanel"){
if(attr.parent.get("sideControl").get("id")==self.get("id")){
$("#"+attr.id).width(attr.parent.get("sideControlWidth")+2);
}else if(attr.parent.get("mainControl").get("id")==self.get("id")){
$("#"+attr.id).width(attr.parent.get("mainControlWidth")+2);
}
}else{
$("#"+attr.id).width(attr.parent.get("width"));
}
},
//当前子节点点击选择框触发的事件self,arg
onSelectionChange :function(self,arg){
var oc=_conf.onSelectionChange || function(){};
if(arg.checked){
attr.selection.push(arg.node);
}else{
var array =new Array();
for(var i=0;i<attr.selection.length;i++){
if(attr.selection[i].get("id")!=arg.node.get("id")){
array.push(attr.selection[i]);
}
}
attr.selection=array;
}
oc(self,arg);
}
};
attr.dom=window.$StringUtils.format(attr.dom,{
id:attr.id,
});
this.appendNode=function(node){
if(window.$CHECK.isContainer(node) && node.get("$type")=="tree.Node" ){
$("#"+attr.id).append(node.getDom());
node.set("parent",self);
node.set("tree",self);
node.fireEvent("onCreate");
attr.children.push(node);
return true;
}else{
var error =new Error("要添加的不是一个有效的tree.Node对象!");
window.$Exception.push("添加Node组件失败",error);
return false;
}
}
this.get=function(k){
return attr[k];
}
this.set=function(k,v){
attr[k]=v;
}
this.getDom=function(){
return attr.dom;
}
this.fireEvent=function(fnEName,self,arg){
return eve[fnEName](self,arg);
}
}
})();
var toolbar =new jerry.width.Menu({
items:[button]
});
var node=new jerry.width.tree.Node({
header:"系统管理",
});
var node1=new jerry.width.tree.Node({
header:"参数维护",
checkable:true
});
var node2=new jerry.width.tree.Node({
header:"参数维护",
checkable:true,
checked:false,
});
var node3=new jerry.width.tree.Node({
header:"参数维护",
checkable:true,
checked:false,
});
var node4=new jerry.width.tree.Node({
header:"参数维护",
checkable:true,
checked:false,
});
var node5=new jerry.width.tree.Node({
header:"参数维护",
checkable:true,
checked:false,
});
var node6=new jerry.width.tree.Node({
header:"参数维护",
checkable:true,
checked:false,
});
var node7=new jerry.width.tree.Node({
header:"参数维护",
checkable:true,
checked:false,
});
var tree =new jerry.width.Tree({
onSelectionChange:function(self,arg){
alert(arg.checked);
}
});
$(body).append(tree .getDom());
這樣就可以創建一個Tree樹的結構了,當然如果佈局容器都有的話直接可以容器套容器,這樣可以減少開發者百分之80以上甚至跟多的時間,Semantic-UI也會越來越受開發者喜愛
如果有容器嵌套可能就是這樣樣子的
var button =new jerry.width.menu.Item({
caption:"打造称心如意的物流 · Make Logistics Fit",
});
var toolbar =new jerry.width.Menu({
items:[button]
});
var node=new jerry.width.tree.Node({
header:"系统管理",
});
var node1=new jerry.width.tree.Node({
header:"参数维护",
checkable:true
});
var node2=new jerry.width.tree.Node({
header:"参数维护",
checkable:true,
checked:false,
});
var node3=new jerry.width.tree.Node({
header:"参数维护",
checkable:true,
checked:false,
});
var node4=new jerry.width.tree.Node({
header:"参数维护",
checkable:true,
checked:false,
});
var node5=new jerry.width.tree.Node({
header:"参数维护",
checkable:true,
checked:false,
});
var node6=new jerry.width.tree.Node({
header:"参数维护",
checkable:true,
checked:false,
});
var node7=new jerry.width.tree.Node({
header:"参数维护",
checkable:true,
checked:false,
});
var tree =new jerry.width.Tree({
onSelectionChange:function(self,arg){
alert(arg.checked);
}
});
var splitpanel =new jerry.width.SplitPanel({
"sideControl":tree,
"heightDeviation":40
});
var toolbar =new jerry.width.Menu({
items:[button]
});
var view =new jerry.width.View({
children:[toolbar,splitpanel]
});
debugger;
//view.append(splitpanel);
tree.appendNode(node);
node.appendNode(node1);
node1.appendNode(node2);
node2.appendNode(node3);
node3.appendNode(node4);
node4.appendNode(node5);
node5.appendNode(node6);
node6.appendNode(node7);
jhoneybee
on 9 Jan 2017
看起來像是把 HTML 放在一個函式內，然後重複利用這個函式，這樣久了會不易維護。只是稍微推薦一下也許你可以參考看看 Vue.js 或是 React.js。
<div class="ui segment">
{{ description }}
<button class="ui positive button" v-on:click="event()">
{{ text }}
</button>
</div>
這種寫法就會比較容易些，然後可以寫成元件供日後使用，稍微的建議而已，幫不上忙真是不好意思。
YamiOdymel
on 9 Jan 2017
@Zachary-Zaki
你这贴的代码的格式有点吊，就不打算格式化一下？
lc-soft
on 16 Jan 2017
@lc-soft 不太会md格式语法,写的不多 - - !!
jhoneybee
on 16 Jan 2017
Excuse me, guys, I’ve been reading through this, but was lost by the end of it. Can someone please give me a recap?
awgv
on 6 Feb 2017
@Banandrew
I also do not quite understand what he specifically wants.
lc-soft
on 6 Feb 2017
@lc-soft thank you. I’ll close this for now, maybe we’ll be able to return to it some time in the future.
awgv
on 8 Feb 2017
🎉2
👍2
@Banandrew
I use angular to solve the problem of componentization,
not familiar with general web solutions, so a wrong question was raised
jhoneybee
on 9 Apr 2019
👍1
Was this page helpful?
0 / 5 - 0 ratings
Related issues
arj-196
·
3Comments
batata004
·
3Comments
miguelmota
·
3Comments
vinhtq
·
3Comments
deneuxa
·
3Comments
Most helpful comment
@lc-soft thank you. I’ll close this for now, maybe we’ll be able to return to it some time in the future.