Can be encapsulated into a JS object?(可以封装成JS对象吗?) #4897

Open
Zachary-Zaki opened this Issue Jan 9, 2017 · 7 comments

Projects

None yet

3 participants

@Zachary-Zaki

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.

@YamiOdymel

Semantic UI 預設就有支援 JS,這個問題有點不太具體令人不太清楚。

screen shot 2017-01-10 at 12 46 50 am

讓我們以 Accordion 來說,其中的 Usage 分頁就有封裝成 JS 元件。

http://semantic-ui.com/modules/accordion.html#/usage

@Zachary-Zaki

我是想封裝成JS純對象的操作方式,比如佈局使用容器佈局方式,讓前端裏面出現的只是JS代碼!封裝的類似extjs這種控件,那樣操作起來會非常友好方便,這個只是我個人的意見,我覺得MVVM的方式不如JS對象化的操作好!
封裝成一套的控件,從佈局到元件這樣Semantic-UI會更加強大.這是我個人的意見!
不過在白忙中能會我的消息,我感到非常高興,謝謝!
Thank you ! @YamiOdymel
Semantic UI 直接封裝成一套JS的控件庫,佈局->組件->皮膚

@Zachary-Zaki

我是想封裝成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

@Zachary-Zaki
Zachary-Zaki commented Jan 9, 2017 edited

比如我創建一個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 =""+
"

" +
" "+
"
" +
"
" +
" ${checkable}${header}"+
"
"+
"
"+
"
"+
"
";
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<attr.children.length;i++){
var node =attr.children[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<parent.get("children").length;i++){
if(parent.children[i].get("id")!=self.get("id")){
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);

@YamiOdymel

看起來像是把 HTML 放在一個函式內,然後重複利用這個函式,這樣久了會不易維護。只是稍微推薦一下也許你可以參考看看 Vue.js 或是 React.js。

<div class="ui segment">
     {{ description }}
    <button class="ui positive button" v-on:click="event()">
        {{ text }}
    </button>
</div>

這種寫法就會比較容易些,然後可以寫成元件供日後使用,稍微的建議而已,幫不上忙真是不好意思。

@lc-soft
lc-soft commented Jan 16, 2017

@Zachary-Zaki

你这贴的代码的格式有点吊,就不打算格式化一下?

@Zachary-Zaki

@lc-soft 不太会md格式语法,写的不多 - - !!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment