12 changed files with 33 additions and 322 deletions
@ -1,46 +0,0 @@ |
|||||
/* Author: Asif Mughal |
|
||||
* URL: https://www.codehim.com
|
|
||||
* License: MIT License |
|
||||
* Copyright (c) 2018 - Asif Mughal |
|
||||
*/ |
|
||||
/* File: demo-only.js */ |
|
||||
$(function () { |
|
||||
/* Demo only */ |
|
||||
var jSide = $(".menu-container, .menu-head, .menubar"); |
|
||||
$(".menu-position").on('change', function () { |
|
||||
$(jSide).not(".menubar").addClass($(this).val()); |
|
||||
$(".j-pos").html('jSidePosition: "position-right",'); |
|
||||
if ($(this).val() == 'position-left') { |
|
||||
$(jSide).removeClass("position-right"); |
|
||||
$(".j-pos").html('jSidePosition: "position-left",'); |
|
||||
$(".menu-trigger").removeClass("right").addClass("left"); |
|
||||
} else { |
|
||||
$(jSide).removeClass("position-left"); |
|
||||
$(".menu-trigger").removeClass("left").addClass("right"); |
|
||||
} |
|
||||
}); |
|
||||
$(".bg-color").on('change', function () { |
|
||||
var color = $(this).val(); |
|
||||
$(jSide).css({'background': color,}); |
|
||||
$(".bg-color-input").val(color); |
|
||||
}); |
|
||||
$(".bg-color-input").on('input', function () { |
|
||||
$(jSide).css({'background': $(this).val(),}); |
|
||||
}); |
|
||||
$("#set-top").change(function () { |
|
||||
$(".menubar").addClass("sticky"); |
|
||||
$(".j-sticky").html("jSideSticky: true,"); |
|
||||
}); |
|
||||
$("#set-st").change(function () { |
|
||||
$(".menubar").removeClass("sticky"); |
|
||||
$(".j-sticky").html("jSideSticky: false,"); |
|
||||
}); |
|
||||
$(".theme-tray span").click(function () { |
|
||||
var skin = $(this).attr("class"); |
|
||||
$(".menubar").attr('class', skin).addClass("menubar sticky"); |
|
||||
$(".menu-container").attr('class', skin).addClass("menu-container position-left"); |
|
||||
$(".menu-head").attr('class', skin).addClass("menu-head position-left"); |
|
||||
var newcode = 'jSideSkin:' + '\"' + skin + '\",'; |
|
||||
$(".j-skin").html(newcode); |
|
||||
}); |
|
||||
}); |
|
||||
@ -1,107 +0,0 @@ |
|||||
/* Plugin: jSide Menu (Responsive Side Menu) |
|
||||
* Frameworks: jQuery 3.3.1 & Material Design Iconic Font 2.0 |
|
||||
* Author: Asif Mughal |
|
||||
* GitHub: https://github.com/CodeHimBlog
|
|
||||
* URL: https://www.codehim.com
|
|
||||
* License: MIT License |
|
||||
* Copyright (c) 2018 - Asif Mughal |
|
||||
*/ |
|
||||
/* File: jquery.jside.menu.js */ |
|
||||
(function ($) { |
|
||||
$.fn.jSideMenu = function (options) { |
|
||||
var setting = $.extend({ |
|
||||
jSidePosition: "position-left", //possible options position-left or position-right
|
|
||||
jSideSticky: true, // menubar will be fixed on top, false to set static
|
|
||||
jSideSkin: "default-skin", // to apply custom skin, just put its name in this string
|
|
||||
|
|
||||
}, options); |
|
||||
|
|
||||
return this.each(function () { |
|
||||
var target, $headHeight, |
|
||||
$devHeight, |
|
||||
jSide, |
|
||||
arrow, |
|
||||
dimBackground; |
|
||||
target = $(this); |
|
||||
|
|
||||
/* Accessing DOM */ |
|
||||
jSide = $(".menu-container, .menu-head"); |
|
||||
$devHeight = $(window).height(); |
|
||||
$headHeight = $(".menu-head").height(); |
|
||||
arrow = document.createElement("i"); |
|
||||
dimBackground = $(".dim-overlay"); |
|
||||
// Set the height of side menu according to the available height of device
|
|
||||
$(target).css({ |
|
||||
'height': $devHeight - $headHeight, |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
if (setting.jSideSticky == true) { |
|
||||
$(".menubar").addClass("sticky"); |
|
||||
} else { |
|
||||
$(".menubar").removeClass("sticky"); |
|
||||
} |
|
||||
|
|
||||
$(".menubar").addClass(setting.jSideSkin); |
|
||||
$(jSide).addClass(setting.jSideSkin).addClass(setting.jSidePosition); |
|
||||
|
|
||||
if ($(jSide).hasClass("position-left")) { |
|
||||
$(".menu-trigger").addClass("left").removeClass("right"); |
|
||||
} else { |
|
||||
$(".menu-trigger").removeClass("left").addClass("right"); |
|
||||
} |
|
||||
|
|
||||
//Dropdown Arrow
|
|
||||
$(arrow).addClass("zmdi zmdi-chevron-down arrow").appendTo(".dropdown-heading"); |
|
||||
|
|
||||
//Dropdowns
|
|
||||
$(".dropdown-heading").click(function () { |
|
||||
var n = $(".has-sub").find("span:hover + ul li").length; |
|
||||
var h = $(".has-sub").find("span:hover + ul li").outerHeight(); |
|
||||
var dropdown = h * n; |
|
||||
var todrop = $(".has-sub").find("span:hover + ul"); |
|
||||
var nodrop = $(".has-sub ul"); |
|
||||
|
|
||||
$(todrop).animate({"height": dropdown}, 100); |
|
||||
$(this).find("i").toggleClass("arrowdown"); |
|
||||
if ($(todrop).height() == dropdown) { |
|
||||
$(todrop).animate({"height": 0}, 100); |
|
||||
} |
|
||||
|
|
||||
if ($(nodrop).height(dropdown)) { |
|
||||
$(nodrop).not(todrop).height(0); |
|
||||
$(".dropdown-heading").not(this).find("i").removeClass("arrowdown"); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
$(".menu-trigger").click(function () { |
|
||||
$(jSide).toggleClass("open"); |
|
||||
$(dimBackground).show(500); |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
//close menu if user click outside of it
|
|
||||
$(window).click(function (e) { |
|
||||
if ($(e.target).closest('.menu-trigger').length) { |
|
||||
return; |
|
||||
} |
|
||||
if ($(e.target).closest(jSide).length) { |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
$(jSide).removeClass("open"); |
|
||||
if (!$(jSide).hasClass("open")) { |
|
||||
$(dimBackground).hide(500); |
|
||||
} |
|
||||
}); |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
})(jQuery); |
|
||||
/* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF |
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND |
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE |
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION |
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION |
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ |
|
||||
File diff suppressed because one or more lines are too long
@ -1,119 +0,0 @@ |
|||||
function DragImgUpload(id,options) { |
|
||||
this.me = $(id); |
|
||||
var defaultOpt = { |
|
||||
boxWidth:'120px', |
|
||||
boxHeight:'auto' |
|
||||
} |
|
||||
this.preview = $('<div id="preview"><img src="/static/img/upload.png" class="img-responsive" style="width: 100%;height: auto;" alt="" title=""> </div>'); |
|
||||
this.opts=$.extend(true, defaultOpt,{ |
|
||||
}, options); |
|
||||
this.init(); |
|
||||
this.callback = this.opts.callback; |
|
||||
} |
|
||||
|
|
||||
//定义原型方法
|
|
||||
DragImgUpload.prototype = { |
|
||||
init:function () { |
|
||||
this.me.append(this.preview); |
|
||||
this.me.append(this.fileupload); |
|
||||
this.cssInit(); |
|
||||
this.eventClickInit(); |
|
||||
}, |
|
||||
cssInit:function () { |
|
||||
this.me.css({ |
|
||||
'width':this.opts.boxWidth, |
|
||||
'height':this.opts.boxHeight, |
|
||||
'border':'1px solid #cccccc', |
|
||||
'padding':'10px', |
|
||||
'cursor':'pointer' |
|
||||
}) |
|
||||
this.preview.css({ |
|
||||
'height':'100%', |
|
||||
'overflow':'hidden' |
|
||||
}) |
|
||||
|
|
||||
}, |
|
||||
onDragover:function (e) { |
|
||||
e.stopPropagation(); |
|
||||
e.preventDefault(); |
|
||||
e.dataTransfer.dropEffect = 'copy'; |
|
||||
}, |
|
||||
onDrop:function (e) { |
|
||||
var self = this; |
|
||||
e.stopPropagation(); |
|
||||
e.preventDefault(); |
|
||||
var fileList = e.dataTransfer.files; //获取文件对象
|
|
||||
// do something upload
|
|
||||
if(fileList.length == 0){ |
|
||||
return false; |
|
||||
} |
|
||||
//检测文件是不是图片
|
|
||||
if(fileList[0].type.indexOf('image') === -1){ |
|
||||
alert("您拖的不是图片！"); |
|
||||
return false; |
|
||||
} |
|
||||
|
|
||||
//拖拉图片到浏览器，可以实现预览功能
|
|
||||
var img = window.URL.createObjectURL(fileList[0]); |
|
||||
var filename = fileList[0].name; //图片名称
|
|
||||
var filesize = Math.floor((fileList[0].size)/1024); |
|
||||
if(filesize>500){ |
|
||||
alert("上传大小不能超过500K."); |
|
||||
return false; |
|
||||
} |
|
||||
|
|
||||
self.me.find("img").attr("src",img); |
|
||||
self.me.find("img").attr("title",filename); |
|
||||
if(this.callback){ |
|
||||
this.callback(fileList); |
|
||||
} |
|
||||
}, |
|
||||
eventClickInit:function () { |
|
||||
var self = this; |
|
||||
this.me.unbind().click(function () { |
|
||||
self.createImageUploadDialog(); |
|
||||
}) |
|
||||
var dp = this.me[0]; |
|
||||
dp.addEventListener('dragover', function(e) { |
|
||||
self.onDragover(e); |
|
||||
}); |
|
||||
dp.addEventListener("drop", function(e) { |
|
||||
self.onDrop(e); |
|
||||
}); |
|
||||
|
|
||||
|
|
||||
}, |
|
||||
onChangeUploadFile:function () { |
|
||||
var fileInput = this.fileInput; |
|
||||
var files = fileInput.files; |
|
||||
var file = files[0]; |
|
||||
var img = window.URL.createObjectURL(file); |
|
||||
var filename = file.name; |
|
||||
this.me.find("img").attr("src",img); |
|
||||
this.me.find("img").attr("title",filename); |
|
||||
if(this.callback){ |
|
||||
this.callback(files); |
|
||||
} |
|
||||
}, |
|
||||
createImageUploadDialog:function () { |
|
||||
var fileInput = this.fileInput; |
|
||||
if (!fileInput) { |
|
||||
//创建临时input元素
|
|
||||
fileInput = document.createElement('input'); |
|
||||
//设置input type为文件类型
|
|
||||
fileInput.type = 'file'; |
|
||||
//设置文件name
|
|
||||
fileInput.name = 'ime-images'; |
|
||||
//允许上传多个文件
|
|
||||
fileInput.multiple = true; |
|
||||
fileInput.onchange = this.onChangeUploadFile.bind(this); |
|
||||
this.fileInput = fileInput; |
|
||||
} |
|
||||
//触发点击input点击事件，弹出选择文件对话框
|
|
||||
fileInput.click(); |
|
||||
} |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
} |
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue