Commit 4f8a98c8 authored by techird's avatar techird

social

parent c7471140
#social{position:absolute;right:10px;top:10px;line-height:20px;text-align:right;overflow:hidden}#social button,#social .kmui-btn{outline:none;display:inline-block;padding:0 15px;height:35px;font-size:13px;line-height:35px;text-align:center;border-radius:5px;color:#fff;text-decoration:none;border:none;margin-left:5px;cursor:pointer;background:#0099f2;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOTlmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDA5NmVlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNzZkZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);background:-moz-linear-gradient(top, #0099f2 0, #4096ee 0, #0076dd 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #0099f2), color-stop(0, #4096ee), color-stop(100%, #0076dd));background:-webkit-linear-gradient(top, #0099f2 0, #4096ee 0, #0076dd 100%);background:-o-linear-gradient(top, #0099f2 0, #4096ee 0, #0076dd 100%);background:-ms-linear-gradient(top, #0099f2 0, #4096ee 0, #0076dd 100%);background:linear-gradient(to bottom, #0099f2 0, #4096ee 0, #0076dd 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099f2', endColorstr='#0076dd', GradientType=0);}#social button:hover,#social .kmui-btn:hover{background:#009fff} #social{position:absolute;right:10px;top:10px;line-height:20px;text-align:right;overflow:hidden}#social button{outline:none;display:inline-block;padding:0 15px;height:35px;font-size:13px;line-height:35px;text-align:center;border-radius:5px;color:#fff;text-decoration:none;border:none;margin-left:5px;cursor:pointer;background:#0099f2;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOTlmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDA5NmVlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNzZkZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);background:-moz-linear-gradient(top, #0099f2 0, #4096ee 0, #0076dd 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #0099f2), color-stop(0, #4096ee), color-stop(100%, #0076dd));background:-webkit-linear-gradient(top, #0099f2 0, #4096ee 0, #0076dd 100%);background:-o-linear-gradient(top, #0099f2 0, #4096ee 0, #0076dd 100%);background:-ms-linear-gradient(top, #0099f2 0, #4096ee 0, #0076dd 100%);background:linear-gradient(to bottom, #0099f2 0, #4096ee 0, #0076dd 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099f2', endColorstr='#0076dd', GradientType=0);}#social button:hover{background:#009fff}
#social button[disabled],#social .kmui-btn[disabled]{background:#aaa} #social button[disabled]{background:#aaa}
#social button.baidu-cloud,#social .kmui-btn.baidu-cloud{padding-left:35px;position:relative}#social button.baidu-cloud:before,#social .kmui-btn.baidu-cloud:before{content:' ';display:block;width:24px;height:24px;background:url(../themes/default/images/baiducloud.png);position:absolute;left:7px;top:5px} #social button.baidu-cloud{padding-left:35px;position:relative}#social button.baidu-cloud:before{content:' ';display:block;width:24px;height:24px;background:url(../themes/default/images/baiducloud.png);position:absolute;left:7px;top:5px}
#social button.share,#social .kmui-btn.share{padding-left:35px;position:relative}#social button.share:before,#social .kmui-btn.share:before{content:' ';display:block;width:24px;height:24px;background:url(../themes/default/images/share.png) no-repeat;position:absolute;left:7px;top:5px} #social button.share{padding-left:35px;position:relative}#social button.share:before{content:' ';display:block;width:24px;height:24px;background:url(../themes/default/images/share.png) no-repeat;position:absolute;left:7px;top:5px}
#social button img,#social .kmui-btn img{position:relative;top:3px;border-radius:2px;margin-right:7px} #social button img{position:relative;top:3px;border-radius:2px;margin-right:7px}
#social button.user-file{padding-right:28px;position:relative}#social button.user-file:after{content:' ';display:block;position:absolute;right:10px;top:15px;width:0;height:0;border:solid;border-width:4px 5px;border-color:#fff transparent transparent transparent}
.user-file-menu{margin-top:20px;margin-left:1px}
This diff is collapsed.
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
line-height: 20px; line-height: 20px;
text-align: right; text-align: right;
overflow: hidden; overflow: hidden;
button, .kmui-btn { button {
outline: none; outline: none;
display: inline-block; display: inline-block;
padding: 0 15px; padding: 0 15px;
...@@ -72,5 +72,25 @@ ...@@ -72,5 +72,25 @@
border-radius: 2px; border-radius: 2px;
margin-right: 7px; margin-right: 7px;
} }
&.user-file {
padding-right: 28px;
position: relative;
&:after {
content: ' ';
display: block;
position: absolute;
right: 10px;
top: 15px;
width: 0;
height: 0;
border: solid;
border-width: 4px 5px;
border-color: #FFFFFF transparent transparent transparent;
}
}
} }
}
.user-file-menu {
margin-top: 20px;
margin-left: 1px;
} }
\ No newline at end of file
//dropmenu 类 //dropmenu 类
KM.ui.define('dropmenu', { KM.ui.define( 'dropmenu', {
tmpl: '<ul class="kmui-dropdown-menu" aria-labelledby="dropdownMenu" >' + tmpl: '<ul class="kmui-dropdown-menu" aria-labelledby="dropdownMenu" >' +
'<%if(data && data.length){for(var i=0,ci;ci=data[i++];){%>' + '<%if(data && data.length){for(var i=0,ci;ci=data[i++];){%>' +
'<%if(ci.divider){%><li class="kmui-divider"></li><%}else{%>' + '<%if(ci.divider){%><li class="kmui-divider"></li><%}else{%>' +
'<li <%if(ci.active||ci.disabled){%>class="<%= ci.active|| \'\' %> <%=ci.disabled||\'\' %>" <%}%> data-value="<%= ci.value%>" data-label="<%= ci.label%>">' + '<li <%if(ci.active||ci.disabled){%>class="<%= ci.active|| \'\' %> <%=ci.disabled||\'\' %>" <%}%> data-value="<%= ci.value%>" data-label="<%= ci.label%>">' +
'<a href="#" tabindex="-1"><em class="kmui-dropmenu-checkbox"><i class="kmui-icon-ok"></i></em><%= ci.label%></a>' + '<a href="#" tabindex="-1"><em class="kmui-dropmenu-checkbox"><i class="kmui-icon-ok"></i></em><%= ci.label%></a>' +
'</li><%}}%>' + '</li><%}}%>' +
'<%}%>'+ '<%}%>' +
'</ul>', '</ul>',
subTmpl:'<%if(data && data.length){for(var i=0,ci;ci=data[i++];){%>' + subTmpl: '<%if(data && data.length){for(var i=0,ci;ci=data[i++];){%>' +
'<%if(ci.divider){%><li class="kmui-divider"></li><%}else{%>' + '<%if(ci.divider){%><li class="kmui-divider"></li><%}else{%>' +
'<li <%if(ci.active||ci.disabled){%>class="<%= ci.active|| \'\' %> <%=ci.disabled||\'\' %>" <%}%> data-value="<%= ci.value%>" data-label="<%= ci.label%>">' + '<li <%if(ci.active||ci.disabled){%>class="<%= ci.active|| \'\' %> <%=ci.disabled||\'\' %>" <%}%> data-value="<%= ci.value%>" data-label="<%= ci.label%>">' +
'<a href="#" tabindex="-1"><em class="kmui-dropmenu-checkbox"><i class="kmui-icon-ok"></i></em><%= ci.label%></a>' + '<a href="#" tabindex="-1"><em class="kmui-dropmenu-checkbox"><i class="kmui-icon-ok"></i></em><%= ci.label%></a>' +
...@@ -16,32 +16,33 @@ KM.ui.define('dropmenu', { ...@@ -16,32 +16,33 @@ KM.ui.define('dropmenu', {
'<%}%>', '<%}%>',
defaultOpt: { defaultOpt: {
data: [], data: [],
click: function () { click: function () {}
}
}, },
setData:function(items){ setData: function ( items ) {
this.root().html($.parseTmpl(this.subTmpl,items)); this.root().html( $.parseTmpl( this.subTmpl, items ) );
return this; return this;
}, },
position:function(offset){ position: function ( offset ) {
this.root().css({ this.root().css( {
left:offset.x, left: offset.x,
top:offset.y top: offset.y
}); } );
return this; return this;
}, },
show:function(){ show: function () {
if(this.trigger('beforeshow') === false){ if ( this.trigger( 'beforeshow' ) === false ) {
return; return;
}else{ } else {
this.root().css({display:'block'}); this.root().css( {
this.trigger('aftershow'); display: 'block'
} } );
return this; this.trigger( 'aftershow' );
}
return this;
}, },
init: function (options) { init: function ( options ) {
var me = this; var me = this;
var eventName = { var eventName = {
click: 1, click: 1,
...@@ -49,63 +50,72 @@ KM.ui.define('dropmenu', { ...@@ -49,63 +50,72 @@ KM.ui.define('dropmenu', {
mouseout: 1 mouseout: 1
}; };
this.root($($.parseTmpl(this.tmpl, options))).on('click', 'li[class!="kmui-disabled kmui-divider kmui-dropdown-submenu"]',function (evt) { this.root( $( $.parseTmpl( this.tmpl, options ) ) ).on( 'click', 'li[class!="kmui-disabled kmui-divider kmui-dropdown-submenu"]', function ( evt ) {
$.proxy(options.click, me, evt, $(this).data('value'), $(this).data('label'),$(this))() $.proxy( options.click, me, evt, $( this ).data( 'value' ), $( this ).data( 'label' ), $( this ) )()
}).find('li').each(function (i, el) { } ).find( 'li' ).each( function ( i, el ) {
var $this = $(this); var $this = $( this );
if (!$this.hasClass("kmui-disabled kmui-divider kmui-dropdown-submenu")) { if ( !$this.hasClass( "kmui-disabled kmui-divider kmui-dropdown-submenu" ) ) {
var data = options.data[i]; var data = options.data[ i ];
$.each(eventName, function (k) { $.each( eventName, function ( k ) {
data[k] && $this[k](function (evt) { data[ k ] && $this[ k ]( function ( evt ) {
$.proxy(data[k], el)(evt, data, me.root) $.proxy( data[ k ], el )( evt, data, me.root )
}) } )
}) } )
} }
}) } )
}, },
disabled: function (cb) { disabled: function ( cb ) {
$('li[class!=kmui-divider]', this.root()).each(function () { $( 'li[class!=kmui-divider]', this.root() ).each( function () {
var $el = $(this); var $el = $( this );
if (cb === true) { if ( cb === true ) {
$el.addClass('kmui-disabled') $el.addClass( 'kmui-disabled' )
} else if ($.isFunction(cb)) { } else if ( $.isFunction( cb ) ) {
$el.toggleClass('kmui-disabled', cb(li)) $el.toggleClass( 'kmui-disabled', cb( li ) )
} else { } else {
$el.removeClass('kmui-disabled') $el.removeClass( 'kmui-disabled' )
} }
}); } );
}, },
val: function (val) { val: function ( val ) {
var currentVal; var currentVal;
$('li[class!="kmui-divider kmui-disabled kmui-dropdown-submenu"]', this.root()).each(function () { $( 'li[class!="kmui-divider kmui-disabled kmui-dropdown-submenu"]', this.root() ).each( function () {
var $el = $(this); var $el = $( this );
if (val === undefined) { if ( val === undefined ) {
if ($el.find('em.kmui-dropmenu-checked').length) { if ( $el.find( 'em.kmui-dropmenu-checked' ).length ) {
currentVal = $el.data('value'); currentVal = $el.data( 'value' );
return false return false
} }
} else { } else {
$el.find('em').toggleClass('kmui-dropmenu-checked', $el.data('value') == val) $el.find( 'em' ).toggleClass( 'kmui-dropmenu-checked', $el.data( 'value' ) == val )
} }
}); } );
if (val === undefined) { if ( val === undefined ) {
return currentVal return currentVal
} }
}, },
addSubmenu: function (label, menu, index) { appendItem: function ( item ) {
var itemTpl = '<%if(item.divider){%><li class="kmui-divider"></li><%}else{%>' +
'<li <%if(item.active||item.disabled){%>class="<%= item.active|| \'\' %> <%=item.disabled||\'\' %>" <%}%> data-value="<%= item.value%>" data-label="<%= item.label%>">' +
'<a href="#" tabindex="-1"><em class="kmui-dropmenu-checkbox"><i class="kmui-icon-ok"></i></em><%= item.label%></a>' +
'</li><%}%>';
var html = $.parseTmpl( itemTpl, item );
var $item = $( html ).click( item.click );
this.root().append( $item );
},
addSubmenu: function ( label, menu, index ) {
index = index || 0; index = index || 0;
var $list = $('li[class!=kmui-divider]', this.root()); var $list = $( 'li[class!=kmui-divider]', this.root() );
var $node = $('<li class="kmui-dropdown-submenu"><a tabindex="-1" href="#">' + label + '</a></li>').append(menu); var $node = $( '<li class="kmui-dropdown-submenu"><a tabindex="-1" href="#">' + label + '</a></li>' ).append( menu );
if (index >= 0 && index < $list.length) { if ( index >= 0 && index < $list.length ) {
$node.insertBefore($list[index]); $node.insertBefore( $list[ index ] );
} else if (index < 0) { } else if ( index < 0 ) {
$node.insertBefore($list[0]); $node.insertBefore( $list[ 0 ] );
} else if (index >= $list.length) { } else if ( index >= $list.length ) {
$node.appendTo($list); $node.appendTo( $list );
} }
} }
}, 'menu'); }, 'menu' );
\ No newline at end of file \ No newline at end of file
...@@ -31,7 +31,7 @@ KM.ui.define('menu',{ ...@@ -31,7 +31,7 @@ KM.ui.define('menu',{
var me = this; var me = this;
if(!$obj.data('$mergeObj')){ if(!$obj.data('$mergeObj')){
$obj.data('$mergeObj',me.root()); $obj.data('$mergeObj',me.root());
if($obj.kmui().wrapclick){ if($obj.kmui()){
$obj.on('wrapclick',function(evt){ $obj.on('wrapclick',function(evt){
me.supper.show.call(me,$obj,'','offset',15) me.supper.show.call(me,$obj,'','offset',15)
}); });
......
...@@ -20,11 +20,12 @@ ...@@ -20,11 +20,12 @@
.kmui-dropdown-menu .kmui-divider { .kmui-dropdown-menu .kmui-divider {
height: 1px; height: 1px;
margin: 9px 0; margin: 5px 0;
overflow: hidden; overflow: hidden;
background-color: #e5e5e5; background-color: #e5e5e5;
} }
.kmui-dropdown-menu .kmui-divider:first-child { .kmui-dropdown-menu .kmui-divider:first-child,
.kmui-dropdown-menu .kmui-divider:last-child {
display: none; display: none;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment