I have a table loaded using a json file in a modal window:
HTML CODE
<table id="table-alert3" class="table table-striped"></table>
JS CODE
$("#table-alert3").bootstrapTable({
url: 'json/data-table-alert3.json',
columns: [{
field: 'col1'
}, {
field: 'col2'
}, ]
});
JSON CONTENT:
[
{
"col1": "Juan Perez",
"col2": "<a href='#' class='opendiv'><img src='img/ico_add_td.png' /></a>"
},
{
"col1": "Sergio Montes",
"col2": "<a href='#' class='opendiv'><img src='img/ico_add_td.png' /></a>"
}
]
For each image link , when i make clic about image, i want to open a div, and your position must be relative to the image
How could do it?
Thanks,
Related
How can I make a selection with images and have the image get selected too
<v2-select :options="books" label="url">
<template #option="{url}">
<img :src="url">
</template>
</v2-select>
books: [
{
url: 'https://codeclimate.com/github/sagalbot/vue-select'
}
],
I need the title to be the clicked image
in doc i find https://vue-select.org/api/slots.html#selected-option
But I don't know how to put it together.
How can a label be formatted to have look of a link in extjs?
I don't want to have link functionality (to go to specific href). I would like just to have classical button which looks like a link and have click listeners.
I've tried with the following code:
{
xtype: 'box',
autoEl: {tag: 'a', href: 'http://www.google.com', html: 'Google'}
}
but, this is classical link.
I also tried
{
xtype: 'box',
html: '<a href="" class="link-forgot-password"> Forgot Password ?/a>'
}
That looks fine, but what is missing is listener.
Something like this:
{
xtype: 'box',
html: '<a href="#" class="link-forgot-password"> Forgot Password ?/a>',
listeners: {
el: {
click: function () {
console.log('click');
},
scope: this
}
}
}
In ASP.NET MVC I am using TinyMCE 4.7.8 (2018-02-26). I want to upload a Pdf/Doc/Excel file and add an anchor for it at editor HTML. I am able to upload the image and get back the uploaded url to add image at editor this works fine.
I am looking answer for two things a) Is link plugin is the correct way to upload the pdf and doc into system since I have not found any specific plugin for file handling in community edition! b) In my method filePicker I am creating dynamic html to handle the posted file, again it this approach is just a work around or there any way in TinyMCE to handle file type?
tinymce.init({
selector: ".TinyMCEEditor",
branding: false,
height: 500,
theme: "modern",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview | forecolor backcolor emoticons",
file_browser_callback_types: 'file image',
automatic_uploads: true,
images_upload_url: '/Content/UploadContentImg',
file_picker_types: 'file image',
file_picker_callback: function(callback, value, meta) {
debugger;
// Provide image and alt text for the image dialog
if (meta.filetype == 'image') {
imageFilePicker(callback, value, meta);
}
// Provide file and text for the link dialog
if (meta.filetype == 'file') {
filePicker(callback, value, meta);
//callback('mypage.html', { text: 'My text' });
}
// Provide alternative source and posted for the media dialog
if (meta.filetype == 'media') {
//callback('movie.mp4', { source2: 'alt.ogg', poster: 'image.jpg' });
}
},
templates: [{
title: 'Test template 1',
content: 'Test 1'
},
{
title: 'Test template 2',
content: 'Test 2'
}
]
});
function imageFilePicker(callback, value, meta) {
};
function filePicker(callback, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
//input.setAttribute('accept', 'image/*');
input.click();
debugger;
};
I am trying to add an icon to my toolbar (arbitrary - not associated with a button).
In my CSS I define the URL like this :
.myCoolLookingIcon {
background-image: url('../ext-theme-gray/images/grid/columns.gif');
}
And that works fine if I am setting icons for buttons by using iconCls.
I would like this icon in a label or image
I have tried :
xtype: 'label',
iconCls: 'myCoolLookingIcon '
and
xtype: 'image',
html: '<img class="myCoolLookingIcon "/>'
but that doesn't seem to work in either case.
This is one of the way of achieving what you want (Not using the iconCls)
xtype:'label',
html: '<img src=\"path_to_icon\">'
Try this:
xtype:'label',
html: '<img class="className" width="20" height="20">'
Giving width and height, makes it work.
Ultimately I ended up doing this. A little hacky but it worked.
{
xtype: 'label',
itemId: 'labelWithIcon',
text: '',
cls: 'classNameWithImgBackground',
listeners: {
render: function () {
this.setText('<span style="margin-left: 16px;">Label Text</span>', false);
}
}
}
When I move between views in my Sencha Touch app I see the animation (slide), then the original view(the one I started at) is shown again. At that point, if I click anywhere in the app the view will change to the correct newly active item.
I'm using Sencha Touch, XCode 4, iOS 5 SDK, and PhoneGap 1.3.0.
Thanks in advance!
here's the code for the main viewport:
plantanalyzer.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(plantanalyzer.views, {
login: new plantanalyzer.views.Login(),
plantDetail: new plantanalyzer.views.PlantDetail(),
buildingList: new plantanalyzer.views.BuildingList()
});
Ext.apply(this, {
items: [
plantanalyzer.views.login,
plantanalyzer.views.plantDetail,
plantanalyzer.views.buildingList
]
});
plantanalyzer.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
and for the viewController:
plantanalyzer.controllers.viewController = new Ext.Controller({
index: function(options) {
plantanalyzer.views.viewport.setActiveItem(plantanalyzer.views.plantDetail, options.animation);
},
show: function(options) {
plantanalyzer.views.viewport.setActiveItem(plantanalyzer.views.buildingList,
options.animation);
}
});
and this is the code for one of the views:
plantanalyzer.views.PlantDetail = Ext.extend(Ext.Panel, {
width: 320,
height: 480,
items: [
{
xtype: 'panel',
html: '<img src="images/logo.jpg"/>',
tpl: '{name}',
cls: 'plantToolbar'
},
{
xtype: 'button',
name : 'buildingSelect',
text: 'Select Building',
cls: 'standardButton',
listeners: {
'tap': function () {
'use strict';
Ext.dispatch({
controller: plantanalyzer.controllers.viewController,
action: 'show'
});
}
}
},
{
xType: 'panel',
cls: 'infoBoxes',
html: 'Efficiency (kw/ton)<br><canvas id="eff"></canvas>'
},
{
xType: 'panel',
cls: 'infoBoxes',
name: 'totalTons',
html: 'Total Plant Tons: '
},
{
xType: 'panel',
cls: 'infoBoxes',
name: 'totalCost',
html: 'Real-time Plant Cost: '
},
{
xType: 'panel',
name: 'uodateTime',
cls: 'lastUpdate',
html: 'Last Update: '
}
]
});
The code looks fine in both sections. When i had issues with phonegap and sencha touch doing this i generally found there was a javascript error occurring or extra html markup was in between the body tag of the index.html file. The first thing would be to open the console in chrome or safari and check the javascript console to determine if it is a javascript error. If you can't run it in them i would suggest the Wienre application that will give you a console and was written to debug phonegap applications (wienre will also allow you to view the html markup to make sure it is correct)
The problem must be somewhere in the view files. The code you have shown is correct.
Well, for what it's worth, after rebuilding the app I found the issue. It was some custom css that was screwing up the app. Specifically the width that was being set on some of the components.
Hopefully, this will save somebody else some time and heartache.
Thanks, Darren and Ilija for your help!